/d3-topojson-template

Boilerplate that maps a data set to a D3 generated map of the US.

Primary LanguageJavaScript

D3 TopoJSON Template

A project template that uses D3 and TopoJSON to generate a choropleth map of the USA. The template also has top level filters, tooltips for each state, and a slider to navigate the date range.

Notes

  • The map uses the Albers USA projection.
  • There's currently no date formatting, but you could either handle it natively or by using a library like Moment.js.
  • Keyboard controls for the slider are bound to the left and right arrow keys.
  • Tested in the latest versions of Chrome, Safari, and Firefox.

Data Structure

[
    {
        "name": "Alabama",
        "dates": {
            "2013-09-01": {
                "buzzes": 0,
                "doodads": 4,
                "fizzes": 1,
                "gizmos": 1,
                "widgets": 1
            },
        }
        "id": 0
    },
    ...
]

Run site locally

  1. Clone the repo.

    git clone https://github.com/jonchretien/d3-topojson-template.git && cd d3-topojson-template

  2. Install the NPM dependencies.

    npm install

  3. Run watch tasks and start up a HTTP server.

    make dev -j

Lint JavaScript

make test

Build the project.

make build

License

D3 Boilerplate TopoJSON is released under the MIT License.