I chose natural breaks in my data to present it most effectively. Natural breaks classify data based on breaks within the data by minimizing differences within classes and maximizing differences between classes. This helps to get rid of the breaks within my data where most values are classified in lower groups, but some have a relatively high percentage of area per county.
I chose 5 classes to break my data into, which allowed the data to be aggregated in a productive way, where counties that had relatively higher values were grouped into similar categories. If I had gone lower with my number of classes, there would be way too many observations grouped within the lowest class.
To join geometries from a TopoJSON file and a CSV file, you have to run a spatial join, which joins features from the TopoJSON with attributes from the CSV file to make one consistent map. To do this, you have to pick a feature from both file types that matches each other to overlay the files.
code:
topojson.feature converts the data to a geojson file to use for geometry data within the map
d3.csvParse is the function that pulls the attribute data from the CSV file to use for the resulting map
Using the array function splits up colors into the number of classes (5). To pick the colors, you have to look up color codes that are universal for all coding. The d3 function fetches these codes from the JavaScript library.
Once colors for the data classes are determined, as well as how the classes need to be split (natural breaks), you use scaleThreshold to assign colors to the classes. Domain is where the classes are coded, and range is how the color codes are split up. This maps the polygon fill colors
Once an SVG is created, you can append it to add other features to the existing map.
- SVG stands for scalable vector graphics, which is a type of file supported by JavaScript
- It allows for enhanced visualization by providing high-scale visuals that scale without losing resolution
- It is XML-based, which allows it to be easily manipulated within a script to create optimal graphics
create a legend:
-Use the append function to add a legend and assign values, including color, title, width, and tickformat
create polygon border:
-Use append function and select the counties.features data to append. Next, use .join to add attributes, including "stroke-width" which is assigned a value of 1 and "stroke" which is assigned the color "black"
- I chose black for the border color to contrast the white baselayer and the green shades assigned to polygon classes. The thickness was assigned 1, which allows readers to easily see where the polygons are and does not overfill the smaller polygons
How values appear when hovering over the map:
- using .text adds text when hovering over a location. The text added is labeled with quotes and pulls the value desired using data.get(d.properties.GEOID_Firs), where GEOID_Firs is the attribute that was assigned a value earlier in the code for this lab based on 100*+sqmiles_Su/+totsqmiles
- Using a + for .text adds additional text, named " County: " and assigns the original value from the CSV file using just d.properties.NAME_First