Alberto Pepe edited intro.tex  over 8 years ago

Commit id: 0fa8cce732d089bf469d0131edf2d0eb0ddb2284

deletions | additions      

       

\href{http://d3js.org/}{D3.js} is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life. Authorea fully supports D3.js so that you can include fancy, dynamic, interactive visualizations in your Authorea documents.  Adding a D3.js figure in your document could not be simpler.   \textbf{Step 1}. From the folder view (folder icon in top sidebar), navigate to the \verb|figures| folder and create a new folder, e.g., called \verb|d3js|, and in it a new file, e.g. called \verb|d3js.html|  \textbf{Step 2}. Insert the Javascript code of the d3 visualization in the file you created. \textbf{Note}: for security reasons, you have to include all your data and CSS in the JS file or load it from URLs on \textbf{https}. Also- please load all d3 and related resources from CDNs on secure sites (https), such as \verb|https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js|.  \textbf{Step 3}. Click on QuickEdit in the top bar, select \verb|layout.md|, and add the path to your figure, e.g. \verb|figures/d3js/d3js.html|  \textbf{Step 4}. Go back to your main view. You're done! Your d3.js should now magically appear, as in simpler: open  the figure dropdown that shows on hover  below (click inside the image to play with it). any text block and click on\textbf{ Interactive Figure}.