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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | Thomas Lynn Workspace | Observable"}] 31: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]} `; } 32:[{"id":"5180204cb9266dadce1ff9c353b145bd3b1e12742db1701a480624789988a1c68131610cc350e323adabd0c0789d6331852d96a9739220962862f642d20edb83","href":"https://static.observableusercontent.com/files/5180204cb9266dadce1ff9c353b145bd3b1e12742db1701a480624789988a1c68131610cc350e323adabd0c0789d6331852d96a9739220962862f642d20edb83","name":"Georgia_counties (1).json","type":"application/json","lastModified":1777565474158.442,"size":145593},{"id":"81a16b7b3f900135864f33c07011b6ac2279f0694dbdc37e213ec552e053135f2de2216f862dde4d0684e2bc982a1c1ac1e18b72393d2f15ce2d5a2d341d6530","href":"https://static.observableusercontent.com/files/81a16b7b3f900135864f33c07011b6ac2279f0694dbdc37e213ec552e053135f2de2216f862dde4d0684e2bc982a1c1ac1e18b72393d2f15ce2d5a2d341d6530","name":"NHGIS_Georgia_popstat@1.csv","type":"text/csv","lastModified":1777568414318.529,"size":34053}] 2f:{"id":"3e30bf0e7082902a","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"0c4e55b391dc5ab0298ad15af460bf67d808c41574caa454b7e02e040d4ab3b9","access_level":"public","create_time":"$D2026-04-30T15:07:54.222Z","update_time":"$D2026-05-05T04:36:13.410Z","view_time":null,"first_public_time":"$D2026-04-30T19:30:05.232Z","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":"96ddff3cee0b3944","login":"thomas-lynn-workspace","name":"Thomas Lynn Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a1ee43ed101dc19b03a54b5692c51abbb7ae2b0297ca1aea120b64113536a8d8","tier":"starter_2024","bio":""},"version":577,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3cd6415e8eb35dc1","login":"tjlynn-dev","name":"TJLYNN-dev","avatar_url":"https://avatars-next.observableusercontent.com/97d68549e351dc00a776e23c7bf08b8d08a0ec59875b8f536e42cd8fce2373d0","tier":null,"bio":""}],"members":[{"type":"individual","id":"3cd6415e8eb35dc1","login":"tjlynn-dev","name":"TJLYNN-dev","avatar_url":"https://avatars-next.observableusercontent.com/97d68549e351dc00a776e23c7bf08b8d08a0ec59875b8f536e42cd8fce2373d0","tier":null,"role":"editor"},{"type":"team","id":"96ddff3cee0b3944","login":"thomas-lynn-workspace","name":"Thomas Lynn Workspace","avatar_url":"https://avatars-next.observableusercontent.com/a1ee43ed101dc19b03a54b5692c51abbb7ae2b0297ca1aea120b64113536a8d8","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nPercentage of Rural Population and Percentage of Black Population Georgia, County Level (NHGIS Census data) [2020]`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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(670,160)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Georgia_counties).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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"Spacial Distrobution---\nThe North West portion of Georgia has a much higher percent of rural and a low percentag of black people. The middle of the state seems to have a large population of rural and black persons. I think this may have historic roots in plantations in the early 1800s. Many of these plantations were located in the center of the state. Overall the South part of the state seems to have lesss of a rural population and a greater percent of black residents. The North seems to be much more rural and has a much lower percentage of black population. With some quick research it seems that the north has many peach farms which can explain the rural aspect. The race component would take more research to fully understand. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Georgia_counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"NHGIS_Georgia_popstat@1.csv\").text(), ({NAMELSAD, Total, Black, Rural}) => [NAMELSAD, [100*+Rural/+Total, 100*+Black/+Total]])), {title: [\" % Rural \", \" % Black\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"NAMELSAD\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Georgia_counties (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"1 Joining TopoJSON with CSV ----- \nJoining the TopoJSON and the CSV data is made possible through the shared collum name, the county name is stored in NAMELSAD. The CSV is parsed into javasscript using the d3.csvParse() line where each row can be transfered into a key-value pair: {NAMELSAD, [100*+Rural/+Total, 100*+Black/+Total]] ] When the polygons are drawn the coresponding CSV file's properties are matched using data.get(d.properties[idAttribute] the Id attribute is set to \"NAMELSAD\". The entire lookup happens inside of the .attr(\"fill\", d => color(data.get(d.properties[idAttribute]))) meaning that the color fill for each country is based off of the value in the NAMELSAD csv","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"2. Colors for Bivariate Mapping -----\n The schemes array has the different colors which can then be selected by the user through the HTML select> dropdown in the _colors _ function. Each color scheme blens two hues across the 9x9 grid. THe color function maps the data pait to the correct grid cell via colors[y(b) + x(a) * n]. x and y are d3.scaleQuantile scales that break each variable down into three quantile classes. (high, medium, low).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"3 Creating Bivarite legend----\nTHe legend function bulds a SVG group with a 3x3 grid of colored rectangles which are drawn with d3.cross(d3.range(n), d3.range(n)) with the whole group rotated 45 degrees to create a diamond shape, commonly seen in bivariate maps. The legend names are also rotated to fit with the overall scheme. The legend is possitioned using .attr(\"transform\", \"translate(670, 160)\") putting it in the upper right corner. SVG coordinates draw from the top right meaning 0 y is the top of the SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"md` 4 Hover --- \nThe hover tool is simple to impliment as the browser nativly displays the hover feature. The tittle of each polygon is attatched to the hover with .text(D => \\${D .properties[idAttribute, format(data.get(d.properties[idattribute .....which makes the hover display the ID Attribute which is county names. The function rounds the values because of d3.format(\".1f\" Because of the quantile breakdown of the data hovering over a county displays the Name, $ rural (high/medium/low) and the same for % Black population. `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"