23:null 24:["$","title",null,{"children":"Diagramme en sucette / Lollipop | ToulouseDataviz | Observable"}] 2a:T664,viewof ctr = view`

${[ "largeur", Inputs.range([marginleft + 200, width], { step: 10, value: 700, label: "Réglez la largeur du graphique" }) ]}

${[ "color_barre", Inputs.radio(["Rose", "Vert", "Vert clair", "Bleu", "Bleu clair"], { value: "Rose", label: "Choisissez la couleur dominante " }) ]}

${[ "color_palette", Inputs.radio(["Multi-couleur", "Dégradé d'une couleur", "Une couleur"], { value: "Une couleur", label: "Choisissez une palettes de couleurs" }) ]}

${[ "orientation", Inputs.radio(["Horizontale", "Verticale"], { value: "Verticale", label: "Choisissez l'orientation du graphique" }) ]}

${[ "ordre", Inputs.radio( [ "Ordre alphabétique", "Quantité croissante", "Quantité décroissante", "Sans ordre" ], { value: "Ordre alphabétique", label: "Choisissez le classement des données" } ) ]}

${[ "quadrillage", Inputs.radio(["Oui", "Non"], { value: "Non", label: "Quadrillage?" }) ]}

${[ "rayon", Inputs.range([2, 20], { step: 0.5, value: 5, label: "Ajustez la taille des cercles" }) ]}

${[ "echelle", Inputs.radio( ["Echelle sur l'axe des valeurs", "Valeurs sur les sucettes", "Les deux"], { value: "Echelle sur l'axe des valeurs", label: "Choisissez le type d'échelles?" } ) ]}

`2b:Tf18,chart = { const resources = actions_par_thematique.map((d) => d.thématique); const colorScheme = ctr.color_palette == "Multi-couleur" ? d3.schemePaired : ctr.color_palette == "Dégradé d'une couleur" ? d3.quantize( d3.interpolateHcl(couleursRampLight, color_value(ctr.color_barre)), 14 ) : ctr.color_palette == "Une couleur" ? new Array(color_value(ctr.color_barre)) : ctr.color_barre == "" ? ["white"] : new Array(color_value(ctr.color_barre)); // ____________________________________________________ Horizontale ________________________ if (ctr.orientation == "Horizontale") { const plot = Plot.plot({ style: { background: "#f0f0f0", color: "black" }, width: ctr.largeur, height: actions_par_thematique.length * 45, marginLeft: 300, marginBottom: 50, marginTop: 20, marginRight: 50, x: { tickPadding: 6, tickSize: 0, axis: ctr.echelle != "Valeurs sur les sucettes" ? true : false, grid: ctr.quadrillage == "Oui" ? true : false, label: "Nombre d'actions" }, y: { domain: actions_par_thematique.map((d) => d.thématique), label: "Thématiques", grid: ctr.quadrillage == "Oui" ? true : false }, color: { domain: resources, range: colorScheme }, marks: [ Plot.ruleY(actions_par_thematique, { x: "actions", y: "thématique", stroke: "thématique", fillOpacity: 1, strokeWidth: 2 }), Plot.dot(actions_par_thematique, { x: "actions", y: "thématique", fill: "thématique", fillOpacity: 1, style: { fontSize: 30 }, strokeWidth: 2, r: ctr.rayon }), Plot.text(actions_par_thematique, { x: "actions", y: "thématique", text: ctr.echelle != "Echelle sur l'axe des valeurs" ? (d) => d.actions : "", dx: ctr.rayon + 7, fill: "black" }) ] }); return plot; } // ____________________________________________________ Vertical ________________________ if (ctr.orientation == "Verticale") { const plot = Plot.plot({ style: { background: "#f0f0f0", color: "black" }, width: ctr.largeur, height: actions_par_thematique.length * 45, //ctr.hauteur, marginLeft: 30, marginBottom: 200, marginTop: 50, x: { tickPadding: 6, tickSize: 0, domain: actions_par_thematique.map((d) => d.thématique), axis: "bottom", tickRotate: -45, grid: ctr.quadrillage == "Oui" ? true : false }, y: { grid: ctr.quadrillage == "Oui" ? true : false, axis: ctr.echelle != "Valeurs sur les sucettes" ? true : false, label: ". Nombre d'actions" }, color: { domain: resources, range: colorScheme }, marks: [ Plot.ruleX(actions_par_thematique, { y: "actions", x: "thématique", stroke: "thématique", strokeWidth: 2 }), Plot.dot(actions_par_thematique, { y: "actions", x: "thématique", fill: "thématique", fillOpacity: 1, style: { fontSize: 30 }, strokeWidth: 2, r: ctr.rayon }), Plot.text(actions_par_thematique, { x: "thématique", y: "actions", text: ctr.echelle != "Echelle sur l'axe des valeurs" ? (d) => d.actions : "", dy: -ctr.rayon - 7, fill: "black" }) ] }); return plot; } }2c: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; }, {}) }); }2d: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; }, {} ) }); }2e:[{"id":"84b6effafa666b3092f9e65347afb25d21c5657468d907424e91df6f7bc7b73a07e7ae429bc57d3f18d2f784c140ac971a1857ca8d7272169238a17fd7661ad0","href":"https://static.observableusercontent.com/files/84b6effafa666b3092f9e65347afb25d21c5657468d907424e91df6f7bc7b73a07e7ae429bc57d3f18d2f784c140ac971a1857ca8d7272169238a17fd7661ad0","name":"actions-ministeres-fdr.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1713353645275.32,"size":44881}] 27:{"id":"824b3140cc436a40","slug":"diagramme-en-sucette-lollipop","title":" Diagramme en sucette / Lollipop ","thumbnail":"48cfed63007b750135ca073386b9d1b986c41cabcf318cdd8143f2061074220f","access_level":"public","create_time":"$D2024-04-17T11:34:05.275Z","update_time":"$D2024-04-29T17:08:20.829Z","view_time":null,"first_public_time":"$D2024-04-24T13:28:58.619Z","fork":{"id":"8f84608b19ae8f22","slug":"barres-verticales-horizontales","title":" Barres verticales / horizontales.... ","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"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":6369,"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":true,"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 en sucette / Lollipop ","cells":[{"id":4,"value":"note = md`\n# Diagramme en sucette / Lollipop \n## pour guidelines\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6013,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":5228,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2510,"value":"md`#### Exportez l'image du graphique`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5731,"value":"graph_png = DOM.download(\n await rasterize(chart),\n \"Actions_des_ministères.png\",\n \"Download as PNG\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5983,"value":"viewof table = Inputs.table(actions_par_thematique, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5212,"value":"action_nest = d3\n .nest()\n .key((d) => d.Thématiques)\n .rollup((v) => ({\n count: v.length\n }))\n .entries(sheet1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5220,"value":"actions_par_thematique = {\n const temp = action_nest\n .map((row) => ({\n thématique: row.key,\n actions: row.value.count\n }))\n .filter((d) => d.actions > 4);\n return ctr.ordre == \"Ordre alphabétique\"\n ? temp.sort(function (a, b) {\n if (a.thématique < b.thématique) return -1;\n else if (a.thématique > b.thématique) return 1;\n return 0;\n })\n : ctr.ordre == \"Quantité décroissante\"\n ? temp.sort((a, b) => b.actions - a.actions)\n : ctr.ordre == \"Quantité croissante\"\n ? temp.sort((a, b) => a.actions - b.actions)\n : d3.shuffle(temp);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5301,"value":"actions = FileAttachment(\"actions-ministeres-fdr.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5305,"value":"sheet1 = actions.sheet(\"Feuil1\", { headers: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5426,"value":"marginleft = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":5601,"value":"couleursRampLight = ctr.color_barre == \"Rose\"\n ? \"#6d6875\"\n : ctr.color_barre == \"Vert\"\n ? \"#1b4332\"\n : ctr.color_barre == \"Vert clair\"\n ? \"#4c956c\"\n : ctr.color_barre == \"Bleu\"\n ? \"#013a63\"\n : ctr.color_barre == \"Bleu clair\"\n ? \"#2c7da0\"\n : \"#ffffff\"","pinned":false,"hidden":true,"mode":"ojs"},{"id":6072,"value":"color_value = d3\n .scaleOrdinal()\n .domain([\"Rose\", \"Vert\", \"Vert clair\", \"Bleu\", \"Bleu clair\"])\n .range([\"#fb9a99\", \"#33a02c\", \"#b2df8a\", \"#1f78b4\", \"#a6cee3\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":6015,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":6018,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":6021,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5780,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5112,"value":"import { select, color, radio, slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5116,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5733,"value":"import { rasterize, serialize } from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5123,"value":"md`\n## Notes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5127,"value":"md`Source des données`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5324,"value":"md`https://www.data.gouv.fr/fr/datasets/liste-des-actions-prises-par-les-ministeres-dans-le-cadre-des-feuilles-de-routes-ministerielles/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 28:"$27:body"