* How do you join the geometries that come with the topojson file with the attributes that come with a csv file?

First, load data into observable with csv_data = d3.csvParse(await FileAttachment("Your_File.csv").text(), ({FIPS, CombinedRate}) => [+FIPS, +CombinedRate]) Next, assign the csv_data to the variable "data" with the command: data = Object.assign(new Map(csv_data)) Then, when drawing the map projection to the notebook, use the command: svg.append("g"), and map the values of the csv to the topojson file with the commands: .data(topojson.feature(polygons, polygons.objects.allstates).features) and .attr("fill", d => color(data.get(+d.properties[idAttribute]))) where idAttribute is a matching field in the csv and topojson. Here, the d.value is the end output, where you take the idAttribute from topojson and csv, get the properties of the data, and the values from the data properties.

* Which colors are used for bivariate mapping on Observable? Explain how to add a new bivariate color scheme.

Sequential, 3 class color schemes are used for bivariate mapping in observable. Select two, 3 class color schemes that are complimentary to each other. The bivariate color scheme is set up as a 3x3 matrix, like the following example:

name: "RdBu",

colors: [

Name is simply the name assigned to the bivariate color scheme, and colors contains the 3x3 matrix. The matrix is constructed by rotating your first 3-class sequential color scheme 90 degrees and overlaying the second color scheme overtop. Within the matrix, the first column corresponds to the sequential 3-class color scheme for your first variable.

* How do you create a legend? How do you position the legend so it is not hidden behind the map?

The legend is created with the legend command. The font is determined with the <g font-family=sans-serif font-size=10> command. Fill=$colors[j * n + 1] pulls in colors previously determined by the colors matrix.

To position the legend to avoid overlaying the map projection overtop, you will need to select the correct coordinates for the legend in the "viewBox" space. The following command determines the position of the legend on the map space: svg.append(legend).attr("transform", "translate(640,550)"); Here, the translate argument is how to alter legend position. The first value refers to the x, or horizontal position, and the second value refers to the y, or vertical position.

* How do the values get displayed when you hover over each polygon?

Display values upon hover with the following command: .append("title").text(d => (d.properties[idAttribute, format(data.get(d.properties[idAttribute]))]). Here, the .text command is essential to a hover displaying of data values found with the idAttribute variable.