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

2d:null 2e:["$","title",null,{"children":"Bivariate Choropleth Mapping | kschlotfelt | Observable"}] 33:T41a,md`What we're doing here is creating a bivariate (two variable) map with a drop-down menu for picking different color schemes. A biavatriate or multivariate map takes multiple variables and displays them on one map using a set of thematic symbols. So, these can be made with choropleth, as we do in this assignment, or cartogram or proportional symbols or a mix of any of those. The key with bivariate maps is that you want your data to be normalized otherwise you can't really compare the data. That's partially why I went with percentages of the population to compare. Below, we have our bivariate map that is looking at the % of the pop with a bachelors degree or higher and the % of the pop below the poverty line in Washington state. We have a handy drop-down menu where the user can decide which color scheme to use out of the options provided in the variable "scheme." In the function for the map, we can move our legend around as needed and bring together our topojson and csv data together by linking them up with the census tract number. `34:T44c,legend = () => { const k = 28; 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]} `; }35:[{"id":"45e869f5107dc226c79b00844794d60b7c08f5748ef0a4ed4243e1baab450e830a08edeaab4a108c54d6b7a93d3b48f45d5b727cf8c1ee731033a5a36332bba7","href":"https://static.observableusercontent.com/files/45e869f5107dc226c79b00844794d60b7c08f5748ef0a4ed4243e1baab450e830a08edeaab4a108c54d6b7a93d3b48f45d5b727cf8c1ee731033a5a36332bba7","name":"Wash_state_WGS84 (1).json","type":"application/json","lastModified":1617632421934.733,"size":916419},{"id":"88b59bbad894052551448587c6a13a5875d61fe4a82c7f0e71eee659a3a69a9b16f3b7859881ca14fcf6f1cda3369a7f02747ed80701eda1b339d1aa7b7530d1","href":"https://static.observableusercontent.com/files/88b59bbad894052551448587c6a13a5875d61fe4a82c7f0e71eee659a3a69a9b16f3b7859881ca14fcf6f1cda3369a7f02747ed80701eda1b339d1aa7b7530d1","name":"Wash_data_clean2019@2.csv","type":"text/csv","lastModified":1617639417624.651,"size":145127}] 31:{"id":"d27ef39566ffaddc","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"8f95860bf606f8ca71a6d965f96b23490d4f03b75e7f44fc8209ddfcf4f3ccde","access_level":"public","create_time":"$D2021-04-05T14:16:23.757Z","update_time":"$D2021-04-10T21:42:57.955Z","view_time":null,"first_public_time":"$D2021-04-10T21:13:07.472Z","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":"a6b54836bf2ba944","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":"starter_2024"},"version":841,"publish_version":841,"role":null,"authored":false,"authors":[{"type":"individual","id":"609bb7bef6c86031","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":null}],"members":[{"type":"individual","id":"609bb7bef6c86031","login":"kschlotfelt","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7569a776bf0ef00222bd619b2664d9a2eb1178109711d54b5d3e77d0e44c9f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"md`#### Percent of the Population with a Bachelor's Degree or higher and Percent of the Population Below the Poverty Line by Census Tracts of Washington State [ACS 2019]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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(130,120)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Wash_state_WGS84).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// ${d.properties[idAttribute]}\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`Above you can hover over each census tract to see the percentages of the two variables. There's one larger tract that displays black and that's becuase in the data there are 0s in the data. I tried to figure out what was going on in that tract that would cause the data to show that there was no population there and I couldn't find an answer.\n\nBelow is the code for our color schemes. We had 4 already and I added one more - PnkPur. I looked at colorbrewer2.org for different color schemes. I started with their pink/purple scheme, but thought that the two lightest pinks were too close to white and I had to look for slightly darker shades of pink that still fit into the sequential scheme that I was going for. In this section, we have names given to each of the color schemes that are then brought into the drop-down legend in the final map above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\nschemes = [\n {\n name: \"RdBu\", \n colors: [\"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\"#b0d5df\", \"#ad9ea5\", \"#985356\",\"#64acbe\", \"#627f8c\", \"#574249\"]\n },\n {\n name: \"BuPu\", \n colors: [\"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\"#dfb0d6\", \"#a5add3\", \"#5698b9\", \"#be64ac\", \"#8c62aa\", \"#3b4994\"]\n },\n {\n name: \"GnBu\", \n colors: [\"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\"#b8d6be\", \"#90b2b3\", \"#567994\",\"#73ae80\", \"#5a9178\", \"#2a5a5b\"]\n },\n {\n name: \"PuOr\", \n colors: [\"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\"#cbb8d7\",\"#c8ada0\",\"#af8e53\",\"#9972af\", \"#976b82\",\"#804d36\"]\n },\n {\n name: \"PnkPur\", \n colors: [`#FFF0F5`,'#FFE4E1','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177',`#49006a`]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoAlbers().rotate([120,0]).fitExtent([[30,30], [width, height]], polygon_features);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Wash_state_WGS84)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"md`In our data variable we bring in our csv data and pull out the geo id to link with the topojson geo id and the population data that we want. I also wanted to have a more specific census tract name show, so I brought in that data and had to modify the format function at the bottom.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"Wash_data_clean2019@2.csv\").text(), ({GEO_ID, TwentyFiveup_bachUp, below_pov_eighteenup, totpop, DataNAME}) => [GEO_ID, [100*+TwentyFiveup_bachUp/+totpop, 100*+below_pov_eighteenup/+totpop, DataNAME]])), {title: [\"% Bachelor's Degree or up\", \"% below poverty\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"AFFGEOID\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Wash_state_WGS84 (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md`Below is where we can play around with the size, shape, rotation, etc. of the legend.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"md`The colors in a bivariate map are incredibly important. You start with a set of three hues for each variable - light to dark - but that only gives you 6 classes, so you need to figure out the other three colors. Now, the first two sets of colors should be fairly different from each other so that you can clearly see the difference in your data classes. If you read through this article( https://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/ ) he walks you through the steps to create your own bivariate color scheme. I used colorbrewer2.org and modified a sequential scheme. But essentially what you want to do is to layer your two color schemes, so that there is a new set of colors. `","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"md`The next two functions allow us to play around with our formating of the display of our data in the text windows. formatNum is where we can define how many decimals we want - otherwise you may have a long string of numbers that are hard to read. Then in the format function, we bring that and the data together. So, by changing the return, we're able to arrange the order of the text in the final map. I wanted it to display \"census tract, county: %data, %data\" and this is where you are able to do that easily.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum = d3.format(\".1f\")","pinned":false,"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, c] = value;\n return `${(c)}: ${formatNum(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","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`Below are the libraries we needed to import and use.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"