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

2b:null 2c:["$","title",null,{"children":"Bivariate Choropleth Mapping | Mattison Belardo | Observable"}] 31:T496,### Which colors are used for bivariate mapping on Observable? The colors used for the map above are variations of the base colors yellow and blue. As both factors become very high in the data set (total land and water per area) the color becomes dark green. As both factors become less present in the data set (total land and water per area) the color becomes light grey. Therefore making the color scheme, RGB, the perfect fit for this map because the colors accurately represent what the landscape would look like in those specific conditions. ### Explain how to add a new bivariate color scheme. To add a new bivariate color scheme, you need to add a new object in the schemes array. This object should include a name attribute and an array of colors. The colors should be arranged in order from lightest to darkest, with the lightest color representing the lowest values and the darkest color representing the highest values. The array should have x * x elements, where n is the number of distinct values in each data dimension . After adding the new color scheme, you need to update the color function to use the new colors and the legend to display the new colors.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":1680561793080.269,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680561793080.269,"size":1725175},{"id":"ec91f7b419ab2f49ef736e8f4bf7353497314fa3bfced57889c650d88d101d2f7848aaad5db05adb8789714fda52b32e88f326c0bb959e0327aeb75350729291","href":"https://static.observableusercontent.com/files/ec91f7b419ab2f49ef736e8f4bf7353497314fa3bfced57889c650d88d101d2f7848aaad5db05adb8789714fda52b32e88f326c0bb959e0327aeb75350729291","name":"VA.csv","type":"text/csv","lastModified":1680563798890.523,"size":75892},{"id":"f4a3d063134a6e6203e394b6295da4e8d7f4d6a98257ce932f398593e52e7501931147854b8801d661187b5340b50074f6df42cb87a0563f4050d1bac6fc1c89","href":"https://static.observableusercontent.com/files/f4a3d063134a6e6203e394b6295da4e8d7f4d6a98257ce932f398593e52e7501931147854b8801d661187b5340b50074f6df42cb87a0563f4050d1bac6fc1c89","name":"VA.json","type":"application/json","lastModified":1680563807544.155,"size":4906581}] 2f:{"id":"fa43353b846d6691","slug":null,"title":"Bivariate Choropleth Mapping","thumbnail":"53474e77fb4e1169417a4fc54ef302d5b47558489118945f5d2cdd11e7c2ccd1","access_level":"public","create_time":"$D2023-04-03T22:43:13.080Z","update_time":"$D2023-04-25T03:15:36.287Z","view_time":null,"first_public_time":"$D2023-04-03T22:43:13.080Z","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":"1f53a26ef1def300","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":"starter_2024"},"version":578,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null}],"members":[{"type":"individual","id":"0f0397a3785cb0d0","login":"mattison-belardo","name":"Mattison Belardo","avatar_url":"https://avatars-next.observableusercontent.com/f7cfdfa9e2d98f697975b192177a4c1022c7c82d6dc1f503fd2783305fa6ebfc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping\n\nTotal Land Per Area and Total Water Per Area in Virginia County Subdivisions for the year 2016\n\nLink to data - https://catalog.data.gov/dataset/tiger-line-shapefile-2016-state-virginia-current-county-subdivision-state-based\n`","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":547,"value":"### Map Interpretation\n\nThe patterns displayed on this map are exactly what you would expect. All the counties in Virginia that are predominately covered in water as apposes to land (which is represented by the darkest shade of blue) are on the eastern side of the state. This makes sense considering the Atlantic sea boarders the east coast of Virginia. As you move towards the western counties in Virginia the counties become more covered in land than water. This makes sense because they are moving towards the mountains and away from the sea (which is represented by the darkest shade of yellow).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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(100,250)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.VA).features)\n .join(\"path\")\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":561,"value":"### How do you create a legend? How do you position the legend so it is not hidden behind the map?\nTo create a legend, you can use the legend() function defined in the code above. This function returns a element containing a grid of color rectangles, two lines to indicate the x and y axes of the legend, and two text elements to indicate the two data titles. The legend is positioned by using the 'translate' attribute on the element to move it away from the map. In this case, the legend is positioned at the bottom right of the map using the 'translate(100, 250)' attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":564,"value":"### How do the values get displayed when you hover over each polygon?\nThe part of the code that allows the values to be displayed when hovering over each polygon is the one that appends a title to each polygon containing the values for the two attributes being mapped. This is done by using the .append() and .text() functions. The format() function is used to format the values into the desired \"a x title1 (label1) b y title2 (label2)\" format, which is then displayed when hovering over each polygon.","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// I will be using this specific color scheme for my map\n name: \"RGB\", \n colors: [\n \"#e8e8e8\", \"#9abfd0\", \"#4b96b8\", \n \"#e8cb7e\", \"#9aa771\", \"#4b8364\", \n \"#e9aa01\", \"#9b8c01\", \"#4c6e01\"]\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":577,"value":"# Color Function \nThe code above is an array of objects that contains color schemes for a bivariate choropleth map. The object properties are the name of the color scheme and an array of colors that correspond to it.","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":462,"value":"//Rotate the map sets the longitude of origin for our UTM projection.\nprojection = d3.geoTransverseMercator().rotate([80,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.VA)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"### How do you join the geometries that come with the topojson file with the attributes that come with a csv file?\n\nYou can join the geometries and attributes by using the Object.assign() function to create a map of the csv data with the GEOID as the key. You can then use the GEOID to access the attribute data corresponding to each geometry in the topojson file.","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(\"VA.csv\").text(), ({GEOID, ALAND, AWATER}) => [GEOID, [+ALAND, +AWATER]])), {title: [\"Total Land Area\", \"Total Water Area\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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(\"VA.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","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"},{"id":575,"value":"### Description \nThis bivariate map of Virginia displays the total land and water area per county. The map uses a color scheme that ranges from light gray to dark green, with the lightest color representing the lowest values and the darkest color representing the highest values. The legend explains the color scheme and the hover feature displays the exact values of the two data sets being mapped. The map was created by joining the geometries from the topojson file with the attributes from the csv file, utilizing the GEOID as the key. This allows for an accurate representation of the land and water area in each county of Virginia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"