\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{Data-driven, interactive article with d3.js plot and IPython Notebook}


\author{Alberto Pepe}
\affil{Affiliation not available}

  
\author{Andrea Bedini}
\affil{Affiliation not available}
  



\date{\today}

\maketitle




This week we are launching a brand new look for Authorea and a couple of exciting new features aimed at making scientific research more interactive. Since the very beginning of Authorea, we have been striving to make collaborative scientific writing as easy as possible. But in addition to \textbf{writing}, we are also creating a space for new ways of \textbf{reading} science, and \textbf{executing} it.

For example, if you are a scientist, chances are that you do a lot of data analysis and you might want to visualize and provide access to your data in some \textbf{fun, new, interactive, more meaningful, data-driven} ways, rather than the usual static, data-less plot. There are many ways to create this kind of interactive plots. In this short blog post we will look at two of them. 

\section{Javascript, d3.js, and d3po.js}

Javascipt offers many ways to create data-driven graphics. A popular solution is \href{http://d3js.org/}{D3.js}, a JavaScript library to create and control web-based dynamic and interactive graphical forms. A gallery of some beautiful d3.js plots can be found \href{https://github.com/mbostock/d3/wiki/Gallery}{here}.

Authorea now supports most Javascript-based data visualization solutions. The example below - Figure \ref{fig:1} - is a plot generated using \href{http://d3po.org/}{D3po.js} which is a javascript extension of d3.js. D3po allows anyone with no special data visualization skills, to make an interactive, publication-quality figure that has staged builds and linked brushing through scatter plots. What's even cooler is that the plot below is based on actual data (astrophysics data, yay!). The figure describes how metallicity affects color in cool stars. It is based on work of graduate student Elizabeth Newton and others \cite{2014AJ....147...20N}. \textbf{Try clicking and dragging in the scatter plots} to understand the power of linked brushing in published figures.

You should know that \textbf{this entire visualization is running within Authorea}. The Javascript, HTML, CSS and \textbf{all the data} associated with this image are all part of this blog post. They are individual files which can be found by clicking on the folder icon on the top left corner of this page.

 

\section{IPython Notebooks}
Another very popular solution among scientists for bundling together research data, analysis, and code is the \href{http://ipython.org/notebook.html}{IPython Notebook}. IPython NB is a web-based interactive computational environment where you can combine code execution, text, mathematics, \href{http://jakevdp.github.io/blog/2013/12/05/static-interactive-widgets/}{plots and rich media} into individual documents. These documents can now be imported, visualized and executed within Authorea!

So, if you already use IPython Notebook to collect all your analysis and generate your plots, you can now include these notebooks in your published articles on Authorea. Below, in Figure \ref{fig:2}, we show a plot generated by Python code which uses the \textbf{SymPy, Numpy and Matplotlib packages} to perform symbolic manipulations. It is a numerical visualization of symbolically constructed expressions.

If you \textbf{hover on the figure below}, you will notice a link in the lower left corner: \textbf{Launch IPython}. By clicking it, you will launch an environment where you can visualize and interact with this plot (follow the instructions). For example, you can \textbf{change the parameters} that were used to generate it and see it change interactively. You can also \textbf{download} the entire Notebook and play it with it locally.\selectlanguage{english}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=1.00\columnwidth]{figures/d3/static.png}
\caption{{\textbf{\label{fig:1}}. This plot shows the near-infrared 2MASS colors of M dwarfs observed by \protect\citet{2014AJ....147...20N}. One color is plotted on the x-axis and another color is plotted on the y-axis. The stars trace out a main sequence, with some scatter. This plot is the work of \href{http://adrian.pw}{A. M. Price-Whelan}, \href{http://www.astro.columbia.edu/~jpeek/}{J. E. G. Peek}, \href{https://www.cfa.harvard.edu/~enewton/}{E. R. Newton}, \href{http://people.seas.harvard.edu/~borkin/}{M. Borkin}, \href{http://www.physics.usyd.edu.au/~jallen/}{J. Allen}, \href{http://www.ruthangus.co.uk/}{R. Angus}, \href{}{D. Muna}, \href{http://www.ast.cam.ac.uk/~ts337/}{T. Staley}.%
}}
\end{center}
\end{figure}\selectlanguage{english}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=1.00\columnwidth]{figures/open-access-costs/open-access-costs}
\caption{{\textbf{Fig. 2.} Click on Launch IPython icon above to visualize and execute the IPython Notebook which generated this plot in the first place.%
}}
\end{center}
\end{figure}

\section{What next?}

Interested in providing your readers with a more interactive view of your research? Want to share your data and analysis with your coauthors, peers, colleagues (or the public)? These tools are for you! Go ahead and start creating your own interactive and executable visualization.

We will be publishing more examples and tutorials on how to use Javascript, IPython (and other tools!) to create beautiful interactive plots. If you want to get started sooner than that, feel free to experiment on your own or get in touch with any question you may have at \textbf{hi@authorea.com}.

\selectlanguage{english}
\FloatBarrier
\bibliographystyle{plain}
\bibliography{bibliography/converted_to_latex.bib%
}

\end{CJK}\end{document}

