D3.js is a state-of-the-art library for data visualization. Check out the D3 gallery for stunning and beautiful examples. Happily, many of these visualizations include their source code, so that you can easily duplicate them.
For example, the parallel coordinates chart, created by Mike Bostock, is given with the generating D3 code and data! This is a cool and useful data viz that allows you to quickly visualize a multi-dimensional (but relatively small) dataset: you can immediately spot correlations across dimensions and uncover clusters. In this interactive viz, you can explore the data in depth by filtering values on each dimension with a brush tool.
Let’s try to replicate the parallel coordinates chart in a web app.
The parallel coordinates chart is illustrated on a dataset of car specifications. In your project, create the
cars dataset from this CSV file.
Create a new “standard”, empty webapp. To access the data in your web app, open the Settings tab and click on “Configure” in the Security section. In the dataset list, find the
cars dataset and allow your webapp to read it. Then, import the D3.js library on the main page of the Settings tab. As a reminder, this post explains how to do this.
Many D3 code samples, given in the gallery or bl.ocks.org, have the same overall structure.
In the parallel coordinates chart example, there is no HTML code written within the
<body> tags, and thus the HTMl panel of your web app code editor should be blank.
Here’s the CSS code, defined within the
<style> tags, that you should copy into the CSS panel of your editor.
The trickiest part in adapting a D3 template is always to shape the data in the format required by the data viz. In the parallel coordinates charts, the data in the D3 code is represented as the
cars JSON array.
But generally your source data is not in JSON format. In many D3 templates, the data is given as a CSV file which is converted to JSON.
In the D3 original code, the data is thus read from the
Then the D3 code defined inside the
d3.csv function is applied on the
cars JSON array.
and copy it into the JS panel of the web app editor.
In other words, keep the entire D3 code unchanged, except for the call to the
d3.csv function, which is replaced by defining the
parallelCoordinatesChart function, which takes the
cars JSON array as input.
Note: be sure to remove the parenthesis and semicolon that were at the end of the
d3.csv function; they are not needed (and the parenthesis will indeed cause an error).
Now, we only need to connect to the
cars dataset through the dataiku JS API, in order to create the corresponding cars JSON array.
Notice that, when you gave permission for your web app to read the cars datsaset, a call to the
dataiku.fetch function was automatically added. You finally need to copy the JS code defined below into the
dataiku.fetch function. This code creates the
cars JSON array and calls the
parallelCoordinatesChart function to create the chart.
That’s it, you have a running D3 data viz in your web app!
If you’re having trouble, be sure you’ve carefully followed all the steps. The best way to debug is to use the JS console in your browser with the web app editor open.