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

2a:null 2b:["$","title",null,{"children":"Bivariate Choropleth Mapping: Median Age vs. Poverty Status in DuPage County, IL | jposka | Observable"}] 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:[{"id":"0ee8ced172fbd78105d3a6ef152177e05fb7852d601a806de5c0ed853360954dd62653d11e373dba9e5135ff75eaa66783654036c4efc49fb6c3dcf94a199d01","href":"https://static.observableusercontent.com/files/0ee8ced172fbd78105d3a6ef152177e05fb7852d601a806de5c0ed853360954dd62653d11e373dba9e5135ff75eaa66783654036c4efc49fb6c3dcf94a199d01","name":"CountyTable.csv","type":"text/csv","lastModified":1586300172170.109,"size":47576},{"id":"03c05e03889b85d7132be563f2232336dca09d5f8f3bb9a96cce74e800e379cdaa6522cd2a2ceba4d7d100e4785f12d0a105cb978bde4ed97b3b99a14f56cd53","href":"https://static.observableusercontent.com/files/03c05e03889b85d7132be563f2232336dca09d5f8f3bb9a96cce74e800e379cdaa6522cd2a2ceba4d7d100e4785f12d0a105cb978bde4ed97b3b99a14f56cd53","name":"Dupage_Tracts.json","type":"application/json","lastModified":1586300698811.259,"size":279204}] 2e:{"id":"ea2fd132e0e3b103","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping: Median Age vs. Poverty Status in DuPage County, IL","thumbnail":"4e2bd6f278d7ebc31bee876789542c08297a52ea7c9fe9bd6fb80864ecd530cf","access_level":"public","create_time":"$D2020-04-07T19:17:31.335Z","update_time":"$D2020-04-14T19:25:51.060Z","view_time":null,"first_public_time":"$D2020-04-08T01:04:28.112Z","fork":{"id":"de68dfd4266dab75","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","owner":{"id":"1522f7962f5f1185","login":"caglarkoylu","name":"Caglar Koylu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a1d3a3b1dafb35c2","login":"jposka","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d7ee6abfbbac262bb737c3b497a4acfb2ec69ad57f47af186da4c8e73ac0ae67","tier":"starter_2024"},"version":656,"publish_version":656,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c748f00a83e1635","login":"jposka","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d7ee6abfbbac262bb737c3b497a4acfb2ec69ad57f47af186da4c8e73ac0ae67","tier":null}],"members":[{"type":"individual","id":"7c748f00a83e1635","login":"jposka","name":"","avatar_url":"https://avatars-next.observableusercontent.com/d7ee6abfbbac262bb737c3b497a4acfb2ec69ad57f47af186da4c8e73ac0ae67","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Bivariate Choropleth Mapping: Median Age vs. Poverty Status in DuPage County, IL","cells":[{"id":0,"value":"md`# Bivariate Choropleth Mapping: Median Age vs. Poverty Status in DuPage County, IL\n\nData: [American Community Survey 5-year averages 2017]`","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\", [ 10, 10, width, height]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(80,400)\");\n \n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.Dupage_Tracts).features)\n .join(\"path\")\n .attr(\"stroke\", \"#b1b5bd\")\n .attr (\"stroke-width\" , \"1px\") \n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"fill\", d => color(data.get(d.properties[idAttribute])))\n .attr(\"d\", path)\n\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":608,"value":"\"This map is somewhat misleading because poverty in DuPage County is overall very low, so even the high poverty polygons still have low poverty compared to the rest of the state. The higher poverty tracts are somewhat spatially clustered, especially in the northeast corner of the county and along the central western edge. High median age is somewhat clustered in the southeast corner. Overall, I would say the variables seem to have a slight negative correlation. There appear to be more low median age/high poverty and high median age/low poverty polygons than vice versa.\"","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":false,"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([87,0]).fitExtent([[150, 20], [width, height]], polygon_features);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.Dupage_Tracts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"CountyTable.csv\").text(), ({GEOID, _TotalPop, _Pov12Mo, _MedianAge}) => [GEOID, [+_MedianAge, (100*+_Pov12Mo/+_TotalPop).toFixed(2)]])), {title: [\"Median Age\", \" below poverty in last 12 months\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"Dupage_Tracts.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"$30","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":false,"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${b}% ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"