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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | gis | 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":"354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","href":"https://static.observableusercontent.com/files/354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","name":"MaineCounty2020WGS84@3.json","type":"application/json","lastModified":1776127953688.566,"size":150908},{"id":"2cba288fa1fadd00a38b0bf02bb35cad05f22fe419d0a687efca8642e987269167ca7f3a783c7ab5ce0a4936d7ca8e473bb3500750f2156467f80bda6f3d54d0","href":"https://static.observableusercontent.com/files/2cba288fa1fadd00a38b0bf02bb35cad05f22fe419d0a687efca8642e987269167ca7f3a783c7ab5ce0a4936d7ca8e473bb3500750f2156467f80bda6f3d54d0","name":"usCountyWGS84 (1).json","type":"application/json","lastModified":1776126179537.754,"size":6533256},{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1776119970095.378,"size":377202},{"id":"88a357e32e9036780475c09cffdec36cca2fe4e6daac97c66b7058150376a8a90e88080d9e8e924e9ad29e1e383d3eb88e1073119f94eb84c212957486016a85","href":"https://static.observableusercontent.com/files/88a357e32e9036780475c09cffdec36cca2fe4e6daac97c66b7058150376a8a90e88080d9e8e924e9ad29e1e383d3eb88e1073119f94eb84c212957486016a85","name":"nhgis0007_ds258_2020_county@2.csv","type":"text/csv","lastModified":1776128814625.002,"size":547898},{"id":"354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","href":"https://static.observableusercontent.com/files/354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","name":"MaineCounty2020WGS84@2.json","type":"application/json","lastModified":1776126594775.056,"size":150908},{"id":"2cba288fa1fadd00a38b0bf02bb35cad05f22fe419d0a687efca8642e987269167ca7f3a783c7ab5ce0a4936d7ca8e473bb3500750f2156467f80bda6f3d54d0","href":"https://static.observableusercontent.com/files/2cba288fa1fadd00a38b0bf02bb35cad05f22fe419d0a687efca8642e987269167ca7f3a783c7ab5ce0a4936d7ca8e473bb3500750f2156467f80bda6f3d54d0","name":"usCountyWGS84 (1)@1.json","type":"application/json","lastModified":1776126966651.996,"size":6533256},{"id":"354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","href":"https://static.observableusercontent.com/files/354f6db827d44993786368964b1dafd215aaa0a937cf6ae7883c9ae71557ed43b24814abe31457d7dacf24606e90111897da46ae1d67d177985a3ab37dee33bf","name":"MaineCounty2020WGS84@1.json","type":"application/json","lastModified":1776123020748.571,"size":150908},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1776119970095.378,"size":1725175}] 2f:{"id":"a51ad91bb64be26e","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"531a7cb3632a426116f1942c4b15d3d874ef611d93eddb25e3d6bdc162dbcd36","access_level":"public","create_time":"$D2026-04-13T22:39:30.095Z","update_time":"$D2026-04-14T16:32:48.811Z","view_time":null,"first_public_time":"$D2026-04-13T22:39:30.095Z","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":"fe5079d62a5c115f","login":"gis5","name":"gis","avatar_url":"https://avatars-next.observableusercontent.com/1717f2cc4b6c49a075f6b979e78329080f27bcb5cd598a554e472f1059421e94","tier":"starter_2024","bio":""},"version":638,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8cdeab7119983d9f","login":"mkruse8","name":"Mkruse8","avatar_url":"https://avatars-next.observableusercontent.com/b3678b8ee207ea6d95f8cf6d8bccff80ddf1af201829d7855c40bfbba4fa834a","tier":null,"bio":""}],"members":[{"type":"team","id":"fe5079d62a5c115f","login":"gis5","name":"gis","avatar_url":"https://avatars-next.observableusercontent.com/1717f2cc4b6c49a075f6b979e78329080f27bcb5cd598a554e472f1059421e94","tier":"starter_2024","role":"editor"},{"type":"individual","id":"8cdeab7119983d9f","login":"mkruse8","name":"Mkruse8","avatar_url":"https://avatars-next.observableusercontent.com/b3678b8ee207ea6d95f8cf6d8bccff80ddf1af201829d7855c40bfbba4fa834a","tier":null,"role":"editor"}],"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\nPopulation density and eagle population density in the state of Maine`","pinned":false,"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\", [100, 0, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(800,250)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.MaineCounty2020WGS84).features)\n .join(\"path\")\n .attr(\"stroke\", \"white\")\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"### How are values displayed when hovering over each polygon?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"You can change the values that appear when you hover over polygons on the map by editing the .text line. The idAttribute references where we defined the join code. This line pulls the information from your data line down and sees what polygon you are asking information for and shows the matching numbers (in this case, the densities that we calculated for each population) that you defined earlier.","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.MaineCounty2020WGS84)","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(\"nhgis0007_ds258_2020_county@2.csv\").text(), ({GISJOIN, U7H001, EAGLES, AREALAND}) => [GISJOIN, [100000*U7H001/AREALAND, 100000*EAGLES/AREALAND]])), {title: [\" Population Density\", \" Eagle Density\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"### Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"The variables I used to compare are population density and eagle population density. Just wanted to show the differences in densities because obviously eagles are more dense than humans further away denser populated areas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"### How do you join geometries from a TopoJSON file with attributes from a CSV file?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"Add both of you JSON and csv files into observable using the paperclip and the plus sign inside. Change all of the places that give you an error to the name of those files. Make sure the code right below this is the name of the join code that's on each of the files (could be FIP, mine is GISJOIN). From there, in the code above, put that join code in where mine says GISJOIN. Then, you are basically defining the attributes from the CSV you want to show on your map (add yours where I have U7H001, EAGLES, and AREALAND). in the code after that, you can mess around with those attributes and change them, for example, I showed eagle and population density to compare them on the map, which is the JSON file. Make sure the properties are showing up correctly on the polygons line where you first bring in the JSON file. If those are not there, you are not able to add the attributes from the CSV file to the JSON file and therefore compare them and show them on your map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"idAttribute = \"GISJOIN\"","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(\"MaineCounty2020WGS84@3.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":529,"value":"mainecounty2020wgs84 = FileAttachment(\"MaineCounty2020WGS84@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"### How do you create a bivariate legend? How do you position the legend so it is not hidden behind the map?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"The code above provides the format for a bivariate legend. Unlike other legends, this one is set at a 45 degree angle. The position of the legend is determined in the code under the map. In the line \"svg.append(legend)\", in the parenthesis is where the x and y coordinates are located. You can change these numbers to move the legend around the map and position it so that it is not behind the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"### Which colors are used for bivariate mapping in Observable? Explain how to select or construct a bivariate color scheme.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":522,"value":"The code above is what returns the colors that you chose the bivariate map that will you call up into a function later. The code further up that starts with \"schemes\" is what determines the color scheme. As we have done before, you can go to color brewer and find a color scheme you like (you may need two in this case, or to select from the divergent options), and copy and paste the color codes into the different scheme options. You can also rename them there. Then, above and to the left of the map, there is a drop down where you can easily change between the different color scheme options you defined below the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".5f\")","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":608,"value":"### Metadata","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"data source: ESRI (from the data folder), NHGIS\ndate covered: 2020\ngeographic coverage and resolution: Maine Counties, WGS84\npreprocessing: I had to add the eagle count data I had on a different CSV file onto this CSV file\ndiscussion of uncertainty or bias: Because this is census data from 2020, population density may have changed. Additionally, there is always going to error in census data because of who chose to respond and who did not, so it could incorrect. Also, there could be more eagles in less dense areas because there are not as many people to actually see them and report them. Additionally, there could be less eagles in the higher density areas because individual eagles could've gotten reported twice.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":615,"value":"### Interpretation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"Eagles seem to be denser in the middle and northern areas of the state, and both populations are equally dense in the very southern border of the state. The most contrast is in the north, where eagle density is certainly higher than humans. I believe this relationship is because much of the state's urban areas where humans will have a higher population is in the southern area, and eagles are just everywhere because Maine is a great place for them, even in the urban areas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"