small multiples with details on demand
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.


Small Multiples with Details on Demand


First Clone the Repository

git clone
cd co2_small_multiple

Remove Google Analytics Code

To make things easy on myself, This is the same code that is used to
power the live demo. As a consequence, my GA code is in the index.html file.

If you could be a nice person and remove or change that in your version,
I’d appreciate it.

View Demo

Because of how D3 handles importing data, this tutorial should be viewed using a local webserver to serve the pages.

Python webserver

You can start up a local webserver by using python’s built-in simple server:

For Python 2.xx

python -m SimpleHTTPServer -p 3000

For Python 3.xx

python -m http.server

This assumes you have Python availible from the command line.

On Windows, you will need to install Python. Here is one tutorial for that

Ruby webserver

The thin webserver, a ruby gem, can also be used:

thin start
# might have to run 'bundle install' first

Now go to

and you have a basic visualization

Start Coding

Open up coffee/ and start modifying the built in visualization to fit your needs.

Folder Organization

  • /
    • main vis area
  • /index.html
    • main page for your visualization. Loads coffeescript and javascript files.
  • /coffee/
    • coffeescript files.
  • /data/
    • data dump for .csv and .json files and other data files your vis uses.
  • /js/
    • javascript goes here. JS Libraries in libs directory
  • /css/
    • put your stylesheets in here


To startup the server, you either need python, or a bunch of ruby gems (should be simplified in the future).

Run bundle install to get the gems needed. Gems listed in the Gemfile