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

29:null 2a:["$","title",null,{"children":"Bivariate Choropleth Mapping | Camille Lust | Observable"}] 2f:T4ba,md`## Interpretation of Spatial Patterns Overall, it does seem like there is some overall clustering of similar classes near each other. For example, in the west central part of the state, there are multiple counties that have a high percentage of black population and low of white. On the flipside, it seems like in the northeastern part of the state, there is a cluster of high white population percentage with low black. There also seems to be a cluster in the middle of the low white and low black population percentages. This implies that in this area there is a different race that is the most prevelant in the area. It does also seem that as you move into more populated areas that there is more of a mix of population percentages and more of those middle/medium colors are represented. This might mean that there is more diversity in these counties and that the rest of the population is made up of other demographic/racial groups. The only county where we have a high-high classification is in the east central part of the state. This is where the second largest city in Washington is located, so it makes at least a little sense that this would be where we would have the high-high classification. `30: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]} `; }31:Ta99,md`# Cheat Sheet **1. How do you join the geometries that come with the topojson file with the attributes that come with a csv file?** You join the topojson to the csv file through this line of code: *//data = Object.assign(new Map(d3.csvParse(await FileAttachment("County2010washWGS84.dbf.csv").text(), ({COUNTYFP10, POP10 , POPBLACK, POPWHITE }) => [COUNTYFP10, [100*+POPWHITE/+POP10, 100*+POPBLACK/+POP10]])), {title: ["% White", "% Black"]})* This is where the values that we have calculated from our csv are joined to the polygons that we added, joining them through the identifier, in this case COUNTYFP10. **2. Which colors are used for bivariate mapping on observable? Explain how to add a new bivariate color scheme. ** The colors that are used for bivariate mapping originally on this notebook are pretty common, optimized color schemes for bivariate mapping. If you wanted to add a new color scheme, you could go into the 'schemes' section of this notebook and paste the hex codes for the colors that you wanted into it. You could either replace the existing colors or you could add an extra color scheme by following the formatting for the other schemes and adding a new one below those. And while you could techinically use any colors that you wanted in a legend, it is reccomended that you use color schemes that help to improve understanding. For example, in bivariate color schemes if both variables/attributes are unipolar, then you should use two continuous color schemes (from light to dark for example). If both vairbales are bipolar, then you should use two diverging color schemes, etc. You should also in general try to have the whole legend go from light to dark from bottom to top to increase understanding of the legend for users. This would help users to better see that low-lows are light and then high-highs are dark (for example). **3.How do you create a legend? How do you position the legend so it is not hidden behind the map? ** You create a legend with the code under the 'legend' section. In this case, there is extra code there to ensure that the legend is at a 45 degree angle to help users understand the legend better. There is also some code under 'format' that impacts the formatting of the values of the legend. You position the legend so it is not behind the map by adusting the numbers/position under 'svg.append(legend)' and then within 'translate' is where you can adjust the numbers to adjust the position. You can think of it kind of like x,y coordinates for where your legend is going to be positioned. **4. How do the values get displayed when you hover over each polygon?** The values get displayed when you hover over each polygon by this:` 32:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680372366451.426,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680372366451.426,"size":1725175},{"id":"39e46cd084a4cf3c449b88ebfa8b2069fbdca01d3a6c1372c642de80ef6eca2d573596b3c084d1998e5ec687614168f97e29d762eee144c70df0aa1da5267bd2","href":"https://static.observableusercontent.com/files/39e46cd084a4cf3c449b88ebfa8b2069fbdca01d3a6c1372c642de80ef6eca2d573596b3c084d1998e5ec687614168f97e29d762eee144c70df0aa1da5267bd2","name":"County2010washWGS84.dbf.csv","type":"text/csv","lastModified":1680381465969.182,"size":12097},{"id":"c4bc42bb565c67d7af9c632ebab024dc62b5a5661a5c2dd0796aa4aa7ac6ed8b04bc37050a41e19d8da14f12a1db9d61ba088842ec61650ce298bd25f8812572","href":"https://static.observableusercontent.com/files/c4bc42bb565c67d7af9c632ebab024dc62b5a5661a5c2dd0796aa4aa7ac6ed8b04bc37050a41e19d8da14f12a1db9d61ba088842ec61650ce298bd25f8812572","name":"County2010washWGS84.json","type":"application/json","lastModified":1680381466128.2,"size":517621},{"id":"09f9c48fe933ab8e9c3fed5e0dd08461b541f9f8d01f359a2b6c2a0b7c4bf3e52e1859196210fda2c79c684316ec1f149895558e4d36292b533022d928ad5656","href":"https://static.observableusercontent.com/files/09f9c48fe933ab8e9c3fed5e0dd08461b541f9f8d01f359a2b6c2a0b7c4bf3e52e1859196210fda2c79c684316ec1f149895558e4d36292b533022d928ad5656","name":"Screenshot 2023-04-02 at 3.03.05 PM.png","type":"image/png","lastModified":1680465806639.899,"size":31552}] 2d:{"id":"981227f55046b011","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"b75ec862b1da0838414ce2991baababf5511192c024724514e804fd19e5d6280","access_level":"public","create_time":"$D2023-04-01T18:06:06.451Z","update_time":"$D2023-05-01T00:25:42.260Z","view_time":null,"first_public_time":"$D2023-04-01T18:06:06.451Z","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":"2a325a1ace3aa5d7","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":"starter_2024"},"version":604,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null}],"members":[{"type":"individual","id":"d5b41e509b598772","login":"camillelust","name":"Camille Lust","avatar_url":"https://avatars-next.observableusercontent.com/4f05fcc8a124015b3715477d74eaa6207ff13dc89bb94e846fca6e6e7739be7c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\n% White v. % Black in the State of Washington by County Data: [Census 2010]`","pinned":false,"hidden":false,"mode":"ojs","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(85,75)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.County2010washWGS84).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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","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":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":"//Rotate the map sets the longitude of origin for our UTM projection.\n//projection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], polygon_features);\nprojection = d3.geoTransverseMercator().rotate([120,0]).fitExtent([[70, 70], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.County2010washWGS84)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"County2010washWGS84.dbf.csv\").text(), ({COUNTYFP10, POP10 , POPBLACK, POPWHITE }) => [COUNTYFP10, [100*+POPWHITE/+POP10, 100*+POPBLACK/+POP10]])), {title: [\"% White\", \"% Black\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"COUNTYFP10\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"md`##### assigning this to the variable so that if you were to put in a different dataset with a different identifier, you only have to change it here instead of everywhere that it is used.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"County2010washWGS84.json\").json()","pinned":true,"hidden":false,"mode":"ojs","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":480,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"md`#### creates the customized legend - the bivariate tilted at the 45% angle, helping users to better understand and use the legend.`","pinned":false,"hidden":false,"mode":"ojs","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":513,"value":"formatNum = d3.format(\".1f\")","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 `${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"},{"id":516,"value":"md`#### Formats the values in the legend`","pinned":false,"hidden":false,"mode":"ojs","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"},{"id":582,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"screenshot20230402At30305Pm = FileAttachment(\"Screenshot 2023-04-02 at 3.03.05 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"md`#### Q4 cont.\nThis gets first the attribute of the ID for the polygon that you are hovering over and then connects that with the csv data that we joined to our attributes to show the values that we calculated in making our new, normalized attributes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"