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;
💡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:
- D3 Gallery
- Mike Bostock Examples
- ES6 support
- d3.js v3→v4 changes
- For Example
- https://github.com/arnicas/d3-faq
- https://github.com/arnicas/interactive-vis-course
- D3.js official website https://d3js.org/ & documentation
- D3 Blocks http://bl.ocks.org/mbostock
- By Example
- Big List of D3 examples
- Blockbuilders (live coding)
- Awesome D3
- ECMAScript compatibility table
- D3 Google Group
- JavaScript Guide
- D3.js Source Code Walkthrough Part 1
- D3 Workshop slides [a fun, difficult introduction to d3]http://www.macwright.org/presentations/dcjq/
- OpenVis conference videos
- d3.js little code walkthrough
- Distill chart
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 →