${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`}

2b:null 2c:["$","title",null,{"children":"# Bivariate Choropleth Mapping | GeoVis | Observable"}] 31:T6fa,In this bivariate choropleth map, I compared "% age 65 and over, and % age 18 and under" across Wisconsin counties. The 2 variables I chose represent opposing sides on the age structure, which allowed me to determine which counties are primarily dominated by older communities, and which counties are primarily dominated by younger communities. Looking at the spatial patterns, areas where there was a high percentage of age 65+, and a lower percentage of under 18-year-olds, were represented by dark purple (upper left of the legend). These counties appeared to be primarily located in the northern and more rural Wisconsin counties, which could be correlated to aging populations, the outmigration of younger adults, and more limited birth rates. Teal colored counties (lower right of legend) represented a low percentage of age 65+, and a high percentage of 18 and under. These counties were located more near urban areas where younger families are usually more common (such as Madison, Milwaukee, etc.). High-High relationships for both categories were shown in dark blue (upper right) and tended to be located in substantially fewer counties than the other categories. It appeared to be pretty unlikely for a county to have both a large old and young population simultaneously. A low-low relationship was shown in light gray (lower left), reflecting a more balanced age structure demographic, and these appeared in more central Wisconsin counties. Overall, I can see a fairly clear geographic divide in the age structure, where Northern Wisconsin appears to have older communities, and Southern/urban areas of Wisconsin have younger families. I also want to note that these variables are negatively correlated, so counties with higher elderly populations will have fewer children. 32:T46d,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; } 33:T40d,1. Data Sources: Polygon boundaries were from Wisconsin county boundaries (Tiger-shapefiles) that I converted into a TopoJSON using Mapshaper. 2. Attributes (csv): American Community Survey (ACS) 2025 5-year estimates, table S0101: Age & Sex, downloaded from data.census.gov 3. Geographic coverage: All 75 Wisconsin counties 4. Geographic Resolution: County-level polygons 5. Time period: ACS 2023 5-year estimates show 2019-2023 aggregated survey data collected. 6. Preprocessing steps include simplifying and exporting the original Wisconsin county shapefile into a TopoJSON, cleaning the ACS S0101 CSV by normalizing the variables, and joining the CSV to the TopoJSON using a shared GEOID field. 7. Uncertainty and Bias: ACS data are survey estimates so there is the potential for sampling error. Rural counties with small populations could have less data/more MOE's, age structure is changing and can be relevant to seasonal populations/retirement communities, and the TopoJSON I created can sometimes alter boundary shapes. 34:[{"id":"9d26440227786e6184147394fe98b89f52a88a0cc9d84985e2d9bcb5f165eb1cd174a66194371bd6b34f27c1638245a748f43abb69800d5648fe64f3b5e85730","href":"https://static.observableusercontent.com/files/9d26440227786e6184147394fe98b89f52a88a0cc9d84985e2d9bcb5f165eb1cd174a66194371bd6b34f27c1638245a748f43abb69800d5648fe64f3b5e85730","name":"wi_counties_topojson@1.json","type":"application/json","lastModified":1775674925914.486,"size":513948},{"id":"fe066d13bb84253bfe1183f7a314ca6681712208e17873092302c80a5edaed8028ab5110e7b3f136dbe5956a922d311e3c5a228aae0771ca9b358e550a2aa4f0","href":"https://static.observableusercontent.com/files/fe066d13bb84253bfe1183f7a314ca6681712208e17873092302c80a5edaed8028ab5110e7b3f136dbe5956a922d311e3c5a228aae0771ca9b358e550a2aa4f0","name":"wi_counties_census_data.csv","type":"text/csv","lastModified":1776212127430.227,"size":249966}] 2f:{"id":"c1c45e7faea56eef","slug":null,"title":"# Bivariate Choropleth Mapping","thumbnail":"bee6ff1a753cdf664441c9ca2a7c202fc16829da01680187d75a04b3689456c6","access_level":"public","create_time":"$D2026-04-08T18:36:44.146Z","update_time":"$D2026-04-08T23:03:13.662Z","view_time":null,"first_public_time":"$D2026-04-08T23:03:57.108Z","has_unpublished_edits":null,"fork":{"id":"82e837ede6986ccb","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"01fc5444d5eea4e7","login":"geoviz2026","name":"geoviz2026"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6e14b369ed3a1b12","login":"geovis6","name":"GeoVis","avatar_url":"https://avatars-next.observableusercontent.com/4817409065f2ea8ca81af1ff5253f0438a2bb87df1c32738f470ac74234ce48e","tier":"starter_2024"},"version":566,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0623bdc85a1de511","login":"lillie-carreon","name":"Lillie carreon","avatar_url":"https://avatars-next.observableusercontent.com/0d72c17b1a783edd57cb9dcedce32c34f90dfe28ebdfbde92e086cf5df43178c","tier":null}],"members":[{"type":"individual","id":"0623bdc85a1de511","login":"lillie-carreon","name":"Lillie carreon","avatar_url":"https://avatars-next.observableusercontent.com/0d72c17b1a783edd57cb9dcedce32c34f90dfe28ebdfbde92e086cf5df43178c","tier":null,"role":"editor"},{"type":"team","id":"6e14b369ed3a1b12","login":"geovis6","name":"GeoVis","avatar_url":"https://avatars-next.observableusercontent.com/4817409065f2ea8ca81af1ff5253f0438a2bb87df1c32738f470ac74234ce48e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"# Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# # Bivariate Choropleth Mapping\nPercent Age 65+ & Percent Under 18 by Wisconsin County (ACS 2023 5‑Year)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof colors = {\n const form = html`

color scheme`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(polygon_features.features)\n .join(\"path\")\n .attr(\"fill\", d => {\n const v = data.get(d.properties[idAttribute]);\n return v ? color(v) : \"#ccc\";\n })\n .attr(\"stroke\", \"#fff\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => {\n const v = data.get(d.properties[idAttribute]);\n return v\n ? `${d.properties.NAME}\\n${data.title[0]}: ${v[0]}%\\n${data.title[1]}: ${v[1]}%`\n : `${d.properties.NAME}\\nNo data`;\n });\n\n svg.append(legend)\n .attr(\"transform\", \"translate(600, 100)\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`## Interpretation`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"schemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"Q2. Bivariate maps need a 3x3 color grid of nine colors. This is because bivariate maps use 2 color axes where one variable increases left to right, and the other increases bottom to top. In this case, the palette was designed so that light gray = low-low, teal = low-high, purple = high-low, and dark blue = high-high. Using these colors allows the map viewer to decode each classification/variable much more quickly and efficiently, without confusion between the other variables. \n\nQ3. In order to construct a bivariate color scheme, it is important to satisfy 3 principles: 2 independent color axes, a 3x3 grid of combinations, and perceptual logic. By following these steps, it allows for each variable to reflect its own color progressions, for each variable to be classified into 3 quartile bins (low, medium, high), and finally for the colors to be arranged in a way that moves horizontally, showing 1 variable, vertically, showing another variable, and diagonally increasing both variables. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"projection = d3.geoMercator()\n .fitExtent([[10, 10], [width, height]], polygon_features)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.WI_CensusTL_Counties_2019)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(\n new Map(\n d3.csvParse(\n await FileAttachment(\"wi_counties_census_data.csv\").text(),\n d => [\n d.GEO_ID.slice(-5), // last 5 digits = county FIPS\n [\n +d.S0101_C01_032E, // percent 65+ (variable 1)\n +d.S0101_C01_030E // percent under 18 (variable 2)\n ]\n ]\n )\n ),\n { title: [\"% Age 65+\", \"% Under 18\"] }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"Q1. In order to join geometries from a TopoJSON file with attributes from a CSV file I had to find a shared identifier, in this case the \"GEOID\" field. The join is then carried out by storing the csv values in a map and then being able to access them to create the map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"wi_counties_topojson@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"Q4. A bivariate legend is created by mirroring the 3x3 grid used for identifying the colors you want to use. So in order to build it, I had to follow the process of creating my 3x3 grid of SVG squares, for each square I corresponded it to a color from the palette, I had to label the x-axis with the first variable (% over 65) and label the y-axis with the 2nd variable (% under 18), and then I needed to arrange the labels so that someone reading my map could easily interpret which direction corresponds to low to high values. \n\nQ5. In order to position t the legend so that it is not hidden behind the map, the legend needs to be created after the map. In this case, I applied a translation to move it into open space where it now is in the upper corner and doesn't overlap with any of my counties. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${formatNum(a)} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"Q6. Values are displayed when hovering over each polygon by each county path receiving a title element. This allows for me to hover over the county and see a name, and percent age 65+, as well as % age 18 and under. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`## Metadata`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"