/vitd_small_multiple

small multiples with details on demand

Primary LanguageJavaScriptMIT LicenseMIT

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