${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 | Grace Shipley | Observable"}] 2f:T44c,legend = () => { const k = 32; 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]} `; }30:[{"id":"82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","href":"https://static.observableusercontent.com/files/82f188163ef9258279c4e2c841c93624c6c29f4a931b80c734bfe72096787302dbef79ab9780e393f4a5fd78e351a482a9bb294f23607d609a9c8e1c90dacea9","name":"chicago_tracts_2010_cleaned.csv","type":"text/csv","lastModified":1681151338800.879,"size":377202},{"id":"6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","href":"https://static.observableusercontent.com/files/6bbcf2e3a9fd2cf3d066de38592cb077a55e80dc6edf1bdc35d1708ad4d37ae1c0ad59a4e3dd39b4c7a38c3c4f88a197350c8e2d576f626922625f456a86d54c","name":"chicago_tracts_2010_cleaned.json","type":"application/json","lastModified":1681151338800.879,"size":1725175},{"id":"29d3dc20dd53ff9f0a893289f0488b69a14832ecc5e9a37068e8e96486c96fb933dde9b913d49067125546a6ee816224d7985caadad2a908038658006aebd08d","href":"https://static.observableusercontent.com/files/29d3dc20dd53ff9f0a893289f0488b69a14832ecc5e9a37068e8e96486c96fb933dde9b913d49067125546a6ee816224d7985caadad2a908038658006aebd08d","name":"LAcityDemo.json","type":"application/json","lastModified":1681152352220.073,"size":2261308},{"id":"f8f1298290079a98fa5acd036fcfa4f5663a3ee94e0b4e4aa12899ca625e93dec2e847acd09bf9d7340ccd7a873e65a7a6aac222a1cbb5ec0f8465aaeff7d188","href":"https://static.observableusercontent.com/files/f8f1298290079a98fa5acd036fcfa4f5663a3ee94e0b4e4aa12899ca625e93dec2e847acd09bf9d7340ccd7a873e65a7a6aac222a1cbb5ec0f8465aaeff7d188","name":"Los_Angeles_Demographics_2018@2.csv","type":"text/csv","lastModified":1681154896768.795,"size":560381}] 2d:{"id":"58d40bdb9e80f480","slug":null,"title":"Assignment 5: Bivariate Choropleth Mapping","thumbnail":"c97a6cfca8d6300444e35246b895ce261e0a6bbf7e7571ea5359c082a4a3d295","access_level":"public","create_time":"$D2023-04-10T18:28:58.800Z","update_time":"$D2023-04-16T05:46:35.417Z","view_time":null,"first_public_time":"$D2023-04-10T18:28:58.800Z","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":"e889a252f3353f1c","login":"ship-ley","name":"Grace Shipley","avatar_url":"https://avatars-next.observableusercontent.com/66ccc1785668785ac94494078eb22061898dffa30a5fe6141e6480638baa2fd0","tier":"starter_2024"},"version":594,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2d93c7f8c64429b","login":"ship-ley","name":"Grace Shipley","avatar_url":"https://avatars-next.observableusercontent.com/66ccc1785668785ac94494078eb22061898dffa30a5fe6141e6480638baa2fd0","tier":null}],"members":[{"type":"individual","id":"b2d93c7f8c64429b","login":"ship-ley","name":"Grace Shipley","avatar_url":"https://avatars-next.observableusercontent.com/66ccc1785668785ac94494078eb22061898dffa30a5fe6141e6480638baa2fd0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 5: Bivariate Choropleth Mapping","cells":[{"id":0,"value":"md`# Assignment 5: Bivariate Choropleth Mapping\nAverage Household Income and % Baby Boomer of Los Angeles [2018]`","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(300,450)\");\n\n //svg.append(\"g\")\n // .attr(\"transform\", \"translate(700,270)\")\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.LAcityDemo).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\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"nullcolorforlegend = d3.scaleOrdinal()\n .domain([\"N/A\"])\n .range([\"black\"])","pinned":true,"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.\nprojection = d3.geoTransverseMercator().rotate([119,0]).fitExtent([[10, 10], [width, height]], polygon_features);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.LAcityDemo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"Los_Angeles_Demographics_2018@2.csv\").text(), ({ID, AVGHINC_FY, BABYBOOMCY, TOTPOP_CY}) => [ID, [+AVGHINC_FY, 100*+BABYBOOMCY/+TOTPOP_CY]])), {title: [\"Average Income\", \"% Baby Boomer\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"ID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"LAcityDemo.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":"$2f","pinned":true,"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":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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"