31: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; }32:[] 2f:{"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"},{"id":13,"value":"chart({ data: series, name: targetCounty, height: 60 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":251,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"margin = ({ top: 24, right: 30, bottom: 0, left: 18 })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":67,"value":"x = d3\n .scaleLinear()\n .domain([0, 1])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":26,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"datum = countySums.reduce((acc, cur, i) => {\n acc[ageBuckets[i]] = cur;\n return acc;\n}, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"countySums = sums[fipsIndex]","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"countyTotal = totals[fipsIndex]","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"fipsIndex = fipsIndexMap.get(counties2FipsMap.get(targetCounty))","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"targetCounty = selected || defaultCounty","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"defaultCounty = \"Alameda County, California\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}