32:[{"id":"cacf3b872e296fd3cf25b9b8762dc0c3aa1863857ecba3f23e8da269c584a4cea9db2b5d390b103c7b386586a1104ce33e17eee81b5cc04ee86929f1ee599bfe","href":"https://static.observableusercontent.com/files/cacf3b872e296fd3cf25b9b8762dc0c3aa1863857ecba3f23e8da269c584a4cea9db2b5d390b103c7b386586a1104ce33e17eee81b5cc04ee86929f1ee599bfe","name":"us-population-state-age.csv","type":"application/octet-stream","lastModified":1629379904076.932,"size":3516}] 30:{"title":"Stacked bar chart with gaps between groups of bars","cells":[{"id":1,"value":"md`# Stacked bar chart with gaps between groups of bars\n\nThis notebook has a function scaleWithGap that takes a band scale and returns a new scale with a gaps after given numbers of items. In the example chart below, there is a gap after CA (the first item) and other gap after IL (the fifth item). This technique is not useful for the data shown here, but might be useful for certain other data sets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"md`To use this method, create a scale as normal...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"x_ = d3\n .scaleBand()\n .domain(data.map(d => d.name))\n .range([margin.left, width - margin.right])\n .paddingInner(0.1)\n .paddingOuter(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`...then call scaleWithGaps(scale, where, gapSize), where where is an array containing the indices of the items that gaps should appear after and gapSize is a proportion of scale.size().`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"x = scaleWithGaps(x_, [1, 5], .5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`You can then create a D3 bar chart in the usual way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"fill\", d => color(d.key))\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(d.data.name))\n .attr(\"y\", d => y(d[1]))\n .attr(\"height\", d => y(d[0]) - y(d[1]))\n .attr(\"width\", x.bandwidth())\n .append(\"title\")\n .text(\n d => `${d.data.name} ${d.key}\n${formatValue(d.data[d.key])}`\n );\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"// Create a new scale from a band scale, with gaps between groups of items\n//\n// Parameters:\n// scale: a band scale\n// where: how many items should be before each gap?\n// gapSize: gap size as a fraction of scale.size()\nfunction scaleWithGaps(scale, where, gapSize) {\n scale = scale.copy();\n var offsets = {};\n var i = 0;\n var offset = -(scale.step() * gapSize * where.length) / 2;\n scale.domain().forEach((d, j) => {\n if (j == where[i]) {\n offset += scale.step() * gapSize;\n ++i;\n }\n offsets[d] = offset;\n });\n var newScale = value => scale(value) + offsets[value];\n // Give the new scale the methods of the original scale\n for (var key in scale) {\n newScale[key] = scale[key];\n }\n newScale.copy = function() {\n return scaleWithGaps(scale, where, gapSize);\n };\n return newScale;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"data = d3.csvParse(await FileAttachment(\"us-population-state-age.csv\").text(), (d, i, columns) => (d3.autoType(d), d.total = d3.sum(columns, c => d[c]), d)).sort((a, b) => b.total - a.total)","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"series = d3.stack()\n .keys(data.columns.slice(1))\n (data)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))])\n .rangeRound([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(d3.schemeSpectral[series.length])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.selectAll(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"formatValue = x => isNaN(x) ? \"N/A\" : x.toLocaleString(\"en\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}