1) This line contains the code that ultimately completes the join between the TopJSON and the CSV file. The line reading ".data(counties.features)" pulls the geometries from the TopJSON and the CSV data into the map. The actual join between the two files occurs in the last 4 lines, beginning with the line ".attr("fill", d => color(data.get(+d.properties.CNTY_FIPS)))" and ending with the line: ".text(d => " HSGradPct: " + data.get(+d.properties.CNTY_FIPS));" The join occurs from the use of the "color" cell and the "data" cell. The "color" cell contained the classified CSV data, as well as the color hues that ultimately would be used to display the map. These data are combined with CNTY_FIPS, a field present in both datasets that were identical- a compatible join to display all the information within this choropleth.

3) Polygon border style- stroke width/ color- are determined right underneath the "join("path")" line. They are both simply attribute commands. An attribute command is created that makes the stroke gray. Another attribute command is created that makes the stroke-width equal to 1.

4) The legend was created simply by adding a "legend" command above. The color of the legend was linked with the "color" cell, the title was linked to the "data" cell where a title for the map was created, and then the width and tick format for the appearance of the legend were also part of this command.

5) The appearance of the data values when hovering over a polygon is yet another extension of this broader command. It is a part of the last 5 lines here- specifically the one beginning with ".text". This line insinuates text to appear on the polygons that display the percent of HS attainment, and for each individual county's polygon. The quotes around HSGradPct signify that this will be the text shown, and then everything to the right of the + sign is to signify the actual normalized data. The "data" cell is drawn from, linking it to CTY_FIPS to show the normalized percentage of each polygon.

2) Colors were introduced firstly by creating a unique cell isolating the colors that would be used for this map. Because creating a choropleth map in ObservableHQ requires referring to the colors more than once, creating a cell to refer back to streamlines the workflow. In this workbook's case, the cell containing the color information is called "sequential_green". This cell contains different hues of green that were fetched from colorbrewer.org. Once this cell was created, it was utilized in the cell below that created the quantile classification of the CSV data, called "quantile". This is what sorted the data into 5 same-size groups, because 5 hues of green were introduced in the range section of the d3 command for quantile classification. The domain section of the command signified the quantile command to rank the high school graduation data from the CSV. To fill the polygon data with these colors and this classification technique, we must refer to the commands that create the map. We will skip over the foundations of this command towards the end, where we see: " svg.append("g") .selectAll("path") .data(counties.features) .join("path") .attr("stroke", "gray") .attr("stroke-linejoin", "round") .attr("stroke-width", 1) // .attr("fill", function(d){ // console.log(color(data.get(d.properties.FIPS)[0])) // return color(data.get(d.properties.FIPS)[0]); // }) .attr("fill", d => color(data.get(+d.properties.CNTY_FIPS))) .attr("d", path) .append("title") .text(d => " HSGradPct: " + data.get(+d.properties.CNTY_FIPS));" In the sections beginning with ".attr", the color cell gets linked with the "data" (the csv data) and "+d.properties.CNTY_FIPS". It is within this exact line that we see the values from the map getting linked with both the colors and the spatial join. This command plays of the skeleton of the choropleth created earlier in the command to fill the attributes of the map with the combined "color", "data" and join cells.

6) SVG stands for Scalable Vector Graphics. SVGs are an XML based file format for vectors. These are different than simple jpgs/ pngs as they are defined by mathematical instructions- not pixels. I comprehend them as images that are stored that are not rasters and then can be edited on the fly in different software, including Observable, Arc, etc. SVG can be used in visualization to render vector maps and different plots like bar, line, and scatter plots.