This point shape file includes both the geographical positioning of points and data attributes that came from a census data file. Because of this, you do not necessarily have to bring in outside data from a .csv file. You need to preprocess the point shape file beforehand to join the data. You can do this using QGIS, where you drop both the csv file and the point shape file, right click on the geoJSON point shape file and select the matching attributes to join the data on.

Create colors by adding in the predefined names from observable or using programming color format such as RBG or hex code. 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. To map the fill color to the polygons on a map like this you would paste your color code in the line: .attr("fill", "<color code>") below the line: .datum(topojson.feature(basepolygons, basepolygons.objects.<shapefile_name>))

To choose the styling of the point symbol outlines you will use the following lines of code: .attr("fill", "<color code>") .attr("fill-opacity", <number 0-1>) .attr("stroke", "<color code>") .attr("stroke-width", <width number (1 is good to start with and then adjust)>)

To choose a shape for the point data you can modify the line of code directly beneath the outline styling seen here: .selectAll("circle") You would replace the word circle with a different term for a different shape.

The following lines of code allows you to map, or link, the values of a selected attribute of your points to the symbol you create on your map and to adjust the size of the symbol accordingly: .data(points.features .map(d => (d.value = data.get(d.properties.<attribute_name>), d)) .sort((a, b) => b.value - a.value)) .join("circle") .attr("transform", d => `translate(${path_points.centroid(d)})`) .attr("r", d => radius(data.get(d.properties.<attribute_name>)))

This mapping works if you have a line of code in your notebook that maps maps attributes from the data to create a dictionary-like key:value structure. The line should look like: data = Object.assign(new Map(csv_data), {title: ["name of value"]}) The attribute name that you place in the above code will be the key and will like be an ID attribute.

You can create a legend with the following code: const legend = svg.append("g") .attr("fill", "<color code for text>") .attr("transform", "translate(<x coordinate on canvas, y coordinate on canvas>)") .attr("text-anchor", "middle") .style("font", "<number of pixels>px <font name>") .selectAll("g") .data([<min,max values>]) .join("g"); legend.append("circle") .attr("fill", "<color code>") .attr("stroke", "<color code>") .attr("cy", d => -radius(d)) .attr("r", <color code>); legend.append("text") .attr("y", d => -2 * radius(d)) .attr("dy", "1.3em") .text(format); To create a hover-over tooltip use the following line of code: .text(d => " <name of value> " + data.get(d.properties.<key value from mapped data (likely ID)>));

Use this line of code to import the base map polygons.