A simple way to get started with data visualizations using d3 and coffeescript

Usage

First Clone the Repository

git clone git@github.com:vlandham/vis.git
cd vis

You might consider creating a new branch for your Vis

git checkout -b interesting_new_bar_chart

View built in example

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

python -m SimpleHTTTPServer -p 3000

or thin in ruby

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. Example 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
• /img/
  • put your images in here
• /tools/
  • put your helper scripts / data manipulation tools here

Requirments

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

Contents

Twitter Bootstrap

• 2.2.1

d3.js

• 3.0.2

Raphael

• 2.1.0

coffee-script.js

• 1.4.0

jQuery

• 1.7.2

Leaflet

• 0.4 beta