MayOneUS/homepage_redesign — pull request #64 by jueyang (2014-06-30 23:28:58+00:00)
Title: Donation data visualization

### Interactive graph

This pull request includes an interactive graph showing the distribution of donation amounts:
- The graph ranks amounts of donation in a descending order
- When an amount (eg. "$25") and/or its bar is clicked, a table of donation instances aggregated on the state level appears

![](http://f.cl.ly/items/1S3g383o12460h090V1F/graph.gif)

### Navigation

The graph can be accessed with the anchor `#your-donations`, which has also been added to the breadcrumb navigation on the home page.

![](http://f.cl.ly/items/3i3s3J020f020c1O380C/Screen%20Shot%202014-06-30%20at%207.24.18%20PM.png)

### Organization

The graph is currently an include file titled [`_includes/histogram.html`](https://github.com/developmentseed/homepage_redesign/blob/bcad325c53323eaf822e67ee09db48df56f494da/_includes/histogram.html), which contains the all the html/css/js. For the creation of the graph, [two js libraries](https://github.com/developmentseed/homepage_redesign/compare/viz?expand=1#diff-d5c484c0e4c68d2a5aae93c7d824f6aaR21) have been added on load.

Data is stored in [`data/`](https://github.com/developmentseed/homepage_redesign/tree/bcad325c53323eaf822e67ee09db48df56f494da/data) folder, with the latest updated data (up to 6/27) from @djq.

cc @ianschuler