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

25:["$","title",null,{"children":"Spatial data aggregation | Ped Ram | Observable"}] 49:T7d3,chart = { const path = d3.geoPath(); // Define the hexagon generator function const hexRadius = 10; const hexagon = d3.hexbin().radius(hexRadius); const svg = d3 .create("svg") .attr("viewBox", "0 0 960 600") .style("width", "100%") .style("height", "auto"); svg.append(legend).attr("transform", "translate(870,450)"); const counties = topojson.feature(us, us.objects.counties).features; // Calculate hexagon positions for each county const hexagonsData = counties.map((county) => ({ county: county, hexagons: hexagon( d3 .polygonHull( county.geometry.coordinates.map((coords) => coords.map(path)), (d) => d ) .map((d) => [d[0], d[1]]) ) })); // Append hexagons to the SVG const hexagons = svg .selectAll(".hexagon") .data(hexagonsData) .enter() .append("g") .attr("class", "hexagon") .selectAll("path") .data((d) => d.hexagons) .enter() .append("path") .attr("fill", (d) => color(data.get(d.county.id.slice(0, maxDigit)))) .attr("transform", (d) => `translate(${d.x}, ${d.y})`) .attr("d", hexagon.hexagon(hexRadius)) .on("mouseout", (d) => hexagons.attr("opacity", 1)) .on("mouseover", (d) => { hexagons.attr("opacity", 0.1); hexagons .filter( (e) => e.county.id.slice(0, maxDigit) === d.county.id.slice(0, maxDigit) ) .attr("opacity", 1); }); // Append titles to hexagons hexagons.append("title").text( (d) => `${d.county.properties.name},${ states.get(d.county.id.slice(0, 2)).name } fips Code Part: ${d.county.id.slice(0, maxDigit)}, ${format(data.get(d.county.id.slice(0, maxDigit)))}` ); // Append state boundaries svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }4a: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[i] && ` (${labels[i]})`} ${data.title[1]}${labels[j] && ` (${labels[j]})`} `)} ${data.title[0]} ${data.title[1]} `; }4b:[] 29:{"id":"7c38d6799aa6efcd","slug":null,"title":"Spatial data aggregation","thumbnail":"dc0d4fba2836f9c60ab35fe90cdf97c3cb11878f733fd5a7d4b48d431a86f1d4","access_level":"public","create_time":"$D2024-01-07T20:32:24.000Z","update_time":"$D2024-01-07T20:36:23.775Z","view_time":null,"first_public_time":"$D2024-01-07T20:32:24.000Z","has_unpublished_edits":null,"fork":{"id":"18fb1db8b486074a","slug":"spatial-data-aggregation","title":"Spatial data aggregation","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0bbcf444e46bf02","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":542,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Spatial data aggregation","cells":[{"id":0,"value":"md`# Spatial data aggregation\n\nAn example of how spatial data aggregation completely changes a visualization. Based on a great example by [@palewire](/@palewire) [Black and Latino U.S. population shares](https://observablehq.com/@datadesk/black-and-latino-u-s-population-shares).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`The following map highlights areas of the US with high percentage of black and latino populations. Data is presented at the fips-code level. However you can compare the data at different fips code levels using the following slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"viewof maxDigit = slider({\n min: 1,\n max: 5,\n value: 5,\n step: 1,\n title: \"Fips code digits\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"d3 = require(\"d3@7\", \"d3-hexbin@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`Source: [American Community Survey 2017 five-year estimates](https://github.com/datadesk/census-data-downloader/blob/master/data/processed/acs5_2017_race_counties.csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"data_list = raw_data.map(d => {\n return [\n d.geoid.slice(0,maxDigit), [\n percent(+d.black_alone, +d.total),\n percent(+d.latino_alone, +d.total)\n ]\n ];\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"aggregated_data = Array.from(d3.rollup(raw_data, v => ({\n black_alone: d3.sum(v, d=> d.black_alone),\n latino_alone: d3.sum(v, d=> d.latino_alone),\n total: d3.sum(v, d=> d.total), \n geoid: v[0].geoid.slice(0, maxDigit)\n }),\n d => d.geoid.slice(0, maxDigit)).values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = {\n const data_list = aggregated_data.map(d => {\n return [\n d.geoid.slice(0,maxDigit), [\n percent(+d.black_alone, +d.total),\n percent(+d.latino_alone, +d.total)\n ]\n ];\n });\n const data_map = new Map(data_list);\n return Object.assign(data_map, {title: [\"Black\", \"Latino\"]});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"percent = (a,b) => ((a/b)*100).toFixed(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"raw_data = await d3.csv(\"https://raw.githubusercontent.com/datadesk/census-data-downloader/4ade2a3feaf31843753b3a1fde38d4161dc58308/data/processed/acs5_2017_race_counties.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof colors = {\n const form = html`

`;\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null