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

25:["$","title",null,{"children":"Bivariate Choropleth Mapping | Jayden Rogers | Observable"}] 49:T913,## Assignment 5 Cheat Sheet In order to join csv geometries to a topojson we must first import the D3 library. This allows us to draw formatting and other stylization aspects from the online library. We join our Csv data of cases per county to the counties json by using the same join field. In this case the join field is GEOID, since it is the same in both files. The colors in this exercise were predetermined within the existing forked code (http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/). There are 4 color combinations to chose from, RdBu, BuPu, GnBu, and PuOr. These were determined by specific hex codes in the schemes array. I created my own color scheme using the BVG color generator in Observable (https://observablehq.com/@benjaminadk/bivariate-choropleth-color-generator), this color scheme is not the best but it conveys the data in a readable way. I added this by adding the line of hex codes in the desired order within the scheme array. The legend is imported from the previous forked notebook and draws from the D3 library. It contains attributes such as font, font size, colors, and inputs on where to parse data from. The legend also manages the labels for the desired data based on classification methods in the 'data' attribute line. Changing the position of the legend lies within the 'chart' code under append legend. I shifted my legend to (750, 450) to account for the shape of Tennessee. The hover over value line is svg.append ("g") within the chart function. This displays the topojson features along with the selected attributes when you hover over the county with your mouse. The displayed values include the GEOID, the percentage values of COVID Cases and Hospitalizations, as well as if these are deemed low, medium, or high. ## Spatial Patterns In some counties the rate of hospitalizations is higher than the rate of COVID cases. This could be due to a higher amount of vulnerable populations, such as the elderly or lower income. The areas that are the most populated, the gray counties in Middle and East TN, have the lowest rate of COVID Cases as well as total hospitalizations. This is interesting because it is assumed that the higher populations would have higher total values, however these rates get normalized against the total populations. 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":1681248189587.971,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1681248189587.971,"size":1725175},{"id":"82f8ea364ad6eeb467dffbac8e9f32d33e87b0089e7dbced47fccde8d6440a94745cfdd8853cb6f9f8ca88d3393bfa3c3997c4331bc9275fde7ac99708430861","href":"https://static.observableusercontent.com/files/82f8ea364ad6eeb467dffbac8e9f32d33e87b0089e7dbced47fccde8d6440a94745cfdd8853cb6f9f8ca88d3393bfa3c3997c4331bc9275fde7ac99708430861","name":"TN_Cases_by_County.csv","type":"text/csv","lastModified":1681251611562.147,"size":20597},{"id":"cee822c3b1bd216248f849ea9224bc9ef9d169f9c8893dc5bbeb54fc7c019a5f7a3081567db098a9801e925fcb4643fb5ffa454ff889115b3e9f762eb81a3523","href":"https://static.observableusercontent.com/files/cee822c3b1bd216248f849ea9224bc9ef9d169f9c8893dc5bbeb54fc7c019a5f7a3081567db098a9801e925fcb4643fb5ffa454ff889115b3e9f762eb81a3523","name":"TN_Countieswgs.json","type":"application/json","lastModified":1681251636408.509,"size":1275658}] 29:{"id":"46abf42813a8e71d","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"fd3bb64c8060136885e5d335c45e28448fbb144eb14d09eca6c75a6b5aabb41c","access_level":"public","create_time":"$D2023-04-11T21:23:09.587Z","update_time":"$D2023-04-24T18:55:48.481Z","view_time":null,"first_public_time":"$D2023-04-11T21:23:09.587Z","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":"8a1e54fdff645e04","login":"jaydenrogers","name":"Jayden Rogers","avatar_url":"https://avatars-next.observableusercontent.com/33f032092452f0271daaba6d4f5f075e1885d63d50e868ffaf7bf53eb3ba3d00","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":645,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6d26ab7dc8dd9134","login":"jaydenrogers","name":"Jayden Rogers","avatar_url":"https://avatars-next.observableusercontent.com/33f032092452f0271daaba6d4f5f075e1885d63d50e868ffaf7bf53eb3ba3d00","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6d26ab7dc8dd9134","login":"jaydenrogers","name":"Jayden Rogers","avatar_url":"https://avatars-next.observableusercontent.com/33f032092452f0271daaba6d4f5f075e1885d63d50e868ffaf7bf53eb3ba3d00","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\n% of COVID Cases and % of Hospitalizations per total population by TN County`","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(legend)\n .attr(\"transform\", \"translate(750,450)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.TN_Countieswgs).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":570,"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: \"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 {\n name: \"PnOr\", \n colors: [\n \"#abaaa9\", \"#ab867b\", \"#ab4b31\", \n \"#ab7aa1\", \"#b67a7b\", \"#b64b31\", \n \"#ab2c95\", \"#be2c7b\", \"#c92c31\"\n ]\n }\n]","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\", \"medium\", \"high\"]","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([87,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.TN_Countieswgs)","pinned":false,"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(\"TN_Cases_by_County.csv\").text(), ({GEOID, CASES_TOT, HOSPITALIZED_TOT, POPESTIMATE2019}) => [GEOID, [+CASES_TOT/+POPESTIMATE2019, 100*+HOSPITALIZED_TOT/+POPESTIMATE2019]])), {title: [\"% COVID Cases by Population\", \"% Hospitalized\"]})","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":8,"value":"polygons = FileAttachment(\"TN_Countieswgs.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","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":"$4a","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 \"#000000\";\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":"$W4b","stdlib":"1"}} 24:null