Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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 or over twitter @clearspandex

Getting Setup

You will need:

  • HTTP web server
    • On OSX and Linux python -m SimpleHTTPServer
    • On Windows, I recommend downloading Mongoose
  • 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!

  1. Get the files: Download the ZIP or git clone (git tutorial) this repository.
  2. 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.
  3. Navigate with a web browser to http://localhost:[port] where [port] is the port the server has started on (SimpleHTTPServer defaults to port 8000)
  4. You should see the directory listing, click on any of the .html files and you should see the charts.

If you need some help with Javascript or D3, refer to the tutorials below

Libraries Used

The Data

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

You an access a bulk download of all the data (100+ MB) here. You can also download samples or access the stream through the API (details on the data page).

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:

timestamp city temperature light airquality_raw sound humidity dust
2015-02-16T17:00:00.000Z San Francisco 20.8856185354523 2231.45801048026 28.8458008730416 1674.71050009727 48.4880466992298 882.367404134883
2015-02-16T18:00:00.000Z San Francisco 21.8623045793052 2542.46720508251 26.5113633058142 1652.25960948903 43.9341875396295 912.0280753969
2015-02-16T19:00:00.000Z San Francisco 23.5113166041101 3215.03460441893 24.8987852323788 1690.5842506536 40.5058249680354 939.447105875158
2015-02-16T20:00:00.000Z San Francisco 25.6472096479114 4558.69142401972 26.0867059045864 1704.29832357106 38.4312464272035 999.743066983922


By the end of this workshop you should be able to:

  • Describe the data visualization process and the difference between explanatory and exploratory visualizations
  • Understand the Javascript functions, closures and callbacks
  • 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 (setInterval())
  • Create engaging user interaction through Javascript events such as dragging, hovering, and clicking
  • Tie this interaction into a reader driven narrative
  • Contextualize your data through the use of secondary datasets

Visualization Examples

Author Driven

Facebook IPO (NYT)

Syrian Refugee Crisis (Wesam Manassra)

Viewer Driven

Crimespotting (Stamen)

Martini Glass (mix of author and viewer)

Visualizing MBTA Data (Mike Barry and Brian Card)

Gun Deaths (Periscopic)

Flight Delays (538)

Seven Modern Remakes Of The Most Famous Graphs Ever Made (Plotly)


Next Steps





D3 Libraries



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.


No description, website, or topics provided.



No packages published