This Blog is going to introduce D3 and how it can be used . The blog is going to be on the basis of the details from the PyData ,NewYork, a talk on visualization by Brian Coffey. You can check it out here.
What is D3?
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards giving you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
The website has some great introduction and examples that you should check out!
Why D3 in Jupyter Notebook ?
Most of the time we use: matplotlib, seaborn, bokeh …etc to visually represent data . By using D3 you get an ultimate freedom of modification and customization with respect to your data visualization. Sometimes the unique visualization for your analytics might not be available in the graphing tools that you usually use. Hence D3 has a lot of examples which can be used by modifying it for your needs (custom visualization) .
So what are we waiting for? Let’s get started!
Once you open your Jupyter Notebook you can open the developer tool (Chrome-view-developer-developerTools). The developer tool helps you see the DOM(document object Model) and also helps you make changes . DOM is a document which is done in HTML. This written document will be parsed and understood by the webpage. So the java script(D3) basically modifies this DOM (add nodes, take away nodes ..etc )
So being able to see how that happens using the developer tool is handy. The image below will give you an idea of how it looks.
Jupyter NoteBook has a function that will give you access to the DOM.
So how does it really work?
When you write html followed by a string in the Notebook it will interpret that string and put it into the DOM . The image below explains that:
Now let’s add a style class to change the style element. You can give it an ID so you can reference it later in the java script.
D3 -where does it fit?
So we are going to put objects in DOM and then going to use java script to change/ modify it later.
D3 is a javascript library that helps you modify the DOM with data.
The steps that we are going to follow are:
• You select collection/Array of DOM elements
• Attach array of data to the array of DOM elements
• Modify those elements based on the data
Now let’s append some elements / style — D3 website has some amazing examples and have many array of visualization with bl.ocks that you can use,like :
Now let’s append some elemnts / style —
D3 website has some amazing examples and have many array of visualisation with t blocks that can use:
Let’s have a look at one of them with the bl.ock.
These usually have:
• short descriptions of the graph which will give you an idea if it fits your need
• interactive graphs
• html,css,java script that output these graphs
• data that gets read by the script which is usually in the form of csv or tsv form. You can modify this to put in your data. Now let’s have a look at example in the Notebook
IRIS DATA: SIMPLE SCATTER PLOT USING D3 IN JUPYTER NOTEBOOK
Now let us use the famous Iris data set to represent a scatter plot.The GitHub Link to the code .
We will use the bl.ocks template from here ,to construct and customize the scatterplot in order to learn more about it .The link to the data set is here and it is in the tsv format.
In D3 the file usually gets read as an array of dictionaries so we will re-format our tabular data that way in preparation for it to be used in the graph below.
Now let’s get into the css and the javascript from the example and see how we can use it .
First let’s take the css text from the original bl.ock text and remove the body style reference so it does not effect the whole note book
Next, let’s copy the java script and make two changes that are :
- The first set of changes is to the width and height of the image
- The second change is simply to reference a different DOM element as the starting point. D3 will look for a specific DOM element to write things to. These block usually reference an external file like csv/tsv. The $ is going to be used in the templet engine to find and replace.
//* — is used as comments , so those lines will not be executed and below that you can see the changes that were made.
Now let’s make a template for the html string
You can notice I have put css text for the style which we created earlier.Then we use div instead of a body and use that id to reference later .First we have the template engine for the java script where we give that data and create a connection for graphdive by referencing the id .Now for the next step ,add the css and the java script to the HTML template engine which will combine it to execute the output(the scatter plot)
Fun, isnt it?
Now shall we look at another example ?
BAR CHART IN D3
Example :If you want to update your script , in this case we will update the data value .
Follow most of the steps that we discussed earlier and you can get the bl.ock from here.
Now for the modification to the java script.
Now let’s take a simple data set and parse it .
For the update, create another js template that updates the data.
Use this to parse the new modified data into your visualisation and boom! There’s your output!
These are simple examples to explain the concepts and techniques. You can write the html,css and java script separately and call them into the Jupyter Notebook as well . Hope you guys enjoyed the first part of the blog . The second part will explain basics of sigma JS and network science. Stay tuned!