Notice there is a nested list at the end of this code. This is for when you want to have more attributes with your map connected to your ID (FIPS) you can do that easily.
In order for the map to work. you need to make sure that the types of features match what the CSV has. In this case FIPS should be a string since that is what it is in the CSV. This makes sense since everything needs to match for the code to work later on. Especially when mapping like there is later in the notebook.
I will be using three classes and natural breaks for my classification, therefore I found 3 colors on the colowbrewer website and I chose a single hue of the color purple.
I am using natural breaks because there are a lot of numbers close together in this data and the natural breaks can help split these in a statistical manner rather than looking through it myself or making it all even. There is one outlier, but I included it because I think it is important to see, but at the same time I could see how it could be removed since it does not have a lot of data. For example, the county has 1 confirmed and 1 death. This data is from the beginning of the pandemic so it is obviously different now, but showing this from a data aspect can show how things can be skewed if you do not look at the data.
This code combines the polygons to the projection. Using whatever projection you use in the above cell. This is so the data that you have, can be show later on.
For the distribution of the data on the map, I would say that there are definitely clusters of some kind. It would be interesting to see if these counties with a higher death percentage have less hospitals, or if their median age is significantly higher than ones with low percentages. Comparing it to population density of PA, the southeast and the southwest are a lot higher than the rest of the state but it is interesting that there is a cluster on the northeast side as well. That would be something interesting to look at.
When joining the properties from the csv to the topojson, you need to have some sort of identifier. In this case my topojson and my csv both have FIPS codes. This connects the data I want to show on the map to the polygons that the map shows (counties). They need to be the same type of data too. For example they need to both be string, or a number.
One thing to remember, is remember the order of what you put on your canvas because somethings could be covered up.
SVG is used to drawing on a browser. It is used in observable as well. You can use it to make shapes, lines, or other visuals. You can change a lot of things about the shape like the width, height, stroke width, etc. It basically helps with making different styles on a browser. In this example, it helps create our polygons.
The next thing we make and add to the canvas, is the legend. You want to place the legend in second chunk of code. The numbers associated in the translate code, moves the legend around. Next is uses the color previously determined by the color variable that matches the map. You can change the title, and other formats in this "legend" part of the code. The title in this case, is from the variable title previously determined. The last part gives the decimal places.
To fill the colors, you want to make sure you have your features, all setup and names of variables setup to call the features from the data. Then you want to use the 'fill' part of the code to grab the data you want. It uses the dictionary created and references it to till in the color when you call the data.
You can use the stroke parts of the code to change the colors of the boundaries and other things. I chose black in this case for the county boundaries because it is distinct from the colors I use in the map. You can easily see where the boundaries are. The round part makes it more smooth and looks a little better, but if you want it to be a little more sharp you can change it. You can also make it dashes or other options. You want the stroke width to be a perfect size. If there are parts where it takes away a lot of space, but you still want to be able to see them.
The last part of this code makes it possible to see the data as you hover over the map. It takes the data, and then shows string or text as you hover to show a better way to see the data for a specific county. It does the same thing when calling the data, but instead of putting the color on the map, it takes it and makes it available while you hover.