What is the purpose of a Projection in Choropleth Map?

JavaScript
1

Tell us what’s happening:
Hello everyone,

I’m at early stage of the Chorpleth map project and have a question about D3 projections. Per one of the posts in the forum freeCodeCamp post, I should use use geoAlbersUsa projection to render the US map. For several hours, i have been trying but the map would not render. Then I accidentaly commented out the line the contains the projection code and the map rendered.

My understanding is that you need three “elements” to render a map in D3:

  1. JSON-based format with geo data (e.g., geoJSON)
  2. Projections - a function that converts from latitude/longitude coordinates to x & y coordinates.
  3. Geo path generators - a function that converts GeoJSON shapes into SVG or Canvas paths.

How is the map getting rendered without the projection?

Here is a link to the code: CodePen link

Your code so far

const ed_data_url =
	"https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json";

const county_data_url =
	"https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json";

const width = 1100;
const height = 800;

let svg = d3
	.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

let g = svg.append("g");

// load and display the World
d3.json(county_data_url).then(function (topology) {
	let counties = topojson.feature(topology, topology.objects.counties);
	console.log(counties);

	//let projection = d3.geoAlbersUsa(); PROJECTION IS NOT NEEDED???
	let path = d3.geoPath();

	g.selectAll("path").data(counties.features).join("path").attr("d", path);
});

Challenge: Data Visualization Projects - Visualize Data with a Choropleth Map

Link to the challenge:

2

You need to know which projection was used to project the data. You don’t have to use it. It’s useful for TopoJSON data if you need to translate projected data on the drawing.

GeoJSON uses latitude and longitude. TopoJSON is similar but uses projected latitude and longitude. A projection is just a function that maps 3D latitude and longitude onto a 2D surface (Mercator, Albers, etc.). The data for this project is TopoJSON that has been projected with the Albers USA projection. A path generator in D3 converts the projected data into a SVG path.

2 Likes
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.