Data-Driven Documents (d3.js)

Data-Driven Documents (d3.js) is a JavaScript visualization library used to create interactive visuals for web browsers.

d3.js tutorials

d3.js has a steep learning curve so it is a good idea to read several tutorials before diving in and trying to create your own visualization from scratch.

• The Hitchhiker’s Guide to d3.js is a wonderfully-written resource that explains the context for how d3.js works and how all the pieces can be used to create your desired visualizations.

• d3.js first steps contains the code and markup for building your first d3.js visual.

• Let's Make a D3 Plugin shows you how to create your own reusable plugin that you can use across multiple visualizations as a separate JavaScript library. d3.js version 4 is now widely used so don't worry about the note at the start of the article.

• Reusable and extendable d3 charts is a natural extension of the d3 plugin post. It shows how to reuse visualization code between multiple visuals.

• Visualizing Movement Data - Part I provides a detailed example of how to draw a complex visualization.

• This Fantasy Map Generator is such a cool example of what d3.js can procedurally generate based on a set of inputs.

• Building dashboards with Django and D3

• Argyle in d3? Oh yes, the library can do that, and here is the code to prove it.

Charts with d3.js

• Responsive D3js Charts shows how to take a static line chart and make it responsive when the browser size changes.

• Resize to Scale with d3.js gives code for a render function that adjusts the size of the viewing window based on the parent element for the visualization.

• Make great-looking d3.js charts in Python without coding a line of JavaScript combines a Python backend with the python-nvd3 library to generate d3.js charts without having to hand-write the JavaScript code. If you are interested in a solution like this for your own visualizations then you should also check out Bokeh.

What else would you like to learn about Python and data?