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

25:["$","title",null,{"children":"Bivariate Choropleth Mapping Assignment - Bret Barschak | Bret Barschak | Observable"}] 49:T5aa,This is the script that creates the final part for the map and chart. The chart attribute is where the chart sits in the window with the polygons. In my case it is the State of Missouri in the window. svg is defined as the actual coordinates in the window where the state is aligned. This takes into account the size of the window and then using an x,y grid you can align the polygon to where you prefer it to sit. Next is the svg for the legend and how it sits in the window. It also uses an x,y grid for mapping. Next is the svg for all the polygon attributes that deal with color, line width, line color, and the titles for the legend. This part also takes the data into account and projects it with the colors. The patterns seen are that areas like Kansas City in the West have a decent spread of rural and life expectancy showing that in that area they have stable health care and people who are taking care of themselves. In the Southeast you can see that the very rural areas of the map do have the lowest life expectancy. This area most likely has poor health care and has limit on the health service accessibility for their residence. The hover tool is in this code and is used for people who want to look at specific counties in this data, or they may not be able to interpret the colors due to color blindness. The hover feature gives important data and without it people could be left confused on what the exact data for their area is. 4a: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]} `; }4b:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680650055592.481,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680650055592.481,"size":1725175},{"id":"5b6dbf2719129028d36812702432647fdb07d48731cf8723e2a634782bb08196db5487ca0f6b7a8b127183767c629b1ec75cdf35a70f3b5afedaaf2ee04f844a","href":"https://static.observableusercontent.com/files/5b6dbf2719129028d36812702432647fdb07d48731cf8723e2a634782bb08196db5487ca0f6b7a8b127183767c629b1ec75cdf35a70f3b5afedaaf2ee04f844a","name":"MO_County_EXP (1).json","type":"application/json","lastModified":1680656731885.047,"size":913495},{"id":"54acc6c9645f1d57b5841ff01f9300428fb50ff4e5f3fccf8ab139c0a3c297e20a29b43a2a56c5a0ca59da1614f6e68f98a7fac97cf6d672943dd22f51fd70a5","href":"https://static.observableusercontent.com/files/54acc6c9645f1d57b5841ff01f9300428fb50ff4e5f3fccf8ab139c0a3c297e20a29b43a2a56c5a0ca59da1614f6e68f98a7fac97cf6d672943dd22f51fd70a5","name":"2022(3) MO County health(as222).csv","type":"text/csv","lastModified":1680664627042.058,"size":86906}] 29:{"id":"5bee17ee9aecb2b7","slug":null,"title":"Bivariate Choropleth Mapping Assignment - Bret Barschak","thumbnail":"80050e1ece78f4fa2e67356db7ca1ffe3590c00ad312df37bfeed3d11e478058","access_level":"public","create_time":"$D2023-04-04T23:14:15.592Z","update_time":"$D2023-04-11T20:51:32.422Z","view_time":null,"first_public_time":"$D2023-04-04T23:14:15.592Z","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":"dc7a3d4cff7b4c1f","login":"bbarschak","name":"Bret Barschak","avatar_url":"https://avatars-next.observableusercontent.com/c2fad3b14573398bdc4202d8b02fe1ec3756aae1feb630c7b8034faf5aab2479","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":612,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"622a5a735cdc4017","login":"bbarschak","name":"Bret Barschak","avatar_url":"https://avatars-next.observableusercontent.com/c2fad3b14573398bdc4202d8b02fe1ec3756aae1feb630c7b8034faf5aab2479","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"622a5a735cdc4017","login":"bbarschak","name":"Bret Barschak","avatar_url":"https://avatars-next.observableusercontent.com/c2fad3b14573398bdc4202d8b02fe1ec3756aae1feb630c7b8034faf5aab2479","tier":null,"role":"editor"},{"type":"individual","id":"60e9af384dfce94c","login":"caglarkoylu","name":"Caglar Koylu","avatar_url":"https://avatars-next.observableusercontent.com/94b0c40bf8a6b04057088ea171864451b3e3b27b7346d866d2a7be21d077be76","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 Assignment - Bret Barschak","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping Assignment - Bret Barschak\n\nComparing Life Expectancy to Rural Area Percentages of Missouri Counties.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"`Data: [2022]`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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\", [10, 10, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(750,200)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.MO_County_EXP_2).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[\"County\"])))\n .attr(\"d\", path)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 1.25)\n .append(\"title\")\n .text(d => `${d.properties[\"County\"]}, ${format(data.get(d.properties[\"County\"]))}`);\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":553,"value":"$49","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: \"Red and Blue\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"Blue and Purple\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"Green and Blue\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"Purple and Orange\", \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":580,"value":"This is the color attribute table. It is slotted with 9 separate colors for the 9 grid blocks that make up the legend. We have multiple color options that allow the user to see the map with full clarity if they are colorblind. These colors are used to convey that their are 9 different possible values within the parameters of low, medium, and high categories. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"medium\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"This the labels used for when you hover over the counties to understand what each attribute in case you can't see the colors or understand the map in its entirety. I find this useful for anyone even the map creator to quickly interpret a singular county if that is the only one you have interest in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":586,"value":"Math breakdown attribute for the use of color length name in the map and table. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":588,"value":"These x and y attributes are used to make a range of the data for the elgened ot have low, medium, and high attributes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":590,"value":"this creates an interpretable projection for the above window. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoMercator().rotate([122,0]).fitExtent([[80, 80], [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":592,"value":"This is the code that is uses the Geo Mercator for the map projection. I felt that it made the best-looking map and it had rather straight up and down look to it. Not to much curve in the projection where it could confuse a reader. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.MO_County_EXP_2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"Is is the data from the topojson that we get and lays it out in a readable fashion. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"2022(3) MO County health(as222).csv\").text(), ({County,LifeExpect ,perrural }) => [County, [+LifeExpect, +perrural]])), {title: [\"Life Expectancy\", \"Rural Area %\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"This is the data from the uploaded CSV. I took the County name as the join attribute to join both the csv and the topojson. It seemed easiest since the FIPS wasn't working for some odd reason. I could blame a possibly incorrect FIPS input for that. I chose to depict the life expectancy of each county and the Rural percentage to see if there was a quality-of-life difference in areas of Missouri. Looking at this now that may not be the case in all rural areas, but it could be a small population sample. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"MO_County_EXP (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"The original topojson of the Missouri counties. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"Legend import for the Bivariate legend. This code makes up the grid and the colors that sit and change within the places legend grid. It also has the range of the data for the map. This data is assigned a color and that color is projected back onto the base map. The color properties for the grid lines are stored here along with the line size and the font for the data description on the legend. ","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":598,"value":"color importer for the multiple color variables. ","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(\".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 `${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"}],"files":"$W4b","stdlib":"1"}} 24:null