23:null 24:["$","title",null,{"children":"Barres verticales / horizontales.... | ToulouseDataviz | Observable"}] 2a:T67c,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 des barres" }) ]}

${[ "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(["Barres horizontales", "Barres verticales"], { value: "Barres verticales", 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?" }) ]}

${[ "arrondi", Inputs.radio(["Oui", "Non"], { value: "Non", label: "Arrondissez les barres?" }) ]}

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

`2b:Tc7b,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)); if (ctr.orientation == "Barres horizontales") { const plot = Plot.plot({ style: { background: "#f0f0f0", color: "black" }, width: ctr.largeur, height: actions_par_thematique.length * 30, marginLeft: 280, marginBottom: 50, marginTop: 20, marginRight: 50, x: { axis: "bottom", label: "Nombres d'actions", axis: ctr.echelle != "Valeurs sur les barres" ? true : false, grid: ctr.quadrillage == "Oui" ? true : false }, y: { label: "Thématiques", domain: actions_par_thematique.map((d) => d.thématique), grid: ctr.quadrillage == "Oui" ? true : false }, color: { domain: resources, range: colorScheme }, marks: [ Plot.barX(actions_par_thematique, { x: "actions", y: "thématique", fill: "thématique", fillOpacity: 1, rx: ctr.arrondi == "Oui" ? 6 : 0, style: { fontSize: 30 } }), Plot.text(actions_par_thematique, { x: "actions", y: "thématique", text: ctr.echelle != "Echelle sur l'axe des valeurs" ? (d) => d.actions : "", dx: 10, fill: "black" }) ] }); return plot; } if (ctr.orientation == "Barres verticales") { const plot = Plot.plot({ style: { background: "#f0f0f0", color: "black" }, width: ctr.largeur, height: actions_par_thematique.length * 30, //ctr.hauteur, marginLeft: 30, marginBottom: 200, marginTop: 50, x: { 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 barres" ? true : false, label: ". Nombre d'actions" }, color: { domain: resources, range: colorScheme }, marks: [ Plot.barY(actions_par_thematique, { x: "thématique", y: "actions", fill: "thématique", fillOpacity: 1, rx: ctr.arrondi == "Oui" ? 6 : 0 }), Plot.text(actions_par_thematique, { x: "thématique", y: "actions", text: ctr.echelle != "Echelle sur l'axe des valeurs" ? (d) => d.actions : "", dy: -10, 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":1675695921868.053,"size":44881},{"id":"1e766683352d088b232098b53419de81d84a0408226efec68f2ac82ac08a92dd887661c6be6410420a58ede3b0665a6293a721c58910a3648e7b08f289ba1010","href":"https://static.observableusercontent.com/files/1e766683352d088b232098b53419de81d84a0408226efec68f2ac82ac08a92dd887661c6be6410420a58ede3b0665a6293a721c58910a3648e7b08f289ba1010","name":"actions_par_thematique@2.csv","type":"text/csv","lastModified":1681479878313.93,"size":211}] 27:{"id":"8f84608b19ae8f22","slug":"barres-verticales-horizontales","title":" Barres verticales / horizontales.... ","thumbnail":"2ec1cfd0f4f1b3c4831c6d0e7853fc59362983725d70df71c3e71a97f677bf3d","access_level":"public","create_time":"$D2023-02-06T15:05:21.868Z","update_time":"$D2026-04-12T17:06:18.058Z","view_time":null,"first_public_time":"$D2024-04-24T13:33:15.958Z","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":6250,"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":[{"id":"03314001244c5e5c","reply_to_id":null,"content":"C'est maintenant par défaut dans le menu de chaque cellule","create_time":"$D2023-03-06T16:43:07.434Z","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":"8bbbd7e93a276d5b","reply_to_id":"03314001244c5e5c","content":"Oui mais la tu peux faire un embed de la cell download","create_time":"$D2023-03-06T16:58:24.178Z","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":"844cd4b15b2f1d4c","reply_to_id":"03314001244c5e5c","content":"Oui c'est vrai","create_time":"$D2023-03-06T17:06:35.922Z","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":2,"collection":{"id":"d3620e7df67703ac","slug":"production-design-guidelines","title":"Guide DataViz","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":" Barres verticales / horizontales.... ","cells":[{"id":4,"value":"note = md`\n# Barres verticales / horizontales.... \n## pour guidelines\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6013,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":6247,"value":"ctr","pinned":true,"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.map((row) => ({\n thématique: row.key,\n actions: row.value.count\n }));\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":6218,"value":"//action_ = FileAttachment(\"actions_par_thematique@2.csv\").csv()","pinned":true,"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"