NYC data visualizer, an example of using d3.js's geographic framework
Switch branches/tags
Nothing to show
Clone or download
Latest commit a5f7645 Feb 11, 2012


A visualizer for NYC zipcode-based data using d3.js's geographic framework. Intended to be an example of how to use the geographic framework, since the documentation doesn't make it that obvious of all the gotchas. Eventually, I want users to be able to upload their own datasets in a specified format, and be able to see it in a choropleth map. Currently the only (and default) dataset is Con Edison-provided electricity data from 2010.



  • Bootstrap -- Grids, tables, and layouts management
  • d3.js -- Data-driven transformations and bindings
  • jQuery


  • Colorbrewer -- Color advice for cartography
  • GDAL -- Tools for translating between different geodata formats
  • MapShaper -- Online tool for manipulating Shapefiles



A really simple node.js server.js file is provided for convenience, but the code as it stands is all static files, so you could use nginx or Apache to serve the static files. If you wish to run it using node.js, do:

node server.js

and go to http://localhost:8080/.

Data Specification

The uploaded data specification is as follows:

    "specification": [{
        "id": "feature-1", // Will also determine option id in form select
        "text": "Feature 1",
        "per-capita": true // Boolean value to toggle per-capita support for this feature
    }, {
        "id": "feature-2",
        "text": ...,
        "per-capita": ...
    "data": {
        "10001": { // Keys need to be zipcodes
            "feature-1": 1, // Key needs to match ids in specification section
            "feature-2": 2, // Values are assumed to be numbers
        "10002": {
            "feature-1": 3,
            "feature-2": 4,