Small Multiples with Details on Demand

Usage

First Clone the Repository

git clone git@github.com:vlandham/co2_small_multiple.git
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 http://0.0.0.0:3000

and you have a basic visualization

Start Coding

Open up coffee/vis.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. vis.coffee.
• /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

Requirements

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