How do you join geometries from a Topo JSON file with attributes from a CSV file?
To do this, I first recommend recreating your data from NHGIS. This may save you headaches. After you retrieve your data, go to the QGIS software and start a new project. Add in the extracted data shapefile and clip the information to just Washington (or your tested area). After this, change the projection symbol and save your project. Then, in MapShaper, add the correct files to MapShaper and transform this map into a TopoJSON. Add this TopoJSON to the observable and add it in file attachment area.
Now you have an accurate TopoJSON and you have your csv data. Look at the variables that match in each dataset by clicking down on Counties - object, then click features - Array. Then, Object - Features.
Now you can see the different properties to choose from. I chose GISJOIN.
Now to connect them go down to the csv data area (where this comment is attached) and add your variables and your testing area.
Note: For GIS JOIN you will need to delete the (+) signs next to them and you will need to edit the choropleth map code to match.
What is an SVG?
- A SVG stands for Scalable Vector Graphics. It is described as a "Canvas", meaning it is markup language for graphics. It helps with forming and fixing the features present in a graphic, in this case, a choropleth map. It makes the graphics interactive.
How do you use it in visualization?
- You use it to better the visual aspect of your graphics, making a notebook that is organized and clean. For example, I changed the location of my legend in regard to my graphic. This is because of the location of Washington and the angle it is projected in. Due to this, I wanted a more visible legend, so I moved it to the right.
How did I move my Legend?
- I moved my legend through the "translate(450,0)" feature in the SVG legend transform. I changed the X coordinate system of my legend to 450 to make this feature more readable.
How do I create a legend?
- The code for creating a legend was already present since I forked this assignment. However, I made adjustments to the legend that I will break up and reference throughout the notebook.
--> How did I make the title?
- The title of this legend is located earlier in "data = Object.assign". In this line of code, I added a concise title relating to the name of the tested feature.
--> How did I change the color?
- The color of the legend follows the colors of the map. I used a single-hue scale of four classes that I found on ColorBrewer. This allowed me to find an appropriate color scheme that is accessible (not red-green). However, this legend could benefit from a "nondata" section as well, as this may aid mapviewers who do not understand the black areas.
--> How did I change the location of my Legend?
- The location of my legend was changed along the x axis to improve visibility. This can be found in ".attr("transform", "translate(450,0)").
--> How do I change the decimal place of my legend?
- I change the decimal place to 2 decimals since this testing area is so small. I did this in "tickFormat: ".2f" by changing the number 2 to my desired decimal placement.
Those are the changes I made to my legend to improve it and match the data topic better.
How did I determine Polygon border style?
- For this lab I determined the forked polygon size and color was appropriate for my tested variable. I determined this through looking at my dataset and testing different combinations of color and size.
--> Why are white and black the most appropriate?
- These are the most appropriate colors for marking the differences between polygons because they are not distracting, they are bold (easily noticed), and they are not apart of color schemes (generally).
--> How did I determine color?
- For this lab, I think white is the best color since my dataset is composed of darker blue colors. A black would have blended into the dataset, especially with my no data variable present. However, on different applications, I would consider changing my polygon color due to the background also being white, which could cause confusion. Change polygon color lines here: .attr("stroke", "white").
--> How do I determine polygon size?
- I chose 1 as the width, I felt this was appropriate in comparison to the size of my testing region. To determine this, I suggest looking at the map and testing different sizes to find an appropriate size taking into account people with sight issues. Change this variable here: .attr("stroke", "white").
->How are values mapped to polygon fill Colors?
- SVG, being the canvas, links the YLGnBu (now the color attribute) to the map, adding the colors to a variable and making them polygon fill color. This is linked through this: .attr("fill", d => color(data.get(d.properties.GISJOIN)))
How do you create and apply colors in Observable? How are values mapped to polygon fill colors?
--> How did I find my colors and choose my scheme?
- To add color to your map, first you have to go to ColorBrewer to choose an appropriate color scheme.
https://colorbrewer2.org/#type=sequential&scheme=Blues&n=4
Above is a link to my color scheme I chose.
I chose 4 classes to match my classification scale, and I chose a single hue color scheme because I felt this color scheme matched my data and was not distracting. This is colorblind safe and is a solid color for each polygon.
--> How did I apply colors?
- I applied color in this map through the line of code this comment is attached to. I added each code for each color in. These colors are linked into my notebook through YLGnBu. So anytime YLGnBu is featured, this is the colors I have chosen being linked.
-->How are values mapped to polygon fill Colors?
- This feature is later in this map in the SVG area. SVG, being the canvas, links the YLGnBu to the map, adding the colors to a variable and making them polygon fill color. There are multiple color features in this notebook, so comments will be throughout the notebook explaining them.