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

40:null 41:["$","title",null,{"children":"Assignment 5: Bivariate Choropleth Mapping | Caleb Siegle | Observable"}] 47:T924,The next thing we make and add to the canvas, is the legend. You want to place the legend in second chunk of code. The numbers associated in the translate code, moves the legend around. I changed the numbers to 480 and 70. It is centered in the middle of the map and is not covered up by the polygons. The best way is to just play around with it to see where it fits best. Next is uses the color previously determined by the color variable that matches the map. You can change the title, and other formats in this "legend" part of the code. This legend is at a 45 degree angle so the audience can see the highest value and how to look at the rest of the colors based off of the legend. Otherwise it might be harder to see what is the high in some parts of the data and low in the others. The last part of this code makes it possible to see the data as you hover over the map. It takes the data, and then shows string or text as you hover to show a better way to see the data for a specific county. It does the same thing when calling the data, but instead of putting the color on the map, it takes it and makes it available while you hover for both sets of data. In regards to the spatial interpretation. I wanted to look at the comparison of the average size of a family and average size of a farm in Pennsylvania. You can see there are some clusters of the highest color of both a family size and farm size in the south central part of the state. My hypothesis is that the bigger the farm, the bigger the family because they could need more help. Or that is the classic thought between these two variables. I can see and it makes sense that the southeast part of the state has large families but not large farms. This is because of the more urban areas in that part of the state. On the other hand it also makes sense for the northern part of the state since this is where the the rural parts of the state are. The other thing that could be happening is that the big counties could have a large variance and have some rural and urban sections and could be throwing off the numbers a little bit. This is where you might want to be a little more specific if the goal of the map is to be more accurate of where this actually occurs. For example, instead of counties, it might be best to look at census tracts or something like that. 48: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]} `; }49:[{"id":"6bd95acf854a02fbcb601fa930709f4cef712a5372289867ec15b88b8a0f3fa0c24ac3aa782408d658034fe8cfea11eaa4c88c452579c205c238474ce14ca147","href":"https://static.observableusercontent.com/files/6bd95acf854a02fbcb601fa930709f4cef712a5372289867ec15b88b8a0f3fa0c24ac3aa782408d658034fe8cfea11eaa4c88c452579c205c238474ce14ca147","name":"Pennsylvania.csv","type":"text/csv","lastModified":1648478336038.693,"size":21720},{"id":"69c044c1fa4f65b686f568c86f78e20f53b3a42a449d9873d74dc6603bd5863b1e137a9fd3f1259f411c5a5bfa756577caab36efa5808f9973f4e52b25f492ca","href":"https://static.observableusercontent.com/files/69c044c1fa4f65b686f568c86f78e20f53b3a42a449d9873d74dc6603bd5863b1e137a9fd3f1259f411c5a5bfa756577caab36efa5808f9973f4e52b25f492ca","name":"Pennsylvania.json","type":"application/json","lastModified":1648478321604.133,"size":80376}] 45:{"id":"12592535b217fa96","slug":"assignment-5-bivariate-choropleth-mapping","title":"Assignment 5: Bivariate Choropleth Mapping","thumbnail":"b5f6c1b17036488402658c93340116de74ea3d037caec2886ab6dded90092c6c","access_level":"public","create_time":"$D2022-03-23T13:57:24.008Z","update_time":"$D2022-04-11T14:53:21.432Z","view_time":null,"first_public_time":"$D2022-03-29T15:17:20.279Z","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":2,"starred":false,"owner":{"type":"team","id":"043d76feb2228a13","login":"calebsiegle","name":"Caleb Siegle","avatar_url":"https://avatars-next.observableusercontent.com/d1ed739f2e67eaec738fd963a3faad333509e48f3fa51fdd2e63932bb97231fa","tier":"starter_2024","bio":"I am a MSBA student at the University of Iowa.","following":false},"version":593,"publish_version":593,"role":null,"authored":false,"authors":[{"type":"individual","id":"264b00e68bee1b7b","login":"calebsiegle","name":"Caleb Siegle","avatar_url":"https://avatars-next.observableusercontent.com/d1ed739f2e67eaec738fd963a3faad333509e48f3fa51fdd2e63932bb97231fa","tier":null,"bio":"I am a MSBA student at the University of Iowa.","following":false}],"members":[{"type":"individual","id":"264b00e68bee1b7b","login":"calebsiegle","name":"Caleb Siegle","avatar_url":"https://avatars-next.observableusercontent.com/d1ed739f2e67eaec738fd963a3faad333509e48f3fa51fdd2e63932bb97231fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 5: Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Assignment 5: Bivariate Choropleth Mapping\n\nAverage Household Family Size and Average Farm Size by Counties of Pennsylvania. Data: [Census 2010]`","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(480,70)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Pennsylvania).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", .5)\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":548,"value":"$47","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":575,"value":"The colors for bivariate mapping are very specific. These colors used have been researched and known to work well with bivariate mapping. For more information you can visit the link in the comments of the code. There are different color schemes here that all work well. It is just preference on which one you want to use. We put a drop down menu for options of the schemes so you can choose which one you think looks the best. \n\nTo add a new one, you will just need to find some sort of color scheme and add it as the same format in the cell of code above.","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":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.\n\nprojection = d3.geoConicConformal()\n .parallels([40 + 53 / 60, 41 + 57 / 60])\n .rotate([77 + 45 / 60, 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":585,"value":"The above code uses the geoConicConformal projection for the state of Pennsylvania. This is what I found on a website that shows what projections are best for certain states in America. ","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.Pennsylvania)","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(\"Pennsylvania.csv\").text(), ({FIPS, AVE_FAM_SZ, AVE_SIZE12}) => [FIPS, [+AVE_FAM_SZ, +AVE_SIZE12]])), {title: [\"Ave Family Size\", \"Average Size of Farm\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"This code takes the data from the CSV that you want to show in your map. Then the title is made for the legend and is used to label the axis of the legend since this is a bivariate map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"idAttribute = \"FIPS\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"To join the geometries that come with the topojson and the attributes from the csv, you want to make sure you have an ID common between the both of them. In this case it is the FIPS code for each county. In the above cell, we create a variable called idAttribute which equals \"FIPS\". This makes it easier to join the two together when getting to the mapping stage of the code. Then this also makes it easier later because we can just type idAttribute in place of the actual name of the attributes. This makes it easier for someone to fork this and change it the way they want without having to change everything but 1 variable instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Pennsylvania.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":"$48","pinned":true,"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":true,"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":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":"$W49","stdlib":"1"}} 46:"$45:body"