Workshop for the d3 javascript data visualisation library
- Main d3 site : http://d3js.org/
- Github repo : https://github.com/mbostock/d3
- Gallery of examples : https://github.com/mbostock/d3/wiki/Gallery
- API reference : https://github.com/mbostock/d3/wiki/API-Reference
- Some material based on : http://alignedleft.com/tutorials/d3/
- Cheat sheet : http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf
The main tools you need for this workshop is a text editor and web browser. One example also uses NodeJs to run a small http server to allow us to try loading data asynchronously using d3.
- Install NodeJs
- Configure the NodeJs server using the command line cd server npm install
- Run the NodeJs server node server.js
- Navigate your web browser to http://localhost:3000/d3tutorial.html
This tutorial will be in three parts. Each part is tackled by uncommenting sections code and talking through their purpose. The sections are:
- Basic rendering
- Real data and layouts
- Your own example
Our goal in parts 1 and 2 is to learn enough about d3 to be able to understand the existing samples so that we can each then pick a sample from the gallery and adapt it to our own needs.
Have fun!