\documentclass{article}
\usepackage[affil-it]{authblk}
\usepackage{graphicx}
\usepackage[space]{grffile}
\usepackage{latexsym}
\usepackage{textcomp}
\usepackage{longtable}
\usepackage{tabulary}
\usepackage{booktabs,array,multirow}
\usepackage{amsfonts,amsmath,amssymb}
\providecommand\citet{\cite}
\providecommand\citep{\cite}
\providecommand\citealt{\cite}
\usepackage{url}
\usepackage{hyperref}
\hypersetup{colorlinks=false,pdfborder={0 0 0}}
\usepackage{etoolbox}
\makeatletter
\patchcmd\@combinedblfloats{\box\@outputbox}{\unvbox\@outputbox}{}{%
  \errmessage{\noexpand\@combinedblfloats could not be patched}%
}%
\makeatother
% You can conditionalize code for latexml or normal latex using this.
\newif\iflatexml\latexmlfalse
\AtBeginDocument{\DeclareGraphicsExtensions{.pdf,.PDF,.eps,.EPS,.png,.PNG,.tif,.TIF,.jpg,.JPG,.jpeg,.JPEG}}

\usepackage[utf8]{inputenc}
\usepackage[english]{babel}




\begin{document}

\title{How to include d3.js visualizations in your articles}


\author{Alberto Pepe}
\affil{Authorea}



\date{\today}

\maketitle




\par\null

\section*{Interactive figures in Authorea
documents}

{\label{563375}}

Authorea enables embedding of interactive, dynamic, data-driven figures
directly into articles. These can be diagrams from external services
like~\href{https://cartodb.com/}{CartoDB}~or diagrams from a javascript
library
like~\href{https://www.authorea.com/users/3/articles/17515/_show_article}{d3.js},~\href{https://www.authorea.com/users/2/articles/35692/_show_article}{flotchart},
or~\href{https://www.authorea.com/users/9161/articles/9681/_show_article}{bokeh}.

To insert an interactive figure,
click~\texttt{Insert\ Interactive\ Figure}~ from the toolbar and select
the HTML file that you wish to add to your document.~

\par\null\selectlanguage{english}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=1.00\columnwidth]{figures/Screen-Shot-2017-09-13-at-4-24-41-PM/Screen-Shot-2017-09-13-at-4-24-41-PM}
\caption{{Insert -\textgreater{} Interactive Figure
{\label{879377}}%
}}
\end{center}
\end{figure}

\textbf{Note:~}You can insert iframes and use external CDNs however,
please note that ~for security reasons, you have to include all your
data and CSS in the JS file or load it from URLs on https sources. E.g.
use CDNs such
as~\texttt{https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js}

\subsection*{Example}

{\label{132767}}\selectlanguage{english}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=0.70\columnwidth]{figures/d3js/static}

\end{center}
\end{figure}

The example above was generated using the following HTML code. Want to
try it out? Here's the
\href{https://intercom.help/authorea/host-data/interactive-figures/inserting-an-interactive-figure}{instructions}.

\selectlanguage{english}
\FloatBarrier
\end{CJK}\end{document}

