Mapping with d3.js

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});

D3.js is not just for charts

Most developers assume d3.js is just good for charts but d3.js is actually great for maps as well.
And it's not that complicated to create your first map with d3.

D3.js maps are different.

You provide the data that is displayed and if you want to include a basemap you can, but most often you won't need to. D3.js maps are very clutter-free by default.
You provide all the details you want.

With great power comes great responsibility

Since you have all the power to create a map to your liking you are responsible for most of the things.
There are a lot of helpers inside the library that will make things easier but you're still responsible of addin them.

On this page I want to give you an overview how you can create maps with d3.
I show you a lot of examples and have tutorials and quick tips

Here are a few examples of great maps with d3.js

Choropleth map from NYT.

Bubble map from WaPo.

Create beautiful and interactive
maps with d3.js

Get weekly mapping with d3.js tips

D3.js is not just for charts

With great power comes great responsibility

Here are a few examples of great maps with d3.js

Create beautiful and interactivemaps with d3.js

Get weekly mapping with d3.js tips

D3.js is not just for charts

With great power comes great responsibility

Here are a few examples of great maps with d3.js

Create beautiful and interactive
maps with d3.js