1. The lines that include the data.get function act as the join in this use. This line reads the data that is in the NAMELSAD column of the TopoJSON and looks through the CSV file to find the corresponding age adjusted rate. In order for this to work you need to load the topoJSON and csv files into their own objects. Making sure that they share a column or value that can join them.
2. The color values used in this map are created in the YlGnBu line is a separate line but is used here in the "fill" , function d.... The value that is returned from the get.data line is put into the return color line which outputs the associated color based on the natural breaks color scheme created in another line.
3. attr("stroke", "grey")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
These lines create the grey border of the polygons. The stroke is defined as grey, with round linejoins. The third gives the stoke a width of 1. These 3 lines give the stroke its color, joining and width.
4. .append(() =>
legend({
color: color,
title: `Nebraska Age Adjusted Cancer Rate per 1000 people`,
width: 260,
tickFormat: ".1f"
})
This code creates the object of a legend on the svg canvas. That is what I beleive it means when it says append. It then gives it a color from the color function which is linked to the natural breaks scale and corresponding bin colors. This is why the legend shows up with the breaks in it and not a collection of colors. The tittle line is exactly that it gives the text to go along with the colors. Width line sets the width of the legend at 260
5. .append("title")
.text(d => " Rate per 1000 " + data.get(d.properties.NAMELSAD));
The hover is really simple as browsers already show text functions when you hover so all thats being done is adding what text to appear which is the age adjusted cancer rate per 1000 people based on what the data.get function gets for the county. I used Rate per 1000 because it is a lot less wordy.
6. SVG stands for Scalable Vector Graphics. This like the canvas of the webpage that everything else is drawn on top off. It is used because unlike a a regular image it is made up of mathematical instructions. I used it here first creating it with the append line to create it. Then the legend and map itself is created in of the SVG. Even though I use canvas as a description truly everything is created in one line which puts all the elements into a single SVG