27:null 28:["$","title",null,{"children":"Stacked, Grouped, PerCent or SmallMultiple | inanimatedObjects | Observable"}] 2d:Td29,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const rect = svg .selectAll("g") .data(series) .join("g") .attr("fill", (d, i) => color(i)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left},0)`); const xAxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`); xAxis.call( d3 .axisBottom(x) .tickSizeOuter(0) .tickFormat((d) => d) ); function yAxisupdate(p) { yAxis .transition() .duration(500) .call( d3 .axisLeft(y) .tickPadding(8) .tickFormat((d) => (p === undefined ? d : 100 * d)) ); } function transitionGrouped() { y.domain([0, yMax]); yAxisupdate(); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(i) + (x.bandwidth() / ctr.n) * d[2]) .attr("width", x.bandwidth() / ctr.n) .transition() .attr("y", (d) => y(d[1] - d[0])) .attr("height", (d) => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, y1Max]); yAxisupdate(); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", (d) => y(d[1])) .attr("height", (d) => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function transitionSeparated() { domains.forEach((d, i) => { const yAxiss = svg .append("g") .attr("class", "axiss") .attr("transform", `translate(${margin.left},0)`); yAxiss .append("line") .attr("stroke", "grey") .attr("x1", x(xz[0] - 0.5)) .attr("y1", y(domains[i][1]) - i * 10) .attr("x2", x(xz[xz.length - 1])) .attr("y2", y(domains[i][1]) - i * 10); const ys = d3 .scaleLinear() .domain([0, intervals[i]]) .range([y(d[0]), y(d[1])]); yAxiss.call( d3 .axisLeft(ys) .ticks(2) .tickFormat((d) => d) ); }); y.domain([0, y2Max]); // yAxisupdate(); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", (d) => y(d[3]) + y(d[1]) - y(d[0]) - d[2] * 10) .attr("height", (d) => y(0) - y(d[1] - d[0])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function transitionProportion() { y.domain([0, 1]); yAxisupdate(true); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", (d) => y(d[1] / d[4])) .attr("height", (d) => y(d[0] / d[4]) - y(d[1] / d[4])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function update(ctr) { d3.selectAll(".axiss").remove(); if (ctr.layout === "Stacked") transitionStacked(); if (ctr.layout === "Grouped") transitionGrouped(); if (ctr.layout === "Small Multiple") transitionSeparated(); if (ctr.layout === "Per Cent") transitionProportion(); } return Object.assign(svg.node(), { update }); }2e:[] 2b:{"id":"fb3b81ba142555b1","slug":null,"title":"Stacked, Grouped, PerCent or SmallMultiple","thumbnail":"cc333a9636a60b625c29812b321ea591be9d93dad79da1ce1a5759f4867cbd7e","access_level":"public","create_time":"$D2025-03-26T23:07:56.206Z","update_time":"$D2025-03-26T23:07:56.206Z","view_time":null,"first_public_time":"$D2025-03-26T23:07:56.206Z","has_unpublished_edits":null,"fork":{"id":"76c1e9ef4f8d196b","slug":"stacked-grouped-percent-or-smallmultiple","title":"Stacked, Grouped, PerCent or SmallMultiple","owner":{"id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":920,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Stacked, Grouped, PerCent or SmallMultiple","cells":[{"id":0,"value":"md`# Stacked, Grouped, PerCent or SmallMultiple\n\nSandbox for understanding the range of usage of Stacked, Grouped, Percent and Cumulative Small Multiples.\nData is made of random waves. \n\nNumber of series and points can be adjusted.\n\nFurther explanations of my [website](https://perceptible.fr/blog/stacked) (in french)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof ctr = controlPanel([\n [\n Ctrls.radioGroup(\n \"layout\",\n [\"Stacked\", \"Per Cent\", \"Grouped\", \"Small Multiple\"],\n {\n label: \"Choose visualization\",\n value: \"Stacked\"\n }\n )\n ],\n [\n Ctrls.slider(\"n\", {\n label: \"Number of series : \",\n min: 2,\n max: 10,\n step: 1,\n value: 3\n }),\n Ctrls.slider(\"m\", {\n label: \"Number of points : \",\n min: 5,\n max: 100,\n step: 1,\n value: 20\n })\n ]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"update = chart.update(ctr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"xz = d3.range(ctr.m) // the x-values shared by all series","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"yz = d3.range(ctr.n).map(() => bumps(ctr.m)) // the y-values of each of the n series","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"function offset(series) {\n if (series.length < 1) return;\n // Standard series\n let base = [0],\n baseSum = 0;\n series.forEach((s, i) => {\n baseSum += d3.max(s, d => d[1] - d[0]);\n base[i + 1] = baseSum;\n });\n\n series.forEach((s, i) => s.forEach(d => (d[3] = base[i]))); // La somme des max\n\n let days = [];\n xz.forEach(\n i => (days[i] = series.reduce((p, e, j) => p + e[i][1] - e[i][0], 0))\n ); // La somme des valeur par jours (percent)\n\n days.forEach((d, i) => series.forEach(s => (s[i][4] = days[i]))); // La somme des max\n\n return series;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"series = offset(\n y01z.sort(\n (a, b) => d3.max(b, (d) => d[1] - d[0]) - d3.max(a, (d) => d[1] - d[0])\n )\n).map((d, i) => {\n d.forEach((e) => (e[2] = i));\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"intervals = y01z\n .map((d) => d3.extent(d.map((e) => e[1])))\n .map((d) => d[1])\n .sort((a, b) => b - a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"domains = {\n let accu = 0;\n return intervals.map((d) => {\n const rv = [accu, accu + d];\n accu = accu + d;\n return rv;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"y01z = d3\n .stack()\n .keys(d3.range(ctr.n))(d3.transpose(yz)) // stacked yz\n .map((data, i) => data.map(([y0, y1]) => [y0, y1, i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"y1Max = d3.max(y01z, y => d3.max(y, d => d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"y2Max = {\n const last = series[series.length - 1];\n return last[0][3] + d3.max(last, (d) => d[1] - d[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"y.invert(y2Max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"y.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"y.range()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"y.invert(680)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"x = d3.scaleBand()\n .domain(xz)\n .rangeRound([margin.left, width - margin.right])\n .padding(0.08)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"y = d3\n .scaleLinear()\n .domain([0, y1Max])\n .range([height - margin.bottom, margin.top])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"color = i => d3.schemePaired[i]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"margin = ({ top: 10, right: 0, bottom: 20, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Returns an array of m psuedorandom, smoothly-varying non-negative numbers.\n// Inspired by Lee Byron’s test data generator.\n// http://leebyron.com/streamgraph/\nfunction bumps(m) {\n const values = [];\n\n // Initialize with uniform random values in [0.1, 0.2).\n for (let i = 0; i < m; ++i) {\n values[i] = 0.1 + 0.1 * Math.random();\n }\n\n // Add five random bumps.\n for (let j = 0; j < 5; ++j) {\n const x = 1 / (0.1 + Math.random());\n const y = 2 * Math.random() - 0.5;\n const z = 10 / (0.1 + Math.random());\n for (let i = 0; i < m; i++) {\n const w = (i / m - y) * z;\n values[i] += x * Math.exp(-w * w);\n }\n }\n\n // Ensure all values are positive.\n for (let i = 0; i < m; ++i) {\n values[i] = Math.max(0, values[i]);\n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"import { controlPanel, Ctrls } from \"@analyzer2004/control-panel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"