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

2b:null 2c:["$","title",null,{"children":"Grocery Store Access vs Population Density in Rock County | mackcross | Observable"}] 31:T7c0,**About this Map** This is a map which explores access to grocery stores and population density across different parts of Rock County, Wisconsin. To produce this map, I forked an existing map, Bivariate Choropleth Mapping, and replaced all file input with my own Rock County topojoson file and csv file information. All other modifications to the code have been described below. **Interpretation** This interpretation references the colors observed in the PuOr color scheme. There are two larger cities within Rock County which include Janesville (located near the middle of the map) and Beloit (located near the bottom middle of the map). There are also smaller towns scattered throughout the county. One of the interesting components to this map is the smaller areas located in the Janesville, WI region. Interestingly, there appears to be some parts of this region that are predominately grocery stores with very low population density (denoted by the dark, more pure purple) and, likewise, there's areas with a higher population density with low grocery store access (denoted by the lighter yellow). To me, this indicates that, in the Janesville area, there's certain parts of Janesville which are mostly urban/shopping/grocery, while other parts of Janesville are more exclusively residential. The areas on the border of the map which are a dark, rich purple, I suspect, must be quite rural with a few small towns that contain a grocery store that many people in these rural areas live around. However, there are also some medium brown regions along the border, which indicate high density and moderate grocery store access. It is likely that these areas contain larger towns, but are still moderately rural. Rock county has some moderately sized cities and some large towns, but is also very rural. This map seems to emphasis this mix of more urban and rural through the exploration of both grocery access and population density and its high variability within the county. 32:T44c,legend = () => { const k = 22; 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]} `; }33:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680635369533.32,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680635369533.32,"size":1725175},{"id":"a5f88ae486fe3f30fe2a91bfbcd1c1754eecfe478e332b71aaf029065fe09a3a63e9c0b5fd9fc84159c74c30502b659fbb30ec4479d01cac3b216a7a2dec5c0d","href":"https://static.observableusercontent.com/files/a5f88ae486fe3f30fe2a91bfbcd1c1754eecfe478e332b71aaf029065fe09a3a63e9c0b5fd9fc84159c74c30502b659fbb30ec4479d01cac3b216a7a2dec5c0d","name":"rockcountydata-3.csv","type":"text/csv","lastModified":1680645322055.321,"size":26863},{"id":"83ce22c079f3a19fead5617551834f561ebf82c917b0db117d22fae61d72ae02a3af6fbba89951937747575a690beb9d6413a34019cbd47cf3a9f219b8aba467","href":"https://static.observableusercontent.com/files/83ce22c079f3a19fead5617551834f561ebf82c917b0db117d22fae61d72ae02a3af6fbba89951937747575a690beb9d6413a34019cbd47cf3a9f219b8aba467","name":"rockcountymap.json","type":"application/json","lastModified":1680645326592.415,"size":15758}] 2f:{"id":"7b05d8902931a3c6","slug":null,"title":"Grocery Store Access vs Population Density in Rock County","thumbnail":"61c249ae7b0cdcc256f41db9ef4b475e5198c182e1aa594802950ce3ad5a7e5f","access_level":"public","create_time":"$D2023-04-04T19:09:29.533Z","update_time":"$D2023-05-09T12:43:26.272Z","view_time":null,"first_public_time":"$D2023-04-04T19:09:29.533Z","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":"334f6f51a22349c6","login":"mackcross","name":"mackcross","avatar_url":"https://avatars-next.observableusercontent.com/c748da9e5c023b7ec8437995e067e4e1268c70b0105b5e96414ce56afb2a3e50","tier":"starter_2024"},"version":649,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b16ddb9dee32a3f","login":"mackcross","name":"mackcross","avatar_url":"https://avatars-next.observableusercontent.com/c748da9e5c023b7ec8437995e067e4e1268c70b0105b5e96414ce56afb2a3e50","tier":null}],"members":[{"type":"individual","id":"8b16ddb9dee32a3f","login":"mackcross","name":"mackcross","avatar_url":"https://avatars-next.observableusercontent.com/c748da9e5c023b7ec8437995e067e4e1268c70b0105b5e96414ce56afb2a3e50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Grocery Store Access vs Population Density in Rock County","cells":[{"id":516,"value":"# Grocery Store Access vs Population Density in Rock County\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":601,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":14,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-70, 4, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(-10,140)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.rockcountymap).features)\n .join(\"path\")\n .attr(\"stroke\", \"black\")\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","output":"$undefined","database":"$undefined"},{"id":551,"value":"# MODIFICATIONS: \nThe following adjustments were made to the **above** code block to modify the map. \n\n**First,** the position of the Rock County map was adjusted by modifying the numbers within the line: \n\n*.attr(\"viewBox\", [-78, 0, width, height]);*\n\n\n**Second,** the position of the legend was adjusted by modifying the numbers within the line: \n\n*.attr(\"transform\", \"translate(-10,140)\");*\n\n\n**Third,** there was some difficulty distinguishing the smaller regions in the map. As a result, I thought it would help to have dark lines separate the different regions. I added this line of code for this goal: \n*.attr(\"stroke\", \"black\")*\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"# NOTE: \nThe following discusses the **below** code block. This code block was not modified, but its important to point out that this chunk of code provides the different color options. It provides four different names and each name is associated with nine different colors. This code enables the color options available on the map. These colors have been specifically designed to be user friendly in a bivariate map and, as a result, I decided not to change them. Given that there are nine different variables in this bivariate map, color choice is especially critical to properly convey the information as its hue provides information on the low-high scale and the existing colors in this code have been designed to work well together in visualizing bivariate data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":614,"value":"# NOTE:\nThe labels line of code represents the labels \"low\" and \"high\" that can be seen when you hoover over the map. Notably, the variable \"labels\" in then ran through subsequent code chunks such as legend and format shown below. The code in this line as well as the lines in legend and format work together to enable the hoover over function seen in this map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"# MODIFICATION: \nIn the line of code for the projection, rotate was modified to [90,0] which positions the Rock County map in a more visually appealing manner. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.rockcountymap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"# MODIFICATION: \nThe variables below were modified and, as shown, first the GEOID is listed, which links the .csv data with the topojson file. Next, the variables of interest are shown. There is the variable of proportion of people with access to grocery stores and a general population density measure. The title was renamed to represent the new variables. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"rockcountydata-3.csv\").text(), ({GEOID, Pop2010, lalowi1}) => [GEOID, [+lalowi1/+Pop2010, +Pop2010/160331]])), {title: [\"Grocery Access\", \"Population Density\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"# NOTE: \nThe below line of code was modified to be \"GEOID\", which is the column used to join my .csv file and topojoson file. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"rockcountymap.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"