The svg.append("g").selectAll("path") part creates a selection of <path> elements where each <path> represents a feature from the dataset. The .data() method binds the data to the selection.

It is rare for states to have a high percentages for both under 9th grade and bachelors degree or above. However, California, Chicago, and New York are all the dark blue (indicating that they have high values for both). This coould indicate a disparity in wealth and education in those areas, where access to education and stability is greatly divided. Many states in the North such as montana, Michigan, Wisconsin, South Dakota, and North Dakota all have high percentages of adults with a bachlors degree or higher while having low rates of under 9th grade. The states that have the lowest percentage of adults with under a 9th grade education are Indiana, Alabama, West Virginia, South Carolina, Oklahoma.

The .attr("transform", "translate(700,250)"); is what allows us to move the legend out from underneath the map. I changed the X position to move it right

These lines: .append("title") .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); Create a title for every path element (the states) and then fills out the text content of each title with out attributes.

Multiple high contrast diverging color schemes are used here. You can add a new color scheme by creating a new 3x3 matrix like was done with YlGn

Theoretically you could combine any two color blind friendly schemes to create a bivariate color scheme, but ideally you choose two schemes that contrast each other well and pleasantly.

the code sets up quantile scales for the two values using the x and y functions (<9thgrade and (>=Bachelors) and defines a color function that maps each data value to a specific color based on its quantile position.