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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | workspace | Observable"}] 31:T411,### Interpretation The spatial distribution found on this map is dominated by the percentage of military service members. The variable is mostly found in higher population areas around the east side of the map, but it is present throughout, besides in the more rural areas. The household income is quite high around the outskirts of Norfolk(lower mid-right) and up near Williamsburg (northwest). Both variables are also quite high on the south and west of Norfolk. This is in contrast to the fact that it is military dominated near the center of the city, where income is lower. You have just a few places that military service members are low, while the income is high but that is only in random small pockets. It does not seem that there is much of a real relationship between the variables besides that higher incomes are almost always in areas with a high amount of military service members, but that is also due to the fact that eastern Virginia is filled with military service members, which has a very obvious presence in this map. 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:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1775944481568.106,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1775944481568.106,"size":1725175},{"id":"ecbdf96d8af2689405c18f8ad3a5ca5e849e47dcb427cfb1fe55601bcebde1c5573926007145be7934a4d3d03576a8637fff0ad96dcc16eb7b2147deb68c8df4","href":"https://static.observableusercontent.com/files/ecbdf96d8af2689405c18f8ad3a5ca5e849e47dcb427cfb1fe55601bcebde1c5573926007145be7934a4d3d03576a8637fff0ad96dcc16eb7b2147deb68c8df4","name":"nhgis0008_ds267_20235_tract@1.csv","type":"text/csv","lastModified":1775945189431.19,"size":626539},{"id":"3eff761940b18d9ff673300666065d37f41187050221ca6dc26f06a85936177989c7024aede297868ab5cb65b17904384acbb8da11bb2fce62e78763a787f468","href":"https://static.observableusercontent.com/files/3eff761940b18d9ff673300666065d37f41187050221ca6dc26f06a85936177989c7024aede297868ab5cb65b17904384acbb8da11bb2fce62e78763a787f468","name":"EasternVirginiaCleaned.json","type":"application/json","lastModified":1775945833624.008,"size":918277}] 2f:{"id":"2d4fb5b411eeeca6","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"a3e8e47109c26b94df36c9f33b91ec63b3a4df61460e0ffebaa16a4758a11f77","access_level":"public","create_time":"$D2026-04-11T21:54:41.568Z","update_time":"$D2026-04-12T02:31:12.425Z","view_time":null,"first_public_time":"$D2026-04-11T21:54:41.568Z","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":"24a4a66e0271a222","login":"workspace2398","name":"workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecc085eb50447fa74ff326f3a053ed0e07ac46e88a2f75b6af5d15ef7164d823","tier":"starter_2024"},"version":672,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba27e1e1d519ec0d","login":"matthewjschmalz","name":"Matthewjschmalz","avatar_url":"https://avatars-next.observableusercontent.com/fecaadafdfafddaf80f566c1a5d0e569c0b01cc6938e6b18a612f09abdc603de","tier":null}],"members":[{"type":"individual","id":"ba27e1e1d519ec0d","login":"matthewjschmalz","name":"Matthewjschmalz","avatar_url":"https://avatars-next.observableusercontent.com/fecaadafdfafddaf80f566c1a5d0e569c0b01cc6938e6b18a612f09abdc603de","tier":null,"role":"editor"},{"type":"team","id":"24a4a66e0271a222","login":"workspace2398","name":"workspace","avatar_url":"https://avatars-next.observableusercontent.com/ecc085eb50447fa74ff326f3a053ed0e07ac46e88a2f75b6af5d15ef7164d823","tier":"starter_2024","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\nMedian Household Income and % Military Service Members by Census Tracts of Eastern 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":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(\"viewBox\", [0, 0, width, height]);\n\n svg.append(legend) \n .attr(\"transform\", \"translate(500,210)\"); // this code right here can be used to position the legend. You can adjust the values found for translate in order to move it so it is not overlapping with the map itself.\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.EasternVirginiaCleaned).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\") // example of the code needed to make hovering over each symbol display values\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":650,"value":"Attribute values are displayed when hovering over polygons by using the code found above .append(\"title\") and the .text..etc. the .append adds a title to each symbol and the .text makes it so it shows what value is appearing when you hover.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"$31","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: \"GrRd\", // this is where you can paste the colors from your custom bivariate scheme.\n colors: [\n \"#e8e8e8\", \"#aae3a3\", \"#56db44\",\n \"#e8b0b0\", \"#aab0a3\", \"#56b044\",\n \"#e8696b\", \"#aa696b\", \"#566944\"]\n },\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":654,"value":"Which colors are used for bivariate mapping in Observable?\n\nExplain how to select or construct a bivariate color scheme\n\nColors used for bivariate mapping in observable is a 9 or more color palette that is derived from 2 separate colors, which are usually very contrasting. These can be made up of colors like Blue and Purple or Green and Blue. When selecting a bivariate color scheme it is important to make sure that the colors can be easily interpreted. You can construct a bivariate color scheme by using outside resources, one of them I found is on observable, https://observablehq.com/@angiehjort/bivariate-color-generator. You can generate it using this notebook, and then copying the code and pasting it into the code above.\"\"","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.EasternVirginiaCleaned)","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(\"nhgis0008_ds267_20235_tract@1.csv\").text(), ({GEOID, ASQPE001, ASSRM001, ASSRM006}) => [GEOID, [+ASQPE001, 100*+ASSRM006/+ASSRM001]])), {title: [\" Household Income\", \"% Military\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":" To join geometries from a TopoJSON file with attributes from a CSV, you need to use a common unique identifier that is found in both files. This may require you editing the CSV file in order for them to have a shared identifier. For mine I used GEOID.\n","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(\"EasternVirginiaCleaned.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 540","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 650","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":665,"value":"To create a bivariate legend you can use the code above. This code creates the bivariate legend. It has different values that you can adjust in order to adjust the font and lines of the legend. To position the legend so it is not hidden behind the map you want to go to the map code.","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":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":585,"value":"### Metadata\n\nThe data source used for this observable notebook is from NHGIS, more specifically the US Census Bureau's 2023 American Community Survey. The coverage has been cleaned to only include Census Tracts in eastern Virginia. As this data is from census tracts, there is possible sampling errors from when this data was collected. That can be seen in a few census tracts where the household income is seemingly glitching along with the military employment rate being over 100%. I believe this is due to the fact that some of these census tracts are only military installations/bases, where clearly there is some sort of collection/data issue.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"