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

2d:null 2e:["$","title",null,{"children":"Bivariate Choropleth Mapping | Hoeyun Kwon | Observable"}] 33: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]} `; }34:[{"id":"aaa8170a5c0cc0f8b522d82b5c2ab57cc457fc1d1c543985164ee721a68d9c98046daee4c8a12f33e78a5efa57dd343ac214541ea1ea9d5ccfc59d43d1fde9dd","href":"https://static.observableusercontent.com/files/aaa8170a5c0cc0f8b522d82b5c2ab57cc457fc1d1c543985164ee721a68d9c98046daee4c8a12f33e78a5efa57dd343ac214541ea1ea9d5ccfc59d43d1fde9dd","name":"California_population_income.csv","type":"text/csv","lastModified":1586813229612.873,"size":8513},{"id":"2894650ea41eac041438006a3d1e5614262f99da44d2674f92f92d766b44fa28d4994ff9458f63f968f38dc2987106f15e5d95c8de2d537813ff9c3712f4f442","href":"https://static.observableusercontent.com/files/2894650ea41eac041438006a3d1e5614262f99da44d2674f92f92d766b44fa28d4994ff9458f63f968f38dc2987106f15e5d95c8de2d537813ff9c3712f4f442","name":"CA_county_wgs84.json","type":"application/json","lastModified":1586816832095.246,"size":1080528}] 31:{"id":"298a5af89be80ee0","slug":"bivariate-choropleth-mapping","title":"Bivariate Choropleth Mapping","thumbnail":"4f71ae27ca6b7498bea8cb8bf36720363661c52dd68edde9883c64048ce12698","access_level":"public","create_time":"$D2020-04-13T01:47:04.878Z","update_time":"$D2020-04-14T01:13:13.218Z","view_time":null,"first_public_time":"$D2020-04-13T23:00:50.455Z","has_unpublished_edits":null,"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":"1ebfad7f2fd274fb","login":"kwonhy71","name":"Hoeyun Kwon","avatar_url":"https://avatars-next.observableusercontent.com/7af01d2752a31db6c1269ffc579ea9c66ba8a8f34eec28fd114eac6a0d0f4c80","tier":"starter_2024"},"version":648,"publish_version":648,"role":null,"authored":false,"authors":[{"type":"individual","id":"35e5c7704442a56a","login":"kwonhy71","name":"Hoeyun Kwon","avatar_url":"https://avatars-next.observableusercontent.com/7af01d2752a31db6c1269ffc579ea9c66ba8a8f34eec28fd114eac6a0d0f4c80","tier":null}],"members":[{"type":"individual","id":"35e5c7704442a56a","login":"kwonhy71","name":"Hoeyun Kwon","avatar_url":"https://avatars-next.observableusercontent.com/7af01d2752a31db6c1269ffc579ea9c66ba8a8f34eec28fd114eac6a0d0f4c80","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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"md`#### % Population of Age 20-34 and Median Household Income in California\nSource: American Community Survey 5-year estimation (2014-2018)`","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 = 0;\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(560,170)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(polygons, polygons.objects.CA_county_wgs84).features)\n .join(\"path\")\n .attr(\"stroke\", \"white\")\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`This map shows the correlation between population of age 20-34 and median household income in California. The darkest color indicates the areas with high percentage of young population and high level of median income.These areas are concentrated around California. Apparently, the location of Silicon Valley with lots of innovative technology companies and thousands of tech jobs can make these patterns. Meanwhile, the areas with low percentage of young population and low level of median income are concentrated in the northern part of California. This is because most of these areas are national forests and there are only few people living there.`","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"mid\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"projection = d3.geoConicConformal()\n .parallels([37 + 4 / 60, 38 + 26 / 60])\n .rotate([120 + 30 / 60, 0]).fitExtent([[margin, margin], [width - margin, height - margin]], polygon_features);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"polygon_features = topojson.feature(polygons, polygons.objects.CA_county_wgs84)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"California_population_income.csv\").text(),({GEOID_1, Total, from20to24, from25to34, MedianIncome}) => [+GEOID_1, [((+from20to24 + +from25to34)/+Total)*100, +MedianIncome]])), {title: [\"% Population of 20-34\", \"Median Income\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"idAttribute = \"GEOID_1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"polygons = FileAttachment(\"CA_county_wgs84.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"height = 610","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"width = 875","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"margin = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$33","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"formatNum1 = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"formatNum2 = d3.format(\",.2r\")","pinned":false,"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 `${formatNum1(a)} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatNum2(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"