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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | ecooperohm | Observable"}] 31:T40b,## Moving the Legend To ensure the legend isn't hidden behind the map I changed the position using: svg.append(legend) .attr("transform", "translate(250,300)"); This changes the position of the legend on the map, but you can play around and change the numbers to get the exact placement you want on your own map! ## How Values are Displayed when Hovered Over When the user hovers over a county polygon, the map displays the underlying attribute values using the SVG title element that is appended to each path. In the code above you can see that every polygon is drawn with .append("title"), and the text inside that title is constructed from the county's identified and its two bivariate values. This means that when the cursor pauses over a county, the browser automatically shows a native tooltip containing the county’s GEOID and the formatted pair of values (e.g., “% Under 18, % Hispanic”). Because the tooltip is generated from the joined data map, it reflects the exact values used to color the polygon.32:T90d,# **Interpretation** The percentage of residents under 18 varies across Virginia, with higher youth shares appearing in certain rural counties and in fast-growing suburban regions like in the dark blue cluster we see in the North. The Hispanic population is much more geographically concentrated, with the largest percentages in Northern Virginia, and a few metropolitan pockets in central and eastern Virginia. Most rural counties in the west and south remain pretty non-Hispanic. ## Where the Variables Overlap The dark blue counties show where there are both high percentages of people under 18, and high percentages of Hispanic people. These counties appear primarily in Northern Virginia. They represent areas with rapid population growth, substantial Hispanic communities, and younger family structures. There are very high rates of immigration to Virginia, so these clusters could reflect immigration-driven demographic change and higher birth rates among younger households. Many of the Southwestern counties fall into the low-low category. These counties have aging populations and very small Hispanic communities, consistent with long-term population decline and limited in-migration. High youth percentages and low Hispanic percentages show a young but not diverse areas, reflecting local birth patterns rather than immigration-driven growth. Low youth percentages and high Hispanic percentages suggest that Hispanic population growth is occurring within older or more established communities. ## Geographic Relationship Between the Variables The map reveals that youthfulness and Hispanic population share are not uniformly correlated across Virginia. Instead, their relationship is regionally specific: - In Northern Virginia, the two variables rise together, producing the high–high cluster. - In rural western and southern counties, youthfulness does not coincide with Hispanic growth, producing high‑youth but low‑Hispanic patterns. - In some suburban areas, Hispanic growth occurs without a corresponding increase in youth, creating low‑youth but high‑Hispanic contrasts. Overall, the map shows that Hispanic population growth is geographically concentrated, while youthfulness is more broadly distributed, creating a patchwork of demographic combinations across the state. 33:T637,## Choosing a Color Scheme Above, we see Joshua Stevens' 3x3 bivariate color schemes, each containing nine colors arranged in a low-medium-high matrix. You can see each color in the hex codes shown. The color scheme is selected interactively using the viewof colors dropdown, which updates the colors array with the nine hex values from the chosen Joshua Stevens palette. These colors are then passed into the color() function to assign the correct bivariate fill to each county. ## How to Construct a Bivariate color scheme First you choose what scheme you want from low-medium-high matrix you've constructed out of hex codes. Then you can insert this code: ```js svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.VA_BasemapWGS84).features) .join("path") .attr("fill", d => color(data.get(d.properties[idAttribute]))) .attr("d", path) ``` Where color looks up the correct cell in 3x3 matric and the polygon is filled with the corresponding hex color. ## Classification Method Both variables (% Under 18 and % Hispanic) were classified into three categories (low, medium, high) using quantiles. Quantile classification ensures that each class contains approximately the same number of counties, which produces a balanced 3×3 bivariate grid. These class breaks are then used by the color() function to determine which of the nine bivariate colors each county receives. You can do this by adding: x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n)) As seen in code below, do this with both the X & Y variable. 34: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]} `; } 35:T408,# Metadata ### Virginia Basemap - Data source: NHGIS - Geographic Coverage and Resolution: Transformed into WGS1984 - Resolution: County-level - Time Period Covered: 2020 - I transformed the shapefile to TopoJSON using mapshaper.com then uploaded it directly to observable. ### Population Characteristics - Source: U.S. Census Bureau. American Community Survey 5-Year Estimates. - Geographic Coverage and Resolution: Virginia - Time Period Covered: 2019-2023 - Resolution: County-level - The CSV already contained normalized variables (% Under 18 and % Hispanic), so preprocessing was limited to renaming fields, checking for missing values, and ensuring the GEOID field matched the TopoJSON identifiers - Uncertainty: ACS 5‑year estimates include sampling error, especially in small or rural counties. Some counties may have higher margins of error for Hispanic population estimates due to small sample sizes. Additionally, classification into quantiles may exaggerate differences between counties with very similar values. 36:[{"id":"70041fe655f2c7087659427d7080abdf7bf73c0d6f533654012616cb2abf0dfdd23c3899a1d3de6e44677c569707e5baaf38f923bc5306821da0aa2981707d5f","href":"https://static.observableusercontent.com/files/70041fe655f2c7087659427d7080abdf7bf73c0d6f533654012616cb2abf0dfdd23c3899a1d3de6e44677c569707e5baaf38f923bc5306821da0aa2981707d5f","name":"VA_BasemapWGS84 (2).json","type":"application/json","lastModified":1777920705773.095,"size":178684},{"id":"e0119d547b003594526477f51f2e817a1e573851669ad24509d9fe34cc6c17b75feec110aece8c02ee5c68fc33132c5949c85f4800438a04fad39533d50e24de","href":"https://static.observableusercontent.com/files/e0119d547b003594526477f51f2e817a1e573851669ad24509d9fe34cc6c17b75feec110aece8c02ee5c68fc33132c5949c85f4800438a04fad39533d50e24de","name":"VirginiaWorkingCVS (1).csv","type":"text/csv","lastModified":1777951305023.989,"size":23646}] 2f:{"id":"70fe492ffe9baaf1","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-05-04T18:44:35.691Z","update_time":"$D2026-05-06T02:27:51.452Z","view_time":null,"first_public_time":"$D2026-05-06T18:53:59.728Z","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":"1176304753e7a7dd","login":"ecooperohm","name":"ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/f7b82c7f667fcbcc238d0984c5e6f8f983c2fbfe2bb51a6e28f84025055886fe","tier":"starter_2024"},"version":620,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"24ddb38576d505bb","login":"ecooperohm","name":"Ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/621900530db91e2c1d81ee1fea07a3118cbb6833cd659c9bd8ec8a64b31dbbf7","tier":null}],"members":[{"type":"team","id":"1176304753e7a7dd","login":"ecooperohm","name":"ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/f7b82c7f667fcbcc238d0984c5e6f8f983c2fbfe2bb51a6e28f84025055886fe","tier":"starter_2024","role":"editor"},{"type":"individual","id":"24ddb38576d505bb","login":"ecooperohm","name":"Ecooperohm","avatar_url":"https://avatars-next.observableusercontent.com/621900530db91e2c1d81ee1fea07a3118cbb6833cd659c9bd8ec8a64b31dbbf7","tier":null,"role":"editor"}],"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\n\n## Percent of Population Under 18 & % of Hispanic population in Virginia.`","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(250,300)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.VA_BasemapWGS84).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\nschemes = [\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":582,"value":"$33","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":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([87,0]).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.VA_BasemapWGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"d3.csvParse(await FileAttachment(\"VirginiaWorkingCVS (1).csv\").text())[0]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"VirginiaWorkingCVS (1).csv\").text(), ({GEO_ID, Under_18, Hispanic}) => [GEO_ID, [+Under_18, +Hispanic]])), {title: [\" % Under 18\", \"% Hispanic\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"**Joining Geometries from a GeoJSON file with attributes from a CSV File**\n\nTo Start I loaded the TopoJSON and CSV files into observable. We are using two variables: \"Percent Under 18\" & \"Percent Hispanic\". The first measures the share of the population under 18. The second measures the share of the population identifying as Hispanic or Latino. To join the polygon geometries (from the GeoJSON file) with attribute data (from the CSV file), I used the shared key field called \"GEO_ID\". You load the CSV, create a Map keyed by GEOID, then attach the matching values to each polygon using the code above. ","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(\"VA_BasemapWGS84 (2).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":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":589,"value":"## How to Create a Bivariate Legend \n\nThe bivariate legend is created by drawing a 3×3 grid of colored squares that correspond to all combinations of the two variables’ low, medium, and high classes. In this notebook, the legend is generated with a custom SVG function that uses d3.cross to show the nine color cells and place each square in the correct position within the matrix. The legend code rotates the entire grid by –45 degrees using \"rotate\" so that the two axes align diagonally with the map’s interpretation scheme, and it adds arrow markers using \"arrow\" to indicate the direction of increasing values for each variable. Axis labels are drawn using \"text\" elements positioned along the rotated axes, and each square includes a \"title\" tag so users can hover to see which combination of the two variables it represents. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":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":563,"value":"$35","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"