No description, website, or topics provided.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Dataviz using D3 and modern JS tools

We will go through the progressive building of d3.js v4 charts. It requires some JavaScript basics and lots of web development tools. I provide boilerplate code and we will start from scracth.


  • This is a script from a workshop organized at MixIT 2017
  • This is very much work in progress, feedback welcome
  • I did my best to give credits and add links to original content; feel free to let me know if I missed something


  • STEP 00 - basic tools; npm; package.json; first D3 chart;
  • STEP 01 - use D3 modules; minimize;
  • STEP 02 - D3 chart module; getter/setters; load configuration;
  • STEP 03 - reusability; multiple charts;
  • STEP 04 - tests; server-side rendering;

A quick D3 Overview

💡D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data. Source

  • D3 is a visualization kernel
  • Issued from a reasearch paper and a long geneaology of tools from Stanford/Berkeley and now UW
  • One of the most popular github repository

Useful D3-related links:

For dynamic diagrams we recommend D3.js. For complex diagrams where you only want to animate part of them, you can draw a static diagram, tag elements of your diagram with classes or ids, and then manipulate them with D3.

D3 or D3.js = proper name

d3 = package or symbol name

d3.js = file name

#d3js = hashtag


Go to STEP 00