2c:null 2d:["$","title",null,{"children":"Barres Empilées, Groupées, Pour Cent ou Petits Multiples | ToulouseDataviz | Observable"}] 32:Td46,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#f0f0f0"); 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]); 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(".axis").remove(); if (ctr.layout === "Empilée") transitionStacked(); if (ctr.layout === "Groupée") transitionGrouped(); if (ctr.layout === "Petits Multiples") transitionSeparated(); if (ctr.layout === "Pour Cent") transitionProportion(); } return Object.assign(svg.node(), { update }); }33:T1808,function arrayView({ name = "arrayNode" + DOM.uid().id, value = [], initial = [], builder } = {}) { if (value.length > 0 && !builder) throw new Error( "You cannot initialize an arrayView with data without a builder" ); const frag = new DocumentFragment(); const subviewToFragmentEventCloner = (e) => { const new_e = new e.constructor(e.type, e); frag.dispatchEvent(new_e); }; const _builder = builder ? (arg) => { const subview = builder(arg); subview.addEventListener("input", subviewToFragmentEventCloner); return subview; } : undefined; const unbuilder = (subview) => { subview.removeEventListener("input", subviewToFragmentEventCloner); }; initial.forEach((subview) => subview.addEventListener("input", subviewToFragmentEventCloner) ); const start = document.createComment("START:" + name); const end = document.createComment("END:" + name); let subviews = (_builder ? value.map(_builder) : []).concat(initial); frag.append(...[start, ...subviews, end]); frag.addEventListener("input", (e) => { // https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events const new_e = new e.constructor(e.type, e); start.dispatchEvent(new_e); }); const getIndexProperty = (index) => ({ get: () => subviews[index], enumerable: true, configurable: true }); const customSplice = (startIndex, deleteCount, ...items) => { const parent = start.parentNode; startIndex = Math.floor(startIndex); const removedData = []; // sync the splice with the DOM let node = start; // Forward to begining of the splice for (let i = 0; i < startIndex && i < subviews.length; i++) node = node.nextSibling; // delete 'deleteCount' times for (let i = 0; i < deleteCount && i < subviews.length; i++) { const toDelete = node.nextSibling; removedData.push(toDelete.value); unbuilder(toDelete); toDelete.remove(); } // add additional items const itemViews = []; for (let i = items.length - 1; i >= 0; i--) { const subview = _builder(items[i]); Object.defineProperty(frag, i, getIndexProperty(i)); let presentation = subview instanceof HTMLElement ? subview : htl.html`${subview}`; itemViews.unshift(subview); parent.insertBefore(presentation, node.nextSibling); } // Apply to cache subviews.splice(startIndex, deleteCount, ...itemViews); // Let flow upwards to array too return removedData; }; // We intercept operations to the data array and use it to drive DOM operations too. const dataArrayProxyHandler = { get: function (target, prop, receiver) { const args = arguments; if (prop === "splice") { return customSplice; } else if (prop === "push") { return (...elements) => { customSplice(subviews.length, 0, ...elements); return subviews.length; }; } else if (prop === "pop") { return () => { return customSplice(subviews.length - 1, 1)[0]; }; } else if (prop === "shift") { return () => { return customSplice(0, 1)[0]; }; } else if (prop === "unshift") { return (...elements) => { customSplice(0, 0, ...elements); return subviews.length; }; } return Reflect.get(...args); }, set(obj, prop, value) { if (!isNaN(+prop)) { // we also need to set the view customSplice(+prop, 1, value); } return Reflect.set(...arguments); } }; // Add data channel Object.defineProperties(frag, { value: { get: () => new Proxy( subviews.map((sv) => sv.value), dataArrayProxyHandler ), set: (newArray) => { const vArr = _.cloneDeep(newArray); const parent = start.parentNode; if (builder) { // We should be true to the operation and tear of the DOM and then replace it. subviews.forEach((sv) => (sv.remove ? sv.remove() : undefined)); subviews = vArr.map((data) => { const subview = _builder(data); let presentation = subview instanceof HTMLElement ? subview : htl.html`${subview}`; parent.insertBefore(presentation, end); return subview; }); } else { // We have to work around the limitations and try to do the operation without // building, so this only can work if you are setting it to something smaller vArr.forEach((v, i) => { if (i < subviews.length) { subviews[i].value = v; // mutate inplace } else { let built = _builder(v); // append additional subviews[i] = built; if (!(built instanceof HTMLElement)) built = htl.html`${built}`; parent.appendChild(built); } }); for (var i = subviews.length - 1; i >= vArr.length; i--) { // delete backwards const deleted = subviews.pop(); if (deleted.remove) deleted.remove(); } } } } }); // Add presentation channel return Object.defineProperties(frag, { remove: { value: () => { const toRemove = []; for (var node = start; node !== end; node = node.nextSibling) { toRemove.push(node); } toRemove.push(end); toRemove.forEach((n) => n.remove()); } }, length: { get: () => subviews.length, enumerable: true, configurable: true }, [Symbol.iterator]: { value: () => { let index = 0; return { next() { if (index < subviews.length) { let val = subviews[index]; index++; return { value: val, done: false }; } else return { done: true }; } }; } }, ...subviews.reduce((acc, sv, index) => { acc[index] = getIndexProperty(index); return acc; }, {}) }); }34:T1b1f,function wrap(fn, strings, ...exprs) { let singleton = undefined; let start = undefined; // To know where to start dynamic objects let builder = undefined; // For new keys are added dynamically const views = {}; const pexpr = exprs.map((exp) => { // All special functions are [key, ...] // Otherwise we pass through if (!Array.isArray(exp) || typeof exp[0] !== "string") { return exp; } const hidden = exp[0].startsWith("_"); const key = hidden ? exp[0].substring(1) : exp[0]; if (key === "value") throw new Error("Cannot use 'value' as a key"); let presentation; if (exp.length === 2 && exp[1] instanceof EventTarget) { // SINGLE VIEW PASSED IN if (key === "...") { // SINGLETON! singleton = exp[1]; } else { // look for [key, HTML] entries views[key] = exp[1]; } presentation = exp[1]; } else if ( // ARRAY PASSED IN (NO BUILDER) exp.length === 2 && Array.isArray(exp[1]) && exp[1].every((e) => e instanceof EventTarget) ) { if (key === "...") throw new Error("Spread not supported for arrays ATM"); /* const start = document.createComment(key); arrayViews[key] = { start, array: exp[1] }; presentation = [start, ...exp[1]];*/ presentation = arrayView({ name: key, initial: exp[1] }); views[key] = presentation; } else if ( // ARRAY PASSED IN (WITH BUILDER) exp.length === 3 && Array.isArray(exp[1]) && exp[1].every((e) => e instanceof EventTarget) && typeof exp[2] === "function" ) { if (key === "...") throw new Error("Spread not supported for arrays ATM"); /* const start = document.createComment(key); arrayViews[key] = { start, array: exp[1], builder: exp[2] }; presentation = [start, ...exp[1]];*/ presentation = arrayView({ name: key, initial: exp[1], builder: exp[2] }); views[key] = presentation; } else if ( // SPREAD OBJECT (NO BUILDER) exp.length === 2 && key === "..." && typeof exp[1] === "object" && Object.keys(exp[1]).every((e) => typeof e === "string") && Object.values(exp[1]).every((e) => e instanceof EventTarget) ) { Object.entries(exp[1]).forEach((e) => (views[e[0]] = e[1])); presentation = Object.values(exp[1]); } else if ( // SPREAD OBJECT (WITH BUILDER) exp.length === 3 && key === "..." && typeof exp[1] === "object" && Object.keys(exp[1]).every((e) => typeof e === "string") && Object.values(exp[1]).every((e) => e instanceof EventTarget) && typeof exp[2] === "function" ) { Object.entries(exp[1]).forEach((e) => (views[e[0]] = e[1])); start = document.createComment(key); builder = exp[2]; presentation = [start, ...Object.values(exp[1])]; } else { presentation = exp; } if (hidden) { const forwardEvent = (evt) => { const clone = new evt.constructor(evt.type, evt); self.dispatchEvent(clone); }; if (presentation.addEventListener) { presentation.addEventListener("input", forwardEvent); } else if (Array.isArray(presentation)) { presentation.forEach((p) => { // The first element can be the start event sometimes if (p.addEventListener) { p.addEventListener("input", forwardEvent); } }); } else { throw new Error("Not sure how to deal with this hidden element"); } return undefined; // No DOM representation } else { return presentation; // Places in DOM } }); const self = fn(strings, ...pexpr); if (singleton) { if (Object.keys(views).length !== 0) throw new Error("Singleton defined but additional properties supplied"); // Users are expected to call dispatchEvent on view, so the inner singleton // need to know about these events for the view to work // => events need to be copied over, if originating from here self.addEventListener("input", (evt) => { if (evt.target === self) { const clone = new evt.constructor(evt.type, evt); singleton.dispatchEvent(clone); } }); return Object.defineProperties(self, { value: { get: () => singleton.value, set: (val) => (singleton.value = val), configurable: true }, singleton: { value: singleton, enumerable: true } }); } // Non-singleton (Object or Array) return Object.defineProperties(self, { value: { get() { return Object.defineProperties( {}, Object.keys(views).reduce((acc, key) => { acc[key] = { get: () => views[key].value, set: (v) => (views[key].value = v), enumerable: true }; return acc; }, {}) ); }, set(newValues) { Object.entries(newValues).forEach(([key, newValue]) => { if (views[key]) { views[key].value = newValue; // Update of existing child value } else if (start && builder) { // Adding a new key const parent = start.parentNode; const newView = builder(newValue); views[key] = newView; parent.appendChild(newView); // Add top level entry too Object.defineProperty(self, key, { value: newView, enumerable: true, configurable: true }); } }); // If we are a dynamic Object, we need to remove keys too Object.entries(views).forEach(([key, oldValue]) => { if (!newValues.hasOwnProperty(key)) { // It needs to go const oldView = views[key]; delete views[key]; if (oldView.remove) oldView.remove(); delete self[key]; } }); }, configurable: true }, ...Object.keys(views).reduce( // Add top level field to access the subviews in the parent viewof (acc, key) => { acc[key] = { get: () => views[key], set: (newView) => { const oldView = views[key]; delete views[key]; if (oldView.remove) oldView.remove(); // assigning an arrayView (special cased) if (oldView.length && newView.length) { newView = arrayView({ initial: newView, builder: oldView.builder }); } views[key] = newView; if (newView instanceof Node) self.appendChild(newView); }, enumerable: true, configurable: true }; return acc; }, {} ) }); }35:[] 30:{"id":"6dc8791f848dbe7d","slug":"barres-empilees-groupees-pour-cent-or-petits-multiples","title":"Barres Empilées, Groupées, Pour Cent ou Petits Multiples","thumbnail":"9b47159dba34ac9ac7c595afaf8c49ba0bad224952fe1696b77a40847b3f5158","access_level":"public","create_time":"$D2023-02-21T07:51:22.615Z","update_time":"$D2023-02-22T12:05:23.850Z","view_time":null,"first_public_time":"$D2024-04-24T13:35:09.737Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":1055,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"d3620e7df67703ac","slug":"production-design-guidelines","title":"Guide DataViz","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":"Barres Empilées, Groupées, Pour Cent ou Petits Multiples","cells":[{"id":0,"value":"md`# Barres Empilées, Groupées, Pour Cent ou Petits Multiples\n\n## pour guidelines \n\nAdaptation https://observablehq.com/d/7627c372cf16b491\n\nLes valeurs générées sont aléatoires . \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"viewof ctr = view`

${[\n \"n\",\n Inputs.range([1, 10], { step: 1, value: 3, label: \"Nombre de séries\" })\n ]}

${[\n \"m\",\n Inputs.range([5, 100], { step: 1, value: 20, label: \"Nombre de points\" })\n]}

${[\n \"layout\",\n Inputs.radio([\"Empilée\", \"Pour Cent\", \"Groupée\", \"Petits Multiples\"], {\n value: \"Empilée\",\n label: \"Choisissez la visualisation\"\n })\n ]}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"update = chart.update(ctr)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":113,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"color = (i) => d3.schemePaired[i]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"margin = ({ top: 40, right: 0, bottom: 40, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":960,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":958,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":956,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"