D3 US Map Visulization - ashish9342/FreeCodeCamp GitHub Wiki

US State Map Visualization using D3.js

screen shot 2016-05-19 at 6 29 43 pm

Project Explanation:

We have the sample data of US States: Number of serious accidents reported for every state in US.

We have this data in three categories: Lowest reported number for a month, Average reported accidents in a year and Highest number reported in a month, as showed in below sample data.

We want to draw a US Map and visualize this data such that, when we hover mouse over a state, it should show this data for that particular state.

Sample Data:

AZ: 13 41 57

CA: 41 60 81

NY: 6 35 54 and so on.

Hints and Resources:

Step by Step instructions:

  • First , we will need to create a US map.

    1. You can either create a map from scratch using sources like - Stately.
    2. Get a already created map from freehtml5maps or use this Javascript
  • Add your map to the main javascript used for visualization

    For Example, (script src="uStates.js")(/script) (!-- creates uStates. --)

  • Create Div tag to hold tooltip and create SVG to hold you map.

    For Example,

    (div id="tooltip")(/div)
    (svg width="960" height="600" id="statesvg")(/svg)
  • Create Tooltip function to create html content string in tooltip div.

    This tooltip function will return a table and this table will be shown whenever we hover mouse over the state Table should be something like this ( As shown in the first figure) : Arizona Low 13 Average 41 High 57

  • Draw states on id (#statesvg in our example ) with data and tooltip function.

    For example, uStates.draw("#statesvg", sampleData, tooltipFunc);

    Final output will be something like this: ( Hovered the mouse over California ) screen shot 2016-05-19 at 6 37 57 pm

References:

  1. D3.js Examples and Documentations.
  2. NPashaP GitHub
  3. Stately
  4. FreeHTML5Maps
⚠️ **GitHub.com Fallback** ⚠️