2b:null 2c:["$","title",null,{"children":"Diagramme sectoriel - Camembert | ToulouseDataviz | Observable"}] 31:T1937,chart = { const strokeColor = theme === "dark" ? "white" : "black"; const arcStrokeColor = "#555"; const _nbMaxSlices = Math.min(ctr.nbMaxSlices, data_limited_slice.length); let _data = [...data_limited_slice]; // sort for legend const startAngleRad = startAngle * (Math.PI / 180); const endAngleRad = endAngle * (Math.PI / 180); // sort for pie const pie = d3 .pie() .startAngle(startAngleRad) .endAngle(endAngle * (Math.PI / 180)) .sort(sortFunctorWithWSJ(_data)) .value(function (d) { return d.value; }); const arcs = pie(_data); const height = Math.min(width, 500); const isOnLeftSide = (d) => { let _midAngle = (midAngle(d.startAngle, d.endAngle) + Math.PI * 2) % (Math.PI * 2); return _midAngle < Math.PI; }; const fontSize = 12; //non mais allo, refactoring en 2023 ? const buildValue = (d) => { return `${d.data.value.toLocaleString("fr-FR")}`; }; const buildLabel = (d) => { return `${d.data.poste}`; }; const buildSmallLabel = (d) => { return `${d.data.poste.slice(0, 5) + "..."}`; }; const buildFulllegend = (d) => { return `${buildLabel(d)}: ${buildValue(d)}`; }; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;") .style("background", "#f0f0f0"); const adaptativeRadius = () => { if (ctr.legendType === "à l'intérieur") { return 1; } if (ctr.legendType === "sur le côté") { if (width > 900) { return 1; } else if (width > 400) { return 0.7; } else { return 0.7; } } if (ctr.legendType === "ligne d'attache") { if (width > 900) { return 1; } else if (width > 700) { return 0.8; } else if (width > 600) { return 0.7; //0.45; } else if (width > 400) { return 0.6; //0.4; } else { return 0.5; //0.2; } } else return 1; }; const radius = Math.min(width * adaptativeRadius(), height * adaptativeRadius()) / 2; const innerArc = d3 .arc() .outerRadius(radius * 0.8) .innerRadius(radius * (ctr.donut ? 0.4 : 0.0)); const outerArc = d3 .arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9); if (ctr.donut) { /* ----- total ------ */ svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", fontSize * 1.2) .attr("text-anchor", "middle") .attr("fill", strokeColor) .append("text") .call((text) => text .append("tspan") .attr("y", "-0.4em") .text("Total :") ) .call((text) => text .append("tspan") .attr("x", 0) .attr("y", "0.9em") .text(d3.sum(_data, (d) => d.value).toLocaleString("fr-FR")) ); } /* ------- pie slices -------*/ svg .append("g") .attr("fill", strokeColor) .selectAll("path") .data(arcs) .join("path") .attr("fill", getColorFromMapWithSlice) .style("stroke", arcStrokeColor) .style("stroke-width", 2) .attr("d", innerArc); /* ------- text labels inside -------*/ if (ctr.legendType === "à l'intérieur") { svg .append("g") .attr("font-size", fontSize) .selectAll("text") .data(arcs) .join("text") .attr("transform", function (d) { var pos = innerArc.centroid(d); pos[0] = (pos[0] - (fontSize * 0.65 * buildLabel(d).length) / 2) * 1.2; pos[1] = pos[1] * 1.4; return `translate(${pos})`; }) .attr("fill", strokeColor) .text((d) => buildLabel(d)) .append("svg:tspan") // cette misère avec d3... https://stackoverflow.com/a/19589216 .attr("dx", -fontSize * 2.1) .attr("dy", (d) => fontSize * 1.1) .text((d) => buildValue(d)); } /* ------- polylines: text labels -------*/ if (ctr.legendType === "ligne d'attache") { svg .append("g") .attr("font-size", fontSize) .selectAll("text") .data(arcs) .join("text") .attr("transform", function (d) { var pos = outerArc.centroid(d); pos[0] = radius * (isOnLeftSide(d) ? 1 : -1); pos[1] = pos[1] + fontSize * 0.3; return `translate(${pos})`; }) .attr("text-anchor", (d) => (isOnLeftSide(d) ? "start" : "end")) .attr("fill", strokeColor) .text((d) => (width < 500 ? buildSmallLabel(d) : buildFulllegend(d))) .append("svg:tspan") // cette misère avec d3... https://stackoverflow.com/a/19589216 .attr("dx", -fontSize * 2.1) .attr("dy", (d) => fontSize * 1.1) .text((d) => (width < 500 ? buildValue(d) : "")); /* ------- polylines: lines joining slice to text -------*/ svg .append("g") .selectAll("polyline") .data(arcs) .join("polyline") .attr("opacity", ".3") .attr("stroke", strokeColor) .attr("stroke-width", "2px") .attr("fill", "none") .attr("points", function (d) { var pos = outerArc.centroid(d); pos[0] = radius * 0.95 * (isOnLeftSide(d) ? 1 : -1); return [innerArc.centroid(d), outerArc.centroid(d), pos]; }); } if (ctr.legendType === "sur le côté") { let legend; if (width > 700) { legend = svg .append("g") .attr("transform", `translate(${radius + 20},${-radius + 40})`); } else { legend = svg .append("g") .attr("transform", `translate(${-radius},${+radius})`); } legend .selectAll(null) .data(arcs) .enter() .append("rect") .attr("y", (d) => fontSize * d.index * 1.8) .attr("width", fontSize) .attr("height", fontSize) .attr("fill", getColorFromMapWithSlice) .attr("stroke", strokeColor) .style("stroke-width", "1px"); legend .selectAll(null) .data(arcs) .enter() .append("text") .text((d) => buildFulllegend(d)) //d => d.name .attr("x", fontSize * 1.5) .attr("y", (d) => fontSize * d.index * 1.8 + fontSize) .style("font-size", `${fontSize}px`); } // title svg .append("g") .attr("transform", `translate(${-radius + title.length},${radius + 20})`) .append("text") .attr("font-size", fontSize * 1.5); return svg.node(); }32:T836,buildColorMap = () => { const data = [...data_limited_slice]; if (ctr.gradientColor === "spectral") { if (ctr.nbMaxSlices === 1) { return [d3.interpolateSpectral(0.1)]; } return d3.quantize( (t) => d3.interpolateSpectral(t * 0.8 + 0.1), gradientNbSteps ); } if (ctr.gradientColor === "rgb") { if (ctr.nbMaxSlices === 1) { return [startColor]; } return d3.quantize( (t) => d3.interpolateRgb(startColor, endColor)(t * 0.8 + 0.1), gradientNbSteps ); } if (ctr.gradientColor === "hsl") { if (ctr.nbMaxSlices === 1) { return [startColor]; } return d3.quantize( (t) => d3.interpolateHslLong(startColor, endColor)(t), gradientNbSteps ); } if (ctr.gradientColor === "monochrome") { if (ctr.nbMaxSlices === 1) { return [startColor]; } const hsl = d3.hsl(startColor); const notSatured = d3.rgb(d3.hsl(hsl.h, 0.1, hsl.l)); return d3.quantize( (t) => d3.interpolateHslLong(startColor, notSatured)(t), gradientNbSteps ); } if (ctr.gradientColor === "viridis") { if (ctr.nbMaxSlices === 1) { return [d3.interpolateViridis(0)]; } return d3.quantize((t) => d3.interpolateViridis(t), gradientNbSteps); } if (ctr.gradientColor === "plasma") { if (ctr.nbMaxSlices === 1) { return [d3.interpolatePlasma(0)]; } return d3.quantize((t) => d3.interpolatePlasma(t), gradientNbSteps); } if (ctr.gradientColor === "turbo") { if (ctr.nbMaxSlices === 1) { return [d3.interpolateTurbo(0.05)]; } return d3.quantize((t) => d3.interpolateTurbo(t + 0.05), gradientNbSteps); } if (ctr.gradientColor === "prédéfini") { let _data = [...data]; let colors = _data.map((d) => d.color); colors = colors.map((d, index) => colors[index % gradientNbSteps]); return colors; } if (ctr.gradientColor === "aucun") { let _data = [...data]; let colors = _data.map((d) => "lightgray"); colors = colors.map((d, index) => colors[index % gradientNbSteps]); return colors; } }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:[{"id":"2f6c44c21992f6dd631f87b1bc10e6de54ef37b0099c203f844bad7355e09335c33573f988c8091bb6f51a01143fa475a94b7b0de0aa1f682d5c30f773cd9579","href":"https://static.observableusercontent.com/files/2f6c44c21992f6dd631f87b1bc10e6de54ef37b0099c203f844bad7355e09335c33573f988c8091bb6f51a01143fa475a94b7b0de0aa1f682d5c30f773cd9579","name":"Empreinte_carbone_full-4.csv","type":"text/csv","lastModified":1673732520615.77,"size":1101}] 2f:{"id":"28851d767f1be180","slug":"diagramme-sectoriel-camembert","title":"Diagramme sectoriel - Camembert","thumbnail":"f88f339aa8222fbca478dccc86c0081218228e94b7ee48d0587e86cb1ad17782","access_level":"public","create_time":"$D2022-12-12T00:47:40.610Z","update_time":"$D2023-05-22T13:15:58.919Z","view_time":null,"first_public_time":"$D2024-04-24T13:32:35.733Z","fork":false,"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":982,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null}],"members":[{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null,"role":"editor"}],"comments":[{"id":"9205652a001ebfb4","reply_to_id":null,"content":"J'ai créé un fichier complet avec 5 catégories et 26 postes : data_full","create_time":"$D2022-12-20T15:27:44.333Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}},{"id":"d0684bf5f23ce729","reply_to_id":"9205652a001ebfb4","content":"okidoki","create_time":"$D2023-01-05T20:13:19.902Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null}},{"id":"d4dc1390a40ac88e","reply_to_id":null,"content":"c'est un peu sortir l'artillerie lourde mais la syntaxe d3 me sort par les trous de nez","create_time":"$D2023-01-05T20:42:23.319Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null}},{"id":"eceea2de8428306b","reply_to_id":null,"content":"Ce code n'est pas responsive. La seule responsiveness est la réduction du svg englobant. Rien à voir avec Notion ou notion2site","create_time":"$D2023-03-02T07:43:25.881Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null}},{"id":"3ebf6599ba859fe6","reply_to_id":"eceea2de8428306b","content":"Un pointeur vers un camembert responsive : https://observablehq.com/@d3/pie-chart","create_time":"$D2023-03-02T08:37:10.727Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null}}],"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":"Diagramme sectoriel - Camembert","cells":[{"id":0,"value":"md`\n# Diagramme sectoriel - Camembert\n\n## pour guidelines\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"viewof ctr_ = view`

${[\n \"groupByCategory\",\n Inputs.toggle({ label: \"Groupez par catégorie\", value: true })\n ]}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"viewof ctr = view`

${[\n \"nbMaxSlices\",\n Inputs.range([2, nbMaxElems], {\n step: 1,\n value: nbMaxElems,\n label: \"Nombre de parts\"\n })\n]}

${[\n \"useWSJsort\",\n Inputs.toggle({\n label: 'Ordre de tri proposé par le \"Wall Street Journal\"',\n value: false\n })\n ]}

${[\n \"legendType\",\n Inputs.select(legendTypes, {\n label: \"légende\",\n value: \"ligne d'attache\"\n })\n]}

${[\n \"donut\",\n Inputs.toggle({\n label: \"Donut\",\n value: false\n })\n ]}

${[\n \"hemicycle\",\n Inputs.toggle({\n label: \"Hémicycle\",\n value: false\n })\n]}

${[\n \"gradientColor\",\n Inputs.select(gradientColors, {\n label: \"Nuancier\",\n value: \"prédéfini\"\n })\n]}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":969,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"title = \"Emissions en Kg équivalents CO₂ par habitants en France 2019\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`Option de tri permet d'ajuster l'ordre des secteurs : le plus gros secteurs apparaîssent sur le côté droit en haut du diagramme et tous les autres secteurs apparaîssent sur le coté gauche en haut du diagramme per ordre décroissant. [Dona M. Wong, The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures, W.W. Norton & Company, 2010](https://books.google.fr/books/about/The_Wall_Street_Journal_Guide_to_Informa.html?id=RmaJPgAACAAJ&redir_esc=y)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"data = d3.csvParse(\n `name,value,color\nAlimentation , 24, #8DD3C7,\nConsommation, 16, #fb8072,\nTransport, 27, #80b1d3,\nDépenses publiques, 14, #bebada,\nHabitat, 19, #ffffb3\n`,\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"legendTypes = [\"à l'intérieur\", \"ligne d'attache\", \"sur le côté\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"sortMethods = [\"aucun\", \"par nom\", \"par valeur\"] // plus utilisé!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"gradientColors = [\n \"prédéfini\",\n \"aucun\",\n \"monochrome\",\n \"spectral\",\n \"rgb\",\n \"hsl\",\n \"viridis\",\n \"plasma\",\n \"turbo\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"/** returns the midangle */\nmidAngle = (startAngle, endAngle) => {\n return startAngle + (endAngle - startAngle) / 2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"sortFunctorWithWSJ = (data) => {\n if (!ctr.useWSJsort) {\n return null;\n }\n\n /* WSL recommended sorting for pie chart */\n /** see https://bl.ocks.org/vijithassar/3cc6ecbc0a8dcfaf4e47f44b97637012 */\n let _data = [...data];\n\n const first = _data[0];\n const last = _data[1];\n const rest = _data.slice(2);\n const ordered = [first, ...rest, last];\n return (a, b) => ordered.indexOf(a) - ordered.indexOf(b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"function buildPieRest(srcDataSet) {\n let result = srcDataSet.slice(0, ctr.nbMaxSlices - 1);\n const srcNbElems = srcDataSet.length;\n if (ctr.nbMaxSlices < srcNbElems) {\n result.push({\n catégorie: \"None\",\n poste: \"Autres\",\n value: d3.sum(\n srcDataSet\n .sort((a, b) => b.value - a.value)\n .slice(ctr.nbMaxSlices - 1, srcNbElems),\n (d) => d.value\n ),\n color: \"#cccccc\"\n });\n result = result.sort((a, b) => b.value - a.value);\n return result;\n } else {\n return srcDataSet;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"disabledPicker = ctr.gradientColor !== \"hsl\" &&\n ctr.gradientColor !== \"rgb\" &&\n ctr.gradientColor !== \"monochrome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"/*theme = Generators.observe((notify) => {\n const query = matchMedia(\"(prefers-color-scheme: dark)\");\n const changed = () => notify(query.matches ? \"dark\" : \"light\");\n changed();\n query.addListener(changed);\n return () => query.removeListener(changed);\n})*/\ntheme = \"light\" // dark","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"startColor = \"#ff4040\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"endColor =\"#4040ff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"See [introducing-arquero](https://observablehq.com/@uwdata/introducing-arquero)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":387,"value":"nbMaxElems = ctr_.groupByCategory ? aq_data_groupby.length : data_full.length","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"viewof startAngle = Inputs.range([-360, 360], {\n label: \"Angle de départ\",\n step: 45,\n value: ctr.hemicycle ? -90 : 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"viewof endAngle = Inputs.range([-360, 360], {\n label: \"Angle de fin\",\n step: 45,\n value: ctr.hemicycle ? 90 : 360\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"viewof gradientNbSteps = Inputs.range([1, nbMaxElems], {\n label: \"Répétion des couleurs\",\n step: 1,\n value: nbMaxElems\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"Sources de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":334,"value":"aq_data_groupby = aq\n .from(data_full)\n .groupby(\"catégorie\", \"color\")\n\n .rollup({\n value: (d) => op.sum(d.value)\n })\n .rename({ catégorie: \"poste\" })\n .objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"data_full = FileAttachment(\"Empreinte_carbone_full-4.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"data_limited_slice_groupBy = aq_data_groupby.slice(0, ctr.nbMaxSlices - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":367,"value":"data_limited_slice = buildPieRest(\n ctr_.groupByCategory ? aq_data_groupby : data_full\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"getColorFromMap = d3\n .scaleOrdinal()\n .domain(data_limited_slice.map((d) => d.value))\n .range(buildColorMap())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":537,"value":"getColorFromMapWithSlice = (d) =>\n ctr.nbMaxSlices < nbMaxElems\n ? d.poste === \"Autres\"\n ? \"gray\"\n : getColorFromMap(d.value)\n : getColorFromMap(d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"Original .ojs on [GitHub](https://github.com/vvivanloc/pf/tree/master/S1E1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`\n* Référence 1 : [Bob Rudis, Noam Ross and Simon Garnier, Introduction to the viridis color maps, 2021](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html)\n* Référence 2 : [Nathaniel Smith and Stéfan van der Walt, A Better Default Colormap for Matplotlib,A Better Default Colormap for Matplotlib, SciPy 2015](https://www.youtube.com/watch?v=xAoljeRJ3lU)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"