In this example, we are displaying the poverty and income based map in New York state. For this project, we first need the two data source and one ToponJson data.
- income.csv: Containing ID and Income
- poverty.csv: Containing ID and Poverty
- ny-quantize-topo.Json: Topjson data on New York
Step for creating New York Income Map in D3
Step 1. First, we need use scaleThreshold function to map input to output domain. Example as
In our example, we have to set color domain for each county in New York
d3.schemeGreens is function from d3-scale-chromatic.v1.min.js for making chromatic color in our map.
Step 2: We need to assign our data from file to variable and set it with d3.map function. The D3.map function map dictionary like structure that provides key-value storage. Here we are linking Id with Income.
Step 3: Load the TopoJSON data through d3.queue and defer functions. In our case, we will asynchronously load income.csv, poverty.CSV and TopoJSON data. Once we finishing loading all the data we will call the callback function.
In Step 3, we will have to follow sub-step, as
3.1 Read all the topojson data file and parse data to a variable and assign Geometry type and data. Where the data, we are getting from the callback function.
3.2 Assign the projection type and path
Where 20, 20 is padding and 460 and 580 is width and height. The d3.geoPath() is going to be the workhorse of our geographic drawings. It’s similar to the SVG path generators, except it draws geographic data and is smart enough to decide whether to draw a line or an area.
D3 gives us three tools for geographic data:
1. Paths produce the final pixels
2. Projections turn sphere coordinates into Cartesian coordinates
3. Streams speed things up
3.3 Draw the New York map and bind income and poverty separately and assign both to separate SVG in HTML file.
Full code for ny.js
Add the following code in index.html
Add following code in style.css