Getting Started

Quick start guide for getting started with mapping with d3.js in four easy steps.

1Add the library

Include the JavaScript file in the <head> of your HTML file.

<script src="https://d3js.org/d3.v5.min.js"></script>

2Get some data

Find some data to play around wiht or use your own data.
D3.js works best with geojson and even topojson data (you need the topojson package then though)

Or create your own geojson using geojson.io.

3Pick a projection

With d3.js you can pick your projection or even create your own.

D3 comes with a vast amount of prebuilt very common projections.

I can recommend the EqualEarth or NaturalEarth projection.
But it depends on your use-case and the region you want to map.
If you want to map the United States check out the AlbersUSA projection.

4Create the map

Use this code and replace your data and you should be able to see a map. :) Want to know more about how to do it. Check out the tutorials.

 1d3.json('data.geojson').then(function(bb) {
 2  let width = 200, height = 200;
 3  let projection = d3.geoEqualEarth();
 4  projection.fitSize([width, height], bb);
 5  let geoGenerator = d3.geoPath()
 6  .projection(projection);
 7
 8  let svg = d3.select("body").append('svg')
 9  .style("width", width).style("height", height);
10
11  svg.append('g').selectAll('path')
12  .data(bb.features)
13  .join('path')
14  .attr('d', geoGenerator)
15  .attr('fill', '#088')
16  .attr('stroke', '#000');
17});