How to join geometries that come from topoJSON file to attributes from CSV file: create a variable in a new line that is set to the following code: Object.assign(new Map(<csv data variable name>), {title: [“<title of calculated field>”]}).

Create colors by adding in the predefined names from observable or using programming color format such as RBG or hex code here. The number of colors should equal the number of classes being used for the map. Colors should be selected in a logical way so that information is conveyed accurately and easily and is accessible to those with vision impairments.

The following lines of color determine stroke color, style, and size: .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-width", 1.5) There are no hard and fast rules on what these should be set to - you should use your best judgement to produce a visualization that most clearly communicates the data. For some color schemes for example, a dark stroke color might highlight the data best. For this map, a dark color for the stroke contrasted heavily with the precincts that are smaller and have lighter fill colors, which made the variance between different precincts less noticeable. The following code creates a legend: svg.append("g") .attr("transform", "translate(275,10)") .append(() => legend({ color: jenks, title: data.title, width: 500, tickFormat: ".1f" }) ); The placement of the legend on the map "canvas" can be adjusted by changing the numbers that represent x,y coordinates in the second line of the code.

The following lines of code produce a hovering tooltip that displays data when the mouse cursor is above the polygon: .attr("fill", d => jenks(data.get(d.properties.,<attribute name>)[0])) .attr("d", path) .append("title") .text(d => "<attribute text display> " + data.get(d.properties.<attribute name>));

SVG Discussion: SVG stands for scalable vector graphic. This can be thought of as a canvas that the visualization is placed on. One of the distinct advantages of SVG's compared to other image formats is that it does not lose resolution quality when it is stretched or shrunk. This is because rather than a set placement of pixels, the image is produced through a mathematical formula so that the proportions of different portions of the image remain in tact. This is particularly important for something like a geographic visualization, where blurry details at higher levels of resolution could greatly distort the information being conveyed.

data from: https://www.prisonpolicy.org/origin/ny/police_precincts.html