31:T1f50,map = { let state_stroke = 0.2; let division_stroke = 2; let highlighted_division_stroke = 6; let region_stroke = 4; // let w = d3.min([width, 1000]); let w = 800; let h = 0.625 * w; let projection = d3.geoAlbersUsa().fitSize([w - 10, h], map_data.regions); let path = d3.geoPath().projection(projection); let svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .style("max-width", `${w}px`); // .attr("width", w).attr("height", h); let map = svg.append("g").attr("id", "map"); let west = map.append("g").attr("transform", `translate(-${w / 50},0)`); west .selectAll("path.west_state") .data(map_data.states.features.filter((o) => o.properties.Region == "West")) .join("path") .attr("class", "west_state") .attr("d", path) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", state_stroke); west .selectAll("path.west_division") .data( map_data.divisions.features.filter( (o) => o.properties.Division == "Pacific" || o.properties.Division == "Mountain" ) ) .join("path") .attr("class", "west_division") .attr("data-division", (o) => o.properties.Division) .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", division_stroke) .on("pointerenter", function () { d3.select(this) .attr("stroke-width", highlighted_division_stroke) .attr("fill-opacity", 0.2); }) .on("pointerleave", function () { d3.select(this) .attr("stroke-width", division_stroke) .attr("fill-opacity", 0); }) .nodes() .forEach(function (node) { let division = node.getAttribute("data-division"); tippy(node, { content: `Region: West
Division: ${division}`, // theme: "light-border", allowHTML: true }); }); west .selectAll("path.west_region") .data( map_data.regions.features.filter((o) => o.properties.Region == "West") ) .join("path") .attr("class", "west_region") .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", region_stroke) .style("pointer-events", "none"); let south = map .append("g") .attr("transform", `translate(${w / 50},${w / 50})`); south .selectAll("path.south_state") .data( map_data.states.features.filter((o) => o.properties.Region == "South") ) .join("path") .attr("class", "south_state") .attr("d", path) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", state_stroke); south .selectAll("path.south_division") .data( map_data.divisions.features.filter( (o) => o.properties.Division == "South Atlantic" || o.properties.Division == "East South Central" || o.properties.Division == "West South Central" ) ) .join("path") .attr("class", "south_division") .attr("data-division", (o) => o.properties.Division) .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", division_stroke) .on("pointerenter", function () { d3.select(this) .attr("stroke-width", highlighted_division_stroke) .attr("fill-opacity", 0.2); }) .on("pointerleave", function () { d3.select(this) .attr("stroke-width", division_stroke) .attr("fill-opacity", 0); }) .nodes() .forEach(function (node) { let division = node.getAttribute("data-division"); tippy(node, { content: `Region: South
Division: ${division}`, // theme: "light-border", allowHTML: true }); }); south .selectAll("path.south_region") .data( map_data.regions.features.filter((o) => o.properties.Region == "South") ) .join("path") .attr("class", "south_region") .attr("d", path) .attr("fill", "transparent") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", region_stroke) .style("pointer-events", "none"); let midwest = map.append("g").attr("transform", `translate(${0},${-w / 50})`); midwest .selectAll("path.midwest_state") .data( map_data.states.features.filter((o) => o.properties.Region == "Midwest") ) .join("path") .attr("class", "midwest_state") .attr("d", path) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", state_stroke); midwest .selectAll("path.midwest_division") .data( map_data.divisions.features.filter( (o) => o.properties.Division == "East North Central" || o.properties.Division == "West North Central" ) ) .join("path") .attr("class", "midwest_division") .attr("data-division", (o) => o.properties.Division) .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", division_stroke) .on("pointerenter", function () { d3.select(this) .attr("stroke-width", highlighted_division_stroke) .attr("fill-opacity", 0.2); }) .on("pointerleave", function () { d3.select(this) .attr("stroke-width", division_stroke) .attr("fill-opacity", 0); }) .nodes() .forEach(function (node) { let division = node.getAttribute("data-division"); tippy(node, { content: `Region: Midwest
Division: ${division}`, // theme: "light-border", allowHTML: true }); }); midwest .selectAll("path.midwest_region") .data( map_data.regions.features.filter((o) => o.properties.Region == "Midwest") ) .join("path") .attr("class", "midwest_region") .attr("d", path) .attr("fill", "transparent") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", region_stroke) .style("pointer-events", "none"); let northeast = map .append("g") .attr("transform", `translate(${w / 100},${-w / 40})`); northeast .selectAll("path.northeast_state") .data( map_data.states.features.filter((o) => o.properties.Region == "Northeast") ) .join("path") .attr("class", "northeast_state") .attr("d", path) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", state_stroke); northeast .selectAll("path.northeast_division") .data( map_data.divisions.features.filter( (o) => o.properties.Division == "New England" || o.properties.Division == "Mid Atlantic" ) ) .join("path") .attr("class", "northeast_division") .attr("data-division", (o) => o.properties.Division) .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", division_stroke) .on("pointerenter", function () { d3.select(this) .attr("stroke-width", highlighted_division_stroke) .attr("fill-opacity", 0.2); }) .on("pointerleave", function () { d3.select(this) .attr("stroke-width", division_stroke) .attr("fill-opacity", 0); }) .nodes() .forEach(function (node) { let division = node.getAttribute("data-division"); tippy(node, { content: `Region: Northeast
Division: ${division}`, // theme: "light-border", allowHTML: true }); }); northeast .selectAll("path.northeast_region") .data( map_data.regions.features.filter( (o) => o.properties.Region == "Northeast" ) ) .join("path") .attr("class", "northeast_region") .attr("d", path) .attr("fill", "gray") .attr("fill-opacity", 0) .attr("stroke", "black") .attr("stroke-width", region_stroke) .style("pointer-events", "none"); return svg.node(); }32:T576,state_packing = { let state_groups = d3.group(counties, (o) => o.state); let data = d3.stratify().path((d) => d)( Array.from( new Set(counties.map((o) => `/US/${o.region}/${o.division}/${o.state}`)) ) ); let packing = Pack(data, { width: width < 900 ? width : 900, height: width < 900 ? width : 900, title: function (d) { let name = d.id.split("/").slice(-1)[0]; if (d.depth < 3) { return name; } else { let county_count = state_groups.get(name).length; return `${name}
${county_count} counties`; } }, label: (d) => d.id.split("/").slice(-1)[0].replace(" ", "\n") }); d3.select(packing) .selectAll("circle") .attr("stroke", "#666") .attr("stroke-width", 1) .on("pointerenter", function () { d3.select(this).attr("stroke-width", 3); }) .on("pointerleave", function () { d3.select(this).attr("stroke-width", 1); }) .nodes(); d3.select(packing) .selectAll("a") .nodes() .forEach(function (node) { let text = d3.select(node).select("title").text(); tippy(node, { content: text, followCursor: true, theme: "light-border", allowHTML: true }); }); d3.select(packing).selectAll("text").style("pointer-events", "none"); d3.select(packing).selectAll("title").remove(); return packing; }33:T110c,tree = { await visibility(); let maxWidth = d3.min([800, width]); let diagonal = d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x); let dy = maxWidth / 4.2; let dx = 20; let tree = d3.tree().nodeSize([dx, dy]); let margin = { top: 10, right: 120, bottom: 10, left: 40 }; const root = d3.hierarchy( d3 .stratify() .path((o) => `/US/${o.region}/${o.division}/${o.state}/${o.county}`)( counties ) ); root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.height < 3) d.children = null; }); const svg = d3 .create("svg") .attr("viewBox", [-margin.left, -margin.top, maxWidth, dx]) .style("font", "12px sans-serif") .style("user-select", "none") .style("overflow", "visible"); const gLink = svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg .append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); update(root); return svg.node(); function update(source) { const duration = d3.event && d3.event.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); let left = root; let right = root; root.eachBefore((node) => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + margin.top + margin.bottom; const transition = svg .transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, maxWidth, height]) .tween( "resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle") ); // Update the nodes… const node = gNode.selectAll("g").data(nodes, (d) => d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node .enter() .append("g") .attr("transform", (d) => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); }); nodeEnter .append("circle") .attr("r", 2.5) .attr("fill", (d) => (d._children ? "#555" : "#999")) .attr("stroke-width", 10); nodeEnter .append("text") .attr("dy", "0.31em") .attr("x", (d) => (d._children ? -6 : 6)) // .attr("text-anchor", (d) => (d._children ? "end" : "start")) .attr("text-anchor", "end") .text(function (d) { // console.log(d); return d.data.id.split("/").slice(-1)[0]; }) .clone(true) .lower() .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white"); // Transition nodes to their new position. const nodeUpdate = node .merge(nodeEnter) .transition(transition) .attr("transform", (d) => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Transition exiting nodes to the parent's new position. const nodeExit = node .exit() .transition(transition) .remove() .attr("transform", (d) => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path").data(links, (d) => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link .enter() .append("path") .attr("d", (d) => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }); // Transition links to their new position. link.merge(linkEnter).transition(transition).attr("d", diagonal); // Transition exiting nodes to the parent's new position. link .exit() .transition(transition) .remove() .attr("d", (d) => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); // Stash the old positions for transition. root.eachBefore((d) => { d.x0 = d.x; d.y0 = d.y; }); } }34:[{"id":"264089c9f7ce32213cbee016225a626b56553c9320045293b4bee7a2236e992e72a8f5e6225429a4b8fe67f425ab44f312af791f260868a6dcc38b4db5f4d391","href":"https://static.observableusercontent.com/files/264089c9f7ce32213cbee016225a626b56553c9320045293b4bee7a2236e992e72a8f5e6225429a4b8fe67f425ab44f312af791f260868a6dcc38b4db5f4d391","name":"states_regions_divisions.json","type":"application/json","lastModified":1665359506112.958,"size":444430},{"id":"bb754fc214545ffae23424df8967a66378726353330153b991013dfbd443a4041a9d9ec554ea29ebe66f73fc9598dc1eb45af9927c42a921101b1fe0485d6505","href":"https://static.observableusercontent.com/files/bb754fc214545ffae23424df8967a66378726353330153b991013dfbd443a4041a9d9ec554ea29ebe66f73fc9598dc1eb45af9927c42a921101b1fe0485d6505","name":"us_regional_hiearchy@1.csv","type":"text/csv","lastModified":1665341460113.562,"size":148418}] 2f:{"title":"Hierarchical Structure of the US Regions","cells":[{"id":0,"value":"# Hierarchical Structure of the US Regions\n\nIn his [introduction to d3-hierarchy](https://github.com/d3/d3-hierarchy#d3-hierarchy), Mike Bostock states that \"Many datasets are intrinsically hierarchical\", offering as his first example, \"[Geographic entities](https://www.census.gov/programs-surveys/geography/guidance/hierarchy.html)\", such as those used by the US Census. Here are three visualizations that explore that very idea.\n\n## Regions, divisions, states, and more\n\nIn an effort to break the country up into manageable pieces, the Census Bureau divides the country up into \n\n - Regions, then\n - Divisions, then\n - States,then\n - Counties\n\nand more. Here's a look at the map they envision:","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"This is based primarily on [this PDF from the US Census](https://www2.census.gov/geo/pdfs/maps-data/maps/reference/us_regdiv.pdf)\nThis map is interactive, though, so you can hover over the map to get more information on the divisions/regions.\n\n## Circle packing\n\nIf you're interested more in the hierarchical structure than you are in the geographic relationships, then one way visualize this structure is as a nested circle packing. This really captures the exact same hierarchical relationships, though a bit more abstractly.","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"## A collapsible tree\n\nI'm a fan of the collapsible tree approach, that tempts the user to explore on their own by following nodes that are not yet expanded. Note that expanding states can lead to *a lot* of counties!","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"counties = FileAttachment(\"us_regional_hiearchy@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"map_data = {\n let map_data = await FileAttachment(\"states_regions_divisions.json\").json();\n\n let regions = topojson.feature(map_data, map_data.objects.regions);\n let divisions = topojson.feature(map_data, map_data.objects.divisions);\n let states = topojson.feature(map_data, map_data.objects.states);\n\n return { regions, divisions, states };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"map_data.divisions.features.map((o) => o.properties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"tippy_style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"import { Pack } from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"Array.from(\n new Set(counties.map((o) => `/US/${o.region}/${o.division}/${o.state}`))\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}