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

29:null 2a:["$","title",null,{"children":"Assignment 5: Bivariate Choropleth Mapping | miahboyle | Observable"}] 2f:Ta78,**Questions: ** 1. How do you specify NaN colors and add into the legend when you assign "legend" earlier in the code? 2. How do you limit the number of decimal places when hovering over each unit? **Discussion: ** For this discussion I will be using the color scheme PuOr, so areas of high poverty and high percentage of non-English speakers are shown as dark orange and areas of low poverty and low percentage of non-English speakers are shown as white. There are some pockets of high/high areas in the more rural parts of Minnesota, however the majority of the rural parts of the state are more yellow or a dull purple, suggesting high poverty and low percent non-English speakers or medium levels of each attribute. This does make sense, since the rural parts of most midwestern states are predominantly comprised of white, less educated populations who make a lower income compared to those in the urban areas. However, there is not a clear pattern except perhaps in the Northeastern portion of the state that is predominantly yellow, indicating the population in this areas is most likely of white race/ethnicity and lives below the 185% poverty line. The more interesting patterns may lie closer the the urban area of St.Paul/Minnesota. Unfortunately it is difficult to see these patterns clearly since the census tracts are so small. It would be helpful to create a subset of this map, zoomed into that specfic area. However, for the purpose of this discussion, it does look like there is a halo of white (low/low) census tracts surrounding the city, matching up with the suburban areas where the population is mostly white and higher income. We also see plenty of darker purple census tracts on the boundary of the city, indicating that there are populations of increase percentage of non-English speakers and decreased poverty. These populations are slightly closer to the city center and may not be living exclusively in the suburbs. Finally, when we look a bit harder into the census tracts within the city center, there is a fair amount of dark orange, representing areas of high poverty and high percentage of non-English speakers. Some of these high/high tracts are next to areas of purple representing still high percentages of non-English speakers, but lower poverty levels. It would be interesting to see how these distinct neighborhoods differ in what resources are available to them, as well as looking into what specific race/ethnicities reside in dark orange vs. purple census tracts within the city to try and further understand what populations may be more marginalized and experience greater levels of inequity in these specific parts of the city. 30:T657,**How to position the legend:** - This is done using the following code: svg.append(legend) .attr("transform", "translate(670,400)"); - to adjust the position of the lengedn you can change the numbers in the translate() function - To move the legend to the right, increase the first number (670) or move it to the left by decreasing it. - To move the legend up by decreasing the second number (400), and move it down by increasing it. **How to assign the bivariate fill colors to your map** - This is done using the following code: .join("path") .attr("fill", d => color(data.get(d.properties[idAttribute]))) .attr("d", path) - This code in linking the color of the polygon fill to the values of our attributes specified in the dictionary we named "data" - The code knows where to look for each value by using the key of idAttribute that we assigned to "TRACTCE" earlier. - You should not have to change this part of the code at all if you previously changed the idAtrribute and data dictionary to fit the datasets you are using. **How to display your attribute values by hovering over the map units** - This is done using the last two lines of the svg.append('g') code that specifies the text: format(data.get(d.properties[idAttribute])) - This code pulls the attribute values from the data dictionary created earilier based upon the idAttribute, or "TRACTCE" variable, that matches up with each key in the dictionary. - Again, if you have previously re-defined "idAttribute" and the dictionary "data" to fit the datasets you are using, you do not have to change this code. 31:T425,Read in the csv file you want to use while also creating a data object for the attributes you wish to map. For this example we are using the attribute "tractce" as our identifier to match up to the topojson file. Our additional attributes pulled from this csv file include total population of non-English speakers (totnoneng), population under the 185% poverty level (pop185x), and the total population (totpov). These additional attributes were used to make two normalized attributes, % non-English and % poverty, to include in our map. To specify that the attributes pulled are numerical, remember to add a plus sign prior to the each attribute in the brackets. Above you can see that tractce was not pulled as numerical as is a string. This matches up with the format of the TRACTCE variable from the topojson file. The last portion of the above code: {title: ["% non-english", "% poverty"]}, specifies the labels that will be used in the lengend. Make sure not to make these titles too long so that they fit on each axis of the 45 degree angled legend. 32: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]} `; }33:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680538185601.15,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680538185601.15,"size":1725175},{"id":"4aa7e48b949a98b8157d622739a944eb54737fc32234ebdaead8b7ff59e85ae2dc49e7c2e8a76eb22de400d6163436b88e1423ce3a0d10783128df2af0d265f3","href":"https://static.observableusercontent.com/files/4aa7e48b949a98b8157d622739a944eb54737fc32234ebdaead8b7ff59e85ae2dc49e7c2e8a76eb22de400d6163436b88e1423ce3a0d10783128df2af0d265f3","name":"ej_mpca_census (1).csv","type":"text/csv","lastModified":1680538447268.952,"size":724287},{"id":"0c0112dd23b698c4f7c6bd5fb78205869ca7b3d57ef92bdb921465a872e25dab510e0ba4c7420c9ca7872213fdce6d2fa828f5630b7ae669c3f9c80d8d923497","href":"https://static.observableusercontent.com/files/0c0112dd23b698c4f7c6bd5fb78205869ca7b3d57ef92bdb921465a872e25dab510e0ba4c7420c9ca7872213fdce6d2fa828f5630b7ae669c3f9c80d8d923497","name":"MinnesotaCensusCAFO_ExportFeature.json","type":"application/json","lastModified":1680538447715.384,"size":6330014},{"id":"b3e9b63041ff01eb749de79f15dfe5dfd6210ce9daade35768300b7e06b1559f58f133eebb6baea0620c1f51dffbaf9260e658ecb1221d79f69f21a913fef4d5","href":"https://static.observableusercontent.com/files/b3e9b63041ff01eb749de79f15dfe5dfd6210ce9daade35768300b7e06b1559f58f133eebb6baea0620c1f51dffbaf9260e658ecb1221d79f69f21a913fef4d5","name":"swinefeedlots_project_export.csv","type":"text/csv","lastModified":1680538447667.717,"size":5271346}] 2d:{"id":"4c6b86b86ee7e7c3","slug":null,"title":"Assignment 5: Bivariate Choropleth Mapping","thumbnail":"7aedcd94699b68eb6e8993d161e7d0df3d8bc023e06716cba07d58e589446d53","access_level":"public","create_time":"$D2023-04-03T16:09:45.601Z","update_time":"$D2023-04-10T16:40:51.815Z","view_time":null,"first_public_time":"$D2023-04-03T16:09:45.601Z","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":"a4763cc1d142b3c4","login":"miahboyle","name":"miahboyle","avatar_url":"https://avatars-next.observableusercontent.com/422b5b3cc75b43abebc201c491f98eeefe1edd5f9db0d7e0630a5e3e0d07b784","tier":"starter_2024"},"version":668,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d59253cef89da81f","login":"miahboyle","name":"miahboyle","avatar_url":"https://avatars-next.observableusercontent.com/422b5b3cc75b43abebc201c491f98eeefe1edd5f9db0d7e0630a5e3e0d07b784","tier":null}],"members":[{"type":"individual","id":"d59253cef89da81f","login":"miahboyle","name":"miahboyle","avatar_url":"https://avatars-next.observableusercontent.com/422b5b3cc75b43abebc201c491f98eeefe1edd5f9db0d7e0630a5e3e0d07b784","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Assignment 5: Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Assignment 5: Bivariate Choropleth Mapping\nMiah Boyle\n\nTitle: Percent living below the 185% poverty line and Percent whose primary language is not English`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":562,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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(670,400)\");\n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(670,500)\")\n .append(() =>\n legend({\n color: nullcolorforlegend,\n title: \"No Data\",\n width: 50,\n tickFormat: \".1f\"\n })\n );\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.MinnesotaCensusCAFO_ExportFeature).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${format(data.get(d.properties[idAttribute]))}`);\n \n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":596,"value":"The above colors are pretty standard for use in bivariate mapping and have been tested for usability. You can add another color scheme by adding another name: and colors: code block section, but it is not necessary. \n\nOften times, sequential/sequential color shemes are used in bivariate mapping. The mixture of these hues, if complementary colors, can then form a more neutral grey color in their diagonal or a third hue as the map above shows (purple and yellow mix to form a darker orange color). It is important that the lightness differences throughout the both color are systemic and increase or decrease in the same magnitude for each step in each sequential scheme. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":550,"value":"nancolor = d3.color(\"black\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"nullcolorforlegend = d3.scaleOrdinal()\n .domain([NaN])\n .range([nancolor])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"\nprojection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"data_filter= Array.from(csv_data.values(), d => d[1][0]).filter(d => d >= 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.MinnesotaCensusCAFO_ExportFeature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"//data2 = Object.assign(new Map(d3.csvParse(await FileAttachment(\"ej_mpca_census (1).csv\").text(), ({tractce, totnoneng, pop185x, totpov}) => [tractce, [+totnoneng/+totpov, +pop185x/+totpov]])), {title: [\"% non-english\", \"% poverty\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"csv_data= d3.csvParse(await FileAttachment(\"ej_mpca_census (1).csv\").text(), ({tractce, totnoneng, pop185x, totpov}) => [tractce, [+totnoneng/+totpov, +pop185x/+totpov]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"data= Object.assign(new Map(csv_data),{title: [\"% non-english\", \"% poverty\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"TRACTCE\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"Specify what attribute you will use as your ID from the polygon topojson file. In this example, each polygon in the topojson file will use the attribute \"TRACTCE\" to match up with attribute data from the csv file, which has the same identifier under the name \"tractce\". ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"MinnesotaCensusCAFO_ExportFeature.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"Read in your topojson file to read in the polygon features you will use for your map. In this example, the Minnesota census tracts are used as our polygon object. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 875","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"For the code below: you do NOT need to change any of this code if you are forking this notebook to create a new bivariate map. You can keep all the code below the same!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"Creates legend that is at a 45 degree angle to assist users in understanding high/high and low/low values. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"id":581,"value":"Returns your colors for the various color shcemes you may choose to use. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":474,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${formatNum((a) * 100)} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum((b) *100)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":579,"value":"The above code formats the values and the lables for your legend and in your data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"