Prototype of a Sankey diagram to visualize city budget data (Oakland, CA) using D3.js
JavaScript Ruby Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Procfile Basics gutted out of Feb 5, 2012
deploy Basics gutted out of Feb 5, 2012

Oakland Budget Viz

Prototype of a budget flow visualization for Oakland, CA using D3.js and the Sankey D3 plugin ( ).

The key files are:

  1. oakland_budget_data.xlsx - a spreadsheet to bootstrap the backend; provides an easy way to input data and generates JSON markup via Excel formulas

  2. js/budget.json - the data; copy and paste the JSON markup generated in Excel here

  3. index.html - the page with the viz itself

This uses heroku-static-site ( ) to provide the minimal web server functionality needed (the GET call for the JSON) and make Heroku deployment easy; it's a simple Rack app.

Copyright 2012 Dave Guarino

(Details on heroku-static-site below)

Heroku Static Site

A simple ruby + rack application for serving a basic static website, suitable for deploying to Heroku. Their free 1-dyno plan covers 80% of my projects and Just Works™

For even simpler free HTML cloud hosting check out GitHub Pages.

I put static sites on Heroku when I will be adding some simple dynamic stuff later, or for redundancy with GH pages (whose uptime isn't perfect).


Run the app locally:

  1. gem install bundler
  2. bundle install
  3. bundle exec rackup
  4. Visit http://localhost:9292

Make something great, then push it to your Heroku account:

  1. gem install heroku
  2. heroku login
  3. heroku create --stack=cedar mynewapp
  4. git push heroku master


© copyfree 2012 Jamie Dubs. This source code made freely available under an MIT License.