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.

• How and why to use D3 with React is an awesome overview of the D3.js plugin ecosystem and how to use the tool with a React-based JavaScript front end.

• D3 is not a data visualization library breaks down the parts to D3 and why it's not directly comparable to a typical charting library.

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.

• Responsive Data Visualization provides another approach for making responsive D3.js charts.

• 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.

• How to make a modern dashboard with NVD3.js uses the NVD3.js library that works as an abstraction on top of d3.js to create charts. The post puts together several charts to show how to build a dashboard based on public JSON data.

• d3-regression is a module for calculating statistical regressions from two-dimensionala data.

D3 ecosystem

• The trouble with D3 is not a tutorial but it's an important read because it discusses why D3 can be very difficult to learn: the learning curve depends on your background. If you are a front-end developer you will likely have the easiest time if you already understand JavaScript, SVG and the browser Document Object Model (DOM). Non-technical designers and analysts typically have the hardest time with using D3 because the not only have to learn the tool itself but all the concepts and web browser technologies that it is built upon.

• This visualization of d3.js modules and resources is a wonderful map for understanding how various parts of the library and the ecosystem fit together. The visual provides a useful map for where to concentrate your learning depending on what type of visualization you are working to build.

• D3.js in Action, Second Edition is partially an announcement for the authors book but also contains good context for who uses D3 and why its usage continues to grow.

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