29:null 2a:["$","title",null,{"children":"U.S. County Population Age Distribution | Chris Henrick | Observable"}] 2f:T4cb,chart = ({ data, name, height, showLegend = true, titlePrefix = "Age Distrubution of" }) => { height = height || 100; const container = html`

${titlePrefix} ${name}

${showLegend ? legend({ color }) : ""}

`; const svg = d3.select(container).select("svg"); const g = svg.append("g"); const stacks = g .selectAll("g") .data(data, (d) => d.key) .join("g") .attr("fill", (d) => color(d.key)) .attr("transform", `translate(0 ,${margin.top})`); stacks .selectAll("rect") .data((d) => d) .join("rect") .attr("width", (d) => x(d[1]) - x(d[0])) .attr("height", height - margin.top - margin.bottom) .attr("x", (d) => x(d[0])) .attr("y", 0) .append("title") .text((d) => d.data[d.key].toLocaleString()); svg.append("g").call(xAxis, data); return container; }30:[] 2d:{"id":"51582d1842facab8","slug":"u-s-county-population-age-distribution","title":"U.S. County Population Age Distribution","thumbnail":"7626342c1d982b3e5eac137cd06547cf9ea6b4e2f118853ebae239640ea1946c","access_level":"public","create_time":"$D2020-10-01T19:46:05.873Z","update_time":"$D2021-04-24T18:04:50.073Z","view_time":null,"first_public_time":"$D2020-10-02T18:41:40.959Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":319,"publish_version":319,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d625d8448d2de965","slug":"msm-fellowship","title":"msm-fellowship","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"U.S. County Population Age Distribution","cells":[{"id":0,"value":"md`# U.S. County Population Age Distribution\n\nA take on the [Stacked Normalized Horizontal Bar Chart](https://observablehq.com/@d3/stacked-normalized-horizontal-bar). Uses data from the U.S. Census ACS 5 Year Estimates from 2018.\n\nSelect a different county using the autosuggest input below to update the chart.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chart({ data: series, name: targetCounty, height: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof selected = autoSelect({\n title: \"Selected County\",\n options: Array.from(counties2FipsMap.keys()),\n value: \"Alameda County, California\",\n placeholder: \"Select a County\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"margin = ({ top: 24, right: 30, bottom: 0, left: 18 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"series = d3\n .stack()\n .keys(Object.keys(datum))\n .offset(d3.stackOffsetExpand)([datum])\n .map(d => (d.forEach(v => (v.key = d.key)), d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"stops = Array.from(\n new Set(d3.merge(series.map(s => s[0]).map(([d1, d2], i) => [d1, d2])))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"getTicks = series =>\n Array.from(\n new Set(d3.merge(series.map(s => s[0]).map(([d1, d2], i) => [d1, d2])))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"xAxis = (g, _series) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(\n d3\n .axisTop(x)\n .tickValues(getTicks(_series))\n .tickFormat((d, i) => {\n let formatter = \".1f\";\n if (i === 0 || i === getTicks(_series).length - 1) formatter = \".0f\";\n return d3.format(formatter)(d * 100) + \"%\";\n })\n )\n .call(g =>\n g.select(\".tick:last-of-type > text\").attr(\"text-anchor\", \"start\")\n )\n .call(g =>\n g.select(\".tick:first-of-type > text\").attr(\"text-anchor\", \"end\")\n )\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"x = d3\n .scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"color = d3\n .scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.schemeSpectral[series.length])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"datum = countySums.reduce((acc, cur, i) => {\n acc[ageBuckets[i]] = cur;\n return acc;\n}, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"countySums = sums[fipsIndex]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"countyTotal = totals[fipsIndex]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"fipsIndex = fipsIndexMap.get(counties2FipsMap.get(targetCounty))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"targetCounty = selected || defaultCounty","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"defaultCounty = \"Alameda County, California\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import { autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {\n sums,\n totals,\n fipsIndex as fipsIndexMap,\n ageBuckets,\n counties2FipsMap\n} from \"1ec3e013ab0fb19a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"