Civic Impact Through Data Visualization
These are the materials for my workshop on creating interactive data visualizations with D3!
And please do not hesitate to reach out to me directly via email at firstname.lastname@example.org or over twitter @clearspandex
You will need:
- HTTP web server
- On OSX and Linux
python -m SimpleHTTPServer
- On Windows, I recommend downloading Mongoose
- On OSX and Linux
- Text Editor: I recommend Sublime Text
- A (modern) Web Browser: I recommend Google Chrome
Once you have downloaded the software above, you are ready to start making some data visualizations!
- Get the files: Download the ZIP or
git clone https://github.com/Jay-Oh-eN/civic-data-visualization.git(git tutorial) this repository.
- Start you HTTP web server
- If using a
SimpleHTTPServer, navigate into the repository folder (
hands-on-d3) on your machine before you start the server.
- If using Mongoose, set the 'Shared Directory' to be the repository folder.
- If using a
- Navigate with a web browser to
http://localhost:[port]where [port] is the port the server has started on (
SimpleHTTPServerdefaults to port 8000)
- You should see the directory listing, click on any of the
.htmlfiles and you should see the charts.
The data is from the Data Canvas project, which is sponsored by Gray Area, swissnex San Francisco, and Lift. It contains data from 14 sensors in 7 cities which collect and stream information about their environment (temperature, dust, pollution, humidity, light, etc.).
There are 4 different granularities of measurement. Files ending in:
*-5md.csv: measurements every 5 minutes for a day
*-1hd.csv: measurements every 1 hour for a day
*-6hw.csv: measurements every 6 hours for a week
grapealope.csv: entire history of the sensor near Noe Valley at 10 second resolution
The files are comma separated with headers and 8 fields:
By the end of this workshop you should be able to:
- Describe the data visualization process and the difference between explanatory and exploratory visualizations
- Know how to load multiple data files with D3
- Determine the best chart type for your type of data
- Create author driven narratives with animation (
- Tie this interaction into a reader driven narrative
- Contextualize your data through the use of secondary datasets
Facebook IPO (NYT)
Syrian Refugee Crisis (Wesam Manassra)
Martini Glass (mix of author and viewer)
Visualizing MBTA Data (Mike Barry and Brian Card)
Gun Deaths (Periscopic)
Flight Delays (538)
- Visual Storytelling with D3 (Ritchie King)
- Data Visualization and D3.js (Udacity)
- Interactive Data Vizualization (Scott Murray)
- CSE512: Data Visualization (University of Washington)
- D3 Meetups
- JS for Cats (beginner)
- Code School interactive
- Superhero.js (set of resources)
- Let's Make a Bar Chart
- How Selections Work
- Thinking with Joins
- General Update Pattern
- Working with Transitions
- Gallery of D3 example
- Dashing D3
- D3 Noob
- D3 Show Reel
- D3 master list of tutorials
- Towards Reusable Charts
- RAW (GUI)
- D3plus (charting)
- Rickshaw (timeseries)
- dc.js (multidimensional)
- NVD3 (charting)
- c3.js (charting)
- Queue.js (multiple data files)
Copyright 2015 Jonathan Dinu.
All files and content licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License
Rights of examples and screenshots of data visualizations belong to the authors themselves.