In order to join geometries from a TopoJSON file with attributes from a CSV file, you first have to load both json and csv files into the observable notebook. Then, parse the csv data and convert it to a JavaScript. For the TopoJSON, you'll need to convert the file into a GeoJSON, so you can do that by using the topojson.feature function. You can then join the features and attributes by matching a common key. This will allows you to join the geometries and attributes together.
To create and apply colors in Observable, you can use the function d3.color. Then, using color brewer you can find an appropriate color scheme for you map that contains either single hue or multi hue. Copy the color numbers into observable making sure to include the hashtag. Select the number of colors to match your number of classes. The values are mapped to polygon fill colors by defining a color scale to link data attributes to your selected colors. Using the color function on observable, you can include your customized color.
You can determine polygon border style by using the function stroke to determine color, and strokewidth to input thickness. Adjusting color and thickness to highlight the differences in maps is important. You want data to be visible, while also being able to tell the boundaries between different areas of data. You also want to chose a color that won't totally blend in with your map, and clearly distinguish boundaries.
To create a legend, you can use the funciton title in your data. Then, typing the title in there, you can later include data.title in the cell that you are making the observable plot in, and it will take the title you placed in your data cell onto the map.
You can see values appearing when hovering over a polygon by using SVG. Using D3.create(svg), you can combine the data to attributes. This will take the data and put it into the polygon. Thus, when hovering over the polygon, it will show the data from that area.
SVG is an encoding format the describes 2-D vector graphical objects. It allows for interactive graphical elements, like being able to hover over polygons and show values. Using svg with certain functions on observable can help you scale and create a more precise graph. It allows for you to edit small things about your map, and represent certain data as text-based code.