This imports the d3 library.

This imports the topojson library.

This formats the labels and legend.

This function returns the colors.

This creates the custom bivariate legend.

Bivariate color schemes can be formed by taking two perpendicular planes containing different hues of two colors and overlapping them. In this case, I looked up a 3 point gradient from green to white, and another 3 point gradient from Purple to white. I inserted them into the sides of a 3x3 array, and used midpoints to find the four remaining hex codes.

this assigns the name idAttribute to the CountyFIPS attribute

This line defines the variable nebraska to a FileAttachment object that opens the nebraska_counties_wgs82 json. This file contains the polygon information to draw the counties of nebraska.

This line converts the nebraska variable from a TopoJSON to a GeoJSON, making it compatible with the d3 library.

This creates the two data values we are comparing which is the median age and the percent of the population under the age of 5.

The projection line of code creates and sizes the map projection into Albers USA projections. The fitExtent scales and positions the map so all data can fit between the margin, width, and height that I set.

This creates a function that converts the geographic shapes into SVG paths and uses the albers projection.

Set the width of the map to 990. The reason I set the height to 650 and the width to 990 because Nebraska is longer than is it tall, so setting a greater width ensures that Nebraska fits nicely inside the box.

Set the height of the map to 650. The reason I set the height to 650 and the width to 990 because Nebraska is longer than is it tall, so setting a greater width ensures that Nebraska fits nicely inside the box.

Allow 65 units of white space around the actual Nebraska drawing. This is a good amount because there is not an awkward amount of space around Nebraska, and the state is not touching the borders.

To position the legend to not be covered by the map I had to change the translate values to be higher in the x so it would be more to the right of the map and lower in the y to move it above the Nebraska map. Everything following the svg.append("g") creates the hover over effect to include the county name, the median age, and the percentage under 5.