I really like data visualization. I think many concepts could be easily explained with the right kind of visuals. That is why I was happy to attend the data visualization talk in the last PyData Berlin. Oddly enough, the visualizations presented were not created with matplotlib, bokeh, or any other of the known tools known to the Python community. They used d3.js.

d3.js is a visualization library written in JavaScript. What really caught my attention was the high flexibility, customization and interactivity the library offers. It also helps that graphs created are readily available to be seen on your normal browser. Advantage: final users do not need to download or run any software to see and manipulate the graphs.

Given such advantages, I thought: let’s give it a try. I was further encouraged by the speaker. According to him, it does not take that long to become a fairly good user of this library. So there I went…

After learning d3.js for almost a week, I would have to say the truth lies somewhere in the middle. There are many other things you want to have a grasp on before embarking into d3.js. For example, knowing some basics of HTML, CSS and SVG would definitely help. Knowing some basic JavaScript will be key when introducing interactivity to your graph.

While this might sound overwhelming, there are tons of materials and galleries you can check online. Perhaps the most known is d3js.org. I also found Scott Murray’s free online book very good for clarifying the basics.

However, when it comes to learning, I think nothing replaces the getting your hands dirty approach. I thought about doing a graph to demonstrate the effect of an outlier in a regression. I also wanted the graph to be interactive. I created some data, which you can see in this notebook. The following step was to make an interactive graph with d3.js. Below, you can check how it looks like. I hope the future brings more graphs with it. I am particularly interested in maps and all the interactivity they bring with them ;)