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

45:["$","title",null,{"children":"Bivariate Choropleth Mapping | Gretchen Klock | Observable"}] 4d:T44c,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]} `; }4e:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680546615806.267,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680546615806.267,"size":1725175},{"id":"1c0395b1b4a0d11291499c8b80267bdeb75042b1f62addac331a6c4f4f7adac04611a3de4bb7b087090bc6181f6332c87508d117cf88755d74eea01f0e3210d3","href":"https://static.observableusercontent.com/files/1c0395b1b4a0d11291499c8b80267bdeb75042b1f62addac331a6c4f4f7adac04611a3de4bb7b087090bc6181f6332c87508d117cf88755d74eea01f0e3210d3","name":"illinois_counties.json","type":"application/json","lastModified":1680547624941.053,"size":123450},{"id":"7c0fa7651cfb7be84732a6223d7d02865ecf98d0f74c6c8a32a7febf23ec12814218fce2702480bbcbeb3361a093fd4249c89dc27df8b7e6525a082de565603f","href":"https://static.observableusercontent.com/files/7c0fa7651cfb7be84732a6223d7d02865ecf98d0f74c6c8a32a7febf23ec12814218fce2702480bbcbeb3361a093fd4249c89dc27df8b7e6525a082de565603f","name":"illinois_counties.geojson","type":"application/geo+json","lastModified":1680547442162.284,"size":541815},{"id":"3396d1e3f95bdf6f2b56161834ceed109b1dab887ca6d64550d71f63a71529ae0aab709a5e9ac1a7b9e27b3c48da3adbbe6f4c6afc71f4b20f8b78ebd141ad60","href":"https://static.observableusercontent.com/files/3396d1e3f95bdf6f2b56161834ceed109b1dab887ca6d64550d71f63a71529ae0aab709a5e9ac1a7b9e27b3c48da3adbbe6f4c6afc71f4b20f8b78ebd141ad60","name":"UnemploymentReport_cleaned2.csv","type":"text/csv","lastModified":1680548730693.766,"size":6037},{"id":"62608f531582d8887f3768aa39a5ebb574d9772bcf864f57f96fe2d77cb9dd1705a3bb88783feee32c835a3fc2c36d0603a8f97f857324f440da10e2d8a3aab8","href":"https://static.observableusercontent.com/files/62608f531582d8887f3768aa39a5ebb574d9772bcf864f57f96fe2d77cb9dd1705a3bb88783feee32c835a3fc2c36d0603a8f97f857324f440da10e2d8a3aab8","name":"UnemploymentReport_cleaned3.csv","type":"text/csv","lastModified":1680548930405.063,"size":6038},{"id":"e86341cdd5fedddf406a43c93873a8585a69ef92542330c3aeed17bb7b3100a1e0117c8db37b1d0ffa3f4a72da27f74eb2af4f23e2129dd45067e6d58d5b111f","href":"https://static.observableusercontent.com/files/e86341cdd5fedddf406a43c93873a8585a69ef92542330c3aeed17bb7b3100a1e0117c8db37b1d0ffa3f4a72da27f74eb2af4f23e2129dd45067e6d58d5b111f","name":"UnemploymentReport_cleaned4.csv","type":"text/csv","lastModified":1680549102790.152,"size":5273}] 49:{"id":"9d422bcf5d502631","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"318681804cb2a1252398e6d4c88e785935fe342469c3379a1a22d9667f782a09","access_level":"public","create_time":"$D2023-04-03T18:30:15.806Z","update_time":"$D2023-10-18T22:18:10.005Z","view_time":null,"first_public_time":"$D2023-04-03T18:30:15.806Z","has_unpublished_edits":null,"fork":{"id":"65c7f6ce9b65d583","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"22130e106df70095","login":"geoviz","name":"Geographic Visualization (GEOG 3540) - University of Iowa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"af08bab9a3cae15b","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":685,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6167672369178b76","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6167672369178b76","login":"gklock","name":"Gretchen Klock","avatar_url":"https://avatars-next.observableusercontent.com/150765f53ed113a7447da0d82dcadb10531888253edba0a32c64ea764355d013","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nUnemployment Percentage and Average Household Income in Illinois Counties \nData: 2021 Census, 2021 USDA Economic Research Service`","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\", [0, 0, width, height]);\n\n svg.append(\"text\")\n .attr(\"x\", 700) \n .attr(\"y\", 120)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"14px\") \n .text(\"Income and Employment Disparity\");\n // the above code creates the tital\n \n svg.append(legend)\n .attr(\"transform\", \"translate(700,200)\");\n // the above code moves the legend. \n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.illinois_counties).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n \n .append(\"title\")\n .text(d => `${d.properties[COUNTYNAME]}, ${format(data.get(d.properties[idAttribute]))}`);\n// the above code creates a title when a county is hovered over. To add the county name, [COUNTYNAME] is defined in a // cell below.\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":653,"value":"md` ## Spatial Patterns \nThe Chicagoland area (around Chicago in the Northeast) has the highest average income and highet unemployment rates. This is also the area of the state with the highest population. In the south, unemploument tends to be high and average household income tends to be low. A noticable split within the state is along the Illinois river which runs southward in the western center of the state. To the northwest, unemployment tends to be high while across the river in the center of the state, there is a cluster of counties with average unemployment rates and high household income. There is a cluster in the of counties in the western extrustion of the state that have both low unemployment and low income. There tends to be more clustering of like-counties in the northern half of the state, and more dispersion in the southern half.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md`The above code is where color schemes can be added. Bivariate color schemes are created by overlapping two three-class univariate color schemes. More details are available at (http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"] \n","pinned":false,"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":false,"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":false,"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":false,"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":false,"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([90,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":false,"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.illinois_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(\"UnemploymentReport_cleaned4.csv\").text(), ({GEOID,unemployment_pct, Avg_household_income}) => [GEOID, [+unemployment_pct, + Avg_household_income]])), {title: [\"% Unemployed\", \"Avg Household Income\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"COUNTYNAME= \"NAMELSAD\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"md`The adove code specifies that the GEOID is being used to join the csv data with the shapefiles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"illinois_counties.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 = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$4d","pinned":false,"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":false,"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":false,"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 `${a} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null