A simple way to get started with data visualizations using d3 and coffeescript
Usage
First Clone the Repository
git clone [email protected]: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
.
- coffeescript files. Example
/data/
- data dump for
.csv
and.json
files and other data files your vis uses.
- data dump for
/js/
- javascript goes here. JS Libraries in
libs
directory
- javascript goes here. JS Libraries in
/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