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

2b:null 2c:["$","title",null,{"children":"Ronan's Bivariate Choropleth Map | Ronan Kleu | Observable"}] 31:T46c,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]} `; } //creates the customized legend32:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1680835366072.729,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1680835366072.729,"size":1725175},{"id":"ee4bbd7d17857f0f07fac34bd7c00f5506351d3cf582b8a765d110b2c0bf92a48228f721294580a344d0c9c96a1eb0e825a22e8e5d326926a73a89eb7269f2e6","href":"https://static.observableusercontent.com/files/ee4bbd7d17857f0f07fac34bd7c00f5506351d3cf582b8a765d110b2c0bf92a48228f721294580a344d0c9c96a1eb0e825a22e8e5d326926a73a89eb7269f2e6","name":"CSV.numbers","type":"application/zip","lastModified":1680839817178.472,"size":626318},{"id":"c078a0fbae872931c21f78141da3aa3c9faba23802d11354505c65a28c8116a42e4ab968c591a8a6d7a690f1869ae5a54a950688e4b4f857ed09e323470d2853","href":"https://static.observableusercontent.com/files/c078a0fbae872931c21f78141da3aa3c9faba23802d11354505c65a28c8116a42e4ab968c591a8a6d7a690f1869ae5a54a950688e4b4f857ed09e323470d2853","name":"GeoJSON.json","type":"application/json","lastModified":1680839835771.77,"size":1414354},{"id":"b8d817f3d52a2bd5531a13d9f66e6ac008b7333f0f853366eebea6b1e1437f992218b5e5ed2b63746f465ee626aa2f5e452b3db9f50329f3565801f97d4579fc","href":"https://static.observableusercontent.com/files/b8d817f3d52a2bd5531a13d9f66e6ac008b7333f0f853366eebea6b1e1437f992218b5e5ed2b63746f465ee626aa2f5e452b3db9f50329f3565801f97d4579fc","name":"CSVcsv.csv","type":"text/csv","lastModified":1680839871695.685,"size":135367}] 2f:{"id":"cd3b063758ce2332","slug":null,"title":"Ronan's Bivariate Choropleth Map","thumbnail":"ea1de90d6040c40e16e1cf1c6de3ac975785b9240f5c5fe3940b17484c358e95","access_level":"public","create_time":"$D2023-04-07T02:42:46.072Z","update_time":"$D2023-04-23T02:25:07.872Z","view_time":null,"first_public_time":"$D2023-04-07T02:42:46.072Z","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":"625e764f7d641fb4","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":"starter_2024"},"version":562,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"912fbf361e266aea","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":null}],"members":[{"type":"individual","id":"912fbf361e266aea","login":"ronankleu","name":"Ronan Kleu","avatar_url":"https://avatars-next.observableusercontent.com/09c829256b07cebdd295cc03703f88251cb50916211ecbf7d52da69e82bcec37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Ronan's Bivariate Choropleth Map","cells":[{"id":0,"value":"md`# Ronan's Bivariate Choropleth Map\nLand Area and Water Area in Allegheny County, PA\n\nData: Data.Gov`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"Spatial patterns: This map of Allegheny County which encloses Pittsburgh shows the distribution of the total amount of water and the total amount of land per area. The darkest shade shows a large amount of both, whereas lighter shades represent a predominance of either land or water. Using the purple orange as an example, the brown denotes a high ratio of both land and water, the yellowish more land, the purple more water and the whitish little of both, which won't be the case often. It's interesting to see that there is no tract where water isn't very prevalent. Upon closer inspection on Google Maps, this makes sense as there are a multitude of creeks that run through those tracts. The areas which are dominated by water around Pittsburgh are due to the convergence of the Ohio, Allegheny and Monongahela Rivers. Please note that this represents a ratio rather than the absolute area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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(70,250)\");\n //place of the legend\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.GeoJSON).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 //the chunk of code above is what I'm referencing with the hover over.\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"In the top cell, .append and .text is used to make the hover over display of text. The .text() method is used to set the text content of an SVG element. In this particular code snippet, the d parameter represents the current data element being processed.\n\nThe string that is being passed to the .text() method includes the value of the idAttribute property of the properties object of the current data element d, followed by a comma and a space, and then the formatted value of the data associated with the idAttribute property of the data object.\n\nThis code essentially creates a tooltip that displays the value of the idAttribute property of each data element along with its corresponding data value.","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 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":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)\n//assign the projection to a path","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([87,0]).fitExtent([[10, 10], [width, height]], polygon_features);\n//import topojson, define the projection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.GeoJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"CSVcsv.csv\").text(), ({GEOID, AWATER, ALAND}) => [GEOID, [+AWATER, +ALAND]])), {title: [\"Total Water Per Area\", \"Total Land Per Area\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"\n//chooses with id to target from the csv file","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"GeoJSON.json\").json()\n//polygon features","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\n//canvas width and height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"The cell above creates the customized legend. It is rather standardized so I didn't alter the code, however, to change where it shows up in the map, I altered the numbers in this part of the code further up: \n\nsvg.append(legend)\n .attr(\"transform\", \"translate(70,250)\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"The function above denotes how the colors are assigned within the map. The options we have here for bivariate mapping are blue-green, red-blue, blue-purple and purple-orange. These are the best colours for bivariate maps. To add an additional scheme, we'd add it in the same format as the other colour schemes in the cell above denoted \"schemes\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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}\n//formats for the labels","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":542,"value":"To join the geometries that come with a TopoJson file with the attributes that come with a CSV file I used QGIS. I first converted the GeoJson to a TopoJson using QGIS and then used it to create a layer with the geometries. Next, I imported the CSV file and used the column which was the unique identifier to join the two. This can be done using the \"Join attributes by field value\" tool in QGIS. In this instance it is the field \"GEOID\". I then had a layer to export which included the geometries and attributes from the CSV file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"