11 Share D3 online

There are a number of ways you can share your D3 code online. Even if you’re not sharing, there are advantages to an online setup, for example, not having to set up a local server as described in the chapter on reading files.

11.1 VizHub

My top recommendation is to use vizhub.com, created by Curran Kelleher, to host d3 visualizations online. Watch the video on the home page, “How to Use VizHub” for a quick how-to tutorial. Note however that using ES6 imports to import D3 modules separately, such as import { select } from 'd3'; as demoed in the video is completely optional; it is sufficient to link to the full D3 library in the <head> section of index.html as we’ve been doing:

<script src="https://d3js.org/d3.v6.js"></script>

As such you will not have index.js and generated bundle.js files as in the example.

When browsing examples, remember that different versions of D3 are not compatible, so be sure to look at v6 examples, or know what you need to update from v4 and v5 examples. In addition, as with all code sharing sites, remember that not all examples are good examples. Examples by Curran Kelleher, the creator of VizHub, are good models to follow.

11.2 bookdown

Including D3 code directly in a bookdown book hosted online (such as GitHub Pages) has the advantage that everyone is in one document. On the downside the book must be knit to view the html which happens quickly without R code but is still an extra step.

There are a few workflow options:

11.2.1 Everything in the .Rmd

Include a link to the D3 library and then all of your code between script tags, and then your D3 between a second set of script tags:

<script src="https://d3js.org/d3.v6.js"></script>
<script>
...
</script>

(You don’t need <html>, <head>, and <body> tags.)

11.2.2 Put D3 in a separate .js file

In your Rmd file include the link to the D3 library as well as a link to a file with your D3 code:

<script src="https://d3js.org/d3.v6.js"></script>
<div id="mysvg"></div>
<script src="myjs.js"></script>

You can then create an identical .html file for testing purposes only. This has the advantage of not having to render the full bookdown book each time you would like to observe changes to your D3 code. This workflow is demoed in this video.

11.2.3 iframe

Create your entire visualization in a separate .html file and then include in your .Rmd file with <iframe>:

<iframe src="mybarchart.html" width="400" height="300"></iframe>

11.3 Observable

Observable, created by D3 author Mike Bostock, is the official D3 web tool for creating and sharing D3 code. It is a powerful, popular tool–all new D3 code examples are now presented in Observable–but program flow is different than it is for stand-alone JavaScript. If you’re interested in learning more, see the collection of Observable Tutorials.

11.4 Blockbuilder 2015-2020

As an aside, blockbuilder.org was a very popular service for sharing D3 code online, but by the end of 2020, will no longer allow users to create new blocks, and going forward will serve as an archive of previously created ones. If you use it for this purpose, remember to pay attention to the version of D3 in use; some authors have included the version number in the block titles but this practice is not widespread. Remember as well that not all examples are good examples, both in terms of the graph choices and the quality of the code.

A few reputable block authors, in terms of quality of D3 code, are:

Mike Bostock (creator of D3)

Ian Johnson (creator of blockbuilder.org)

Curran Kelleher (data viz consultant / educator)

Malcolm Maclean (author of D3 Tips and Tricks, v5.x, lots of simple v5 examples with v5 in title)

Kent Russell (creator of interactive parcoords package in R)