Embedding D3 graphics in GRAV site

Archive
1

Hello, I am so impressed by Grav that I have started migrating several sites (Wordpress and Textpattern) to Grav. I would like to know how best to embed SVG graphics created with Mike Bostock’s wonderful d3.js graphics library in Grav templates. All advice is welcome.
Thank you, François Desvallées.

2

Hi, in principle you can use SVG graphics like the standard images. Just place them in a directory a point to them as described here embedding the SVG graphics via http://learn.getgrav.org/content/media#animated-and-vectorized-image-an .

If you would like to generate SVG’s on the fly, the best is to modify the template (template inheritance is recommended) and add the required script into the head

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

download and install for example the Assets plugin and insert your custom JavaScript for generating the SVG into the body of a document via the special syntax:

{assets:inline_js}
  /* Your JavaScript code goes here */
{/assets}
3

The answer above about the Assets plugin is the method I used. When you do that, you will find that it won’t usually work unless you add a jQuery(document).ready( function() { Your D3 calls to make the graphic here }
to your code, because if the script is loaded before the DOM is ready you won’t be able to make the modifications needed to the HTML objects when you do the var svg = d3.select("#body").append("svg") and similar calls. Good luck, and keep us updated about your progress. :smiley: I am really interested in that, too. I am going to use that library extensively in my website so I am working on making it easy to do for me.

4

Thanks, I will try that. In fact I had not been able to make it work with the assets until now, so I have inserted an iframe with a link from another website that runs the javascript.
This is still very primitive, but it works:
http://3e68731fd4.url-de-test.ws/blog/skymap

François

5

I have some basic D3.js visualizations working on my site now and made a post (in Spanish - sorry) about the things I did for them to work and tips to have in mind. Maybe they can be of help. The only thing I am pending is to make them show well in mobile devices and such, but I hope I can get to do it one of this days (didn’t have time yet).