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

2d:null 2e:["$","title",null,{"children":"Bivariate Choropleth Mapping | falakjalali | Observable"}] 33:T410,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append(legend) .attr("transform", "translate(700,450)"); svg.append("g") .selectAll("path") .data(topojson.feature(polygons, polygons.objects.St).features) .join("path") .attr("stroke","grey") .attr("fill", d => color(data.get(d.properties[idAttribute]))) .attr("d", path) .append("title") .text(d => `${d.properties[idAttribute]}, ${format(data.get(d.properties[idAttribute]))}`); svg.selectAll(".subunit-label") .data(polygon_features.features) .enter().append("text") .attr("class", function(d) { return "subunit-label " + d.id; }) .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) .attr("fill", "black") .attr("fill-opacity", "1") .attr("font-size", "10px") .attr("font-weight", "100") .attr("text-anchor", "middle") .text(function(d) { return d.properties.NAME; }) return svg.node(); }34: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]} `; }35:[{"id":"b729195e2dd3d4c671ee6c986a1d70166f9d1bb244be0489b53cf93137918e6ddf9b91ac729df56d304042114618640fb3946e8feef5487bfb082d61079872bd","href":"https://static.observableusercontent.com/files/b729195e2dd3d4c671ee6c986a1d70166f9d1bb244be0489b53cf93137918e6ddf9b91ac729df56d304042114618640fb3946e8feef5487bfb082d61079872bd","name":"St.Louiscounty@1.csv","type":"text/csv","lastModified":1617860678682.144,"size":5115},{"id":"70d9811c84391038cce248350ba1704eeb4232bc44d0133f06d77e5cd4c12594bb69cc15952639907c72e03e4d0cd1d357f036c393d6a658541fe633d6248ccf","href":"https://static.observableusercontent.com/files/70d9811c84391038cce248350ba1704eeb4232bc44d0133f06d77e5cd4c12594bb69cc15952639907c72e03e4d0cd1d357f036c393d6a658541fe633d6248ccf","name":"St.Louiscensustract_wgs84.json","type":"application/json","lastModified":1617860678868.135,"size":33694}] 31:{"id":"bd33270bc33a54db","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"5ce9062e315a809d8af9ab289a491429e1e8b4ad5a130b8db99cd9da766d7205","access_level":"public","create_time":"$D2021-04-08T05:44:38.327Z","update_time":"$D2021-04-08T22:50:31.113Z","view_time":null,"first_public_time":"$D2021-04-08T05:45:03.425Z","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":"7bc7ae4529df01f8","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":"starter_2024"},"version":552,"publish_version":552,"role":null,"authored":false,"authors":[{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","tier":null}],"members":[{"type":"individual","id":"df8327bdad75018c","login":"falakjalali","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3221eabe1fe7e7ff516b7ce0c6577ea7fa5e9cff937768055dbf29289dc6f8be","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\nAverage Household Size and % Renter Occupied by Census Tracts of Chicago Metropolitan Area. Data: [Census 2010]`","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":"$33","pinned":true,"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: [\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)","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.geoConicConformal()\n .parallels([45 + 37 / 60, 47 + 3 / 60])\n .rotate([94 + 15 / 60, 0]).fitExtent([[20, 20], [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.St)","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(\"St.Louiscounty@1.csv\").text(), ({AFFGEOID,ALAND,AWATER}) => [+AFFGEOID, [+ALAND,+AWATER]])), {title: [\"Land\", \"Water\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"AFFGEOID\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"St.Louiscensustract_wgs84.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":"$34","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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"