// Cheat Sheet
//-----------------
//Data Prep
//Download new census variable source tables from IPUMS NHGIS.
//* Select source tables:
// * Table Name: Median Age by Sex, Universe: Total population, Classifications: Sex (2), Year - Dataset: 2020_DHCa, Breakdowns: Spatial
// * Table Name: Occupancy Status, Universe: Housing units, Classifications: Occupancy Status/Vacancy Status/Tenure (2), Year - Dataset: 2020_DHCa, Breakdowns: Spatial
//* Click ‘continue’ in data cart → ‘continue’ again → for ‘table file structure’ select ‘Comma delimited’ → ‘submit’ → download table → extract zip file into assignment folder in network drive
//Prepare CSV data.
//* Rename CSV and codebook to be more descriptive of the data (nhgis0014_ds258_2020_county & nhgis0014_ds258_2020_county_codebook → age_vs_occ_UScounties2020 & age_vs_occ_UScounties2020_codebook).
//* Clean up CSV data using excel and the codebook.
//* Delete empty columns.
//* Rename median age attribute from 'U8R001' to 'MED_AGE'
//* Rename total housing units attribute from 'U9X001' to 'TOTLHOUS'
//* Rename occupied housing units attribute from 'U9X002' to 'OCCHOUS'
//Go to Observable Notebook for Assignment 3 and download the topoJSON file to Assignment 5 folder in network drive because it is already prepared for use in Observable and the geographic level and extent used is the same (county level, United States), and copy it to Assignment 5 folder in the network drive (US_county_2020_WGS topoJSON file). This was downloaded from NHGIS, reprojected to WGS1984 (to be compatible with Observable) in ArcGISPro, and then using mapshaper, it was simplified and exported as a topoJSON.
//Drag and drop US_count_2020_WGS.json and age_vs_occ_UScounties2020.csv from Assignment 5 folder to file attachments in this notebook.
//Create a Bivariate Choropleth Map; comparing percentage of occupied households in US counties with the median age
//Replace the Chicago tracts topoJSON with US_county_2020_WGS topoJSON in the 'polygons =' line of code and the 'chart =' line of code to display the correct basemap.
//* To read the correct CSV file, change this line of code:
// * "data = Object.assign(new Map(d3.csvParse(await FileAttachment("chicago_tracts_2010_cleaned.csv").text(), ({FIPS, AVE_HH_SZ, RENTER_OCC, POP2010}) => [FIPS, [+AVE_HH_SZ, 100*+RENTER_OCC/+POP2010]])), {title: ["Avg Household", " % Renter Occupied"]})"
// * TO
// * "data = Object.assign(new Map(d3.csvParse(await FileAttachment("age_vs_occ_UScounties2020.csv").text(), ({GISJOIN, MED_AGE, OCCHOUS, TOTLHOUS}) => [GISJOIN, [+MED_AGE, 100*+OCCHOUS/+TOTLHOUS]])), {title: ["Median Age", " % Occupied Housing Units"]})"
// * Replace Chicago tracts CSV with age_vs_occ_UScounties2020.csv to read the correct CSV
// * List attributes to parse out of CSV
// * Change FIPS to GISJOIN to be the join code between the CSV and topoJSON.
// * MED_AGE is the median age of each county.
// * OCCHOUS is the number of occupied households in each US county.
// * TOTLHOUS is the total number of households in each US county.
// * To make the array relating GISJOIN to the variables being mapped, MED_AGE has a + sign as it is numerical data and occupied housing units is normalized by dividing it by total housing units and multiplying by 100 to make it a percentage.
// * Title the variables for the legend - "Median Age" and " % Occupied Housing Units"
//* Set 'idAttribute =' to GISJOIN as this is the attribute that ties the map and the dataset together. Using 'idAttribute' in the 'chart =' set of code adds the titles to the legend.
//* Use projectionwizard.org to decide the proper map projection for the area being mapped.
//For this map, Albers equal area conic is the proper projection for this map. So the projection should be = d3.geoAlbersUsa. This specific function also brings Hawaii and Alaska into the map frame.
//* To change the projection, change this line of code:
// * projection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], polygon_features);
// * To
// * projection = d3.geoAlbersUsa().fitExtent([[margin, margin], [width - margin, height - margin]], polygon_features);
// * Also, create a margin variable for projection fit equation - 'margin = 50'
//* To move the legend, so it is not hidden behind the map, edit the 'chart =' line of code that controls the map and legend display. To do this, reduce the second value in "translate(__,__)" to move the legend up, so it is not behind the map.
//Hover Over
//* When you mouse over the counties on the map, the value for each of the variables pops up. Often (high) or (low) will also pop up relating to the class the data point is in.
//* This happens because of the code in the 'chart =' section that pairs the attribute IDs, with their corresponding data and dataset titles, to the map as well as labels describing the data classes (high or low).
// *'idAttribute' is the connection between the map and the data with their variable titles.
// * 'data' is from the 'data =' line of code below. It is where variables are parsed out of the data set, a new normalized variable is made, and where the variable datasets are given names.
// *'format' pulls from the 'format =' line of code down below. It is an if-return code that pairs the two different data classes with their descriptions given (high or low) in the 'labels =' array.
//Bivariate Color Mapping
// * For my map, I used the BuPu color scheme that uses two unipolar, single-hue color schemes of turquoise (blue) and magenta (purple).
// * Using unipolar, single-hue color schemes for bivariate maps is best practice for the viewer to understand spatial patterns without having to completely rely on the legend.
// * You should not just use any two color hues when making a bivariate map. According to, https://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ , you should pick two complimentary colors (meaning a very different color, such as one on the opposite side of the color wheel, ex.: red and green) but then slightly change one of the hues, to be more colorblind-friendly. So, instead of red and green complimentary colors, do red and blue, which are still very different, but readable for people who are red-green colorblind.
// * The lowest class for each dataset, should have a low value shade of the hue (basically white), so polygons that have low values for each dataset also appear as having a low value (very light grey).
// * The highest class for each dataset, should have a high value shade of the hue, so polygons that have high values for each dataset appear as the darkest color.
// * Even though there are 3 classes in each of the unipolar data sets, you need 9 total hex codes to make the bivariate color scheme. (It is 3x3 not 3+3)
// * Coding a bivariate scheme:
// * In the 'schemes =' line of code, names for four different color schemes are assigned, and 9 hexcodes for the colors are assigned to each scheme.
// * Ex.: {
// name: "BuPu",
// colors: [
// "#e8e8e8", "#ace4e4", "#5ac8c8",
// "#dfb0d6", "#a5add3", "#5698b9",
// "#be64ac", "#8c62aa", "#3b4994"
// ]
// }, ---> "BuPu" is the name given to the turquoise and magenta color scheme that I used. By selecting this name in the color scheme dropdown on the map, the 9 hexcodes listed in the 'colors' brackets are displayed in the legend.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
