24:null 25:["$","title",null,{"children":"Boxplot guide datavisualisation | ToulouseDataviz | Observable"}] 2a:T4b0,viewof ctr = view`

${[ "attribut", Inputs.select(dataKeys, { value: dataKeys[1], label: "Choisissez la variable à visualiser" }) ]}

${[ "mois", Inputs.select(Array.from(new Set(raw_data.map((d) => d.DATE_MONTH))), { value: "1", label: "Choisissez le mois de l'année" }) ]}

${[ "add_point", Inputs.radio(["Oui", "Non"], { value: "Non", label: "Visualiser les points ? " }) ]}

${[ "jitterWidth", Inputs.range([0, 100], { value: "20", step: 5, label: "Selectionnez l'étalement des points" }) ]}

${[ "extended_scale", Inputs.radio(["Oui", "Non"], { value: "Non", step: 5, label: "Etendre l'échelle ?" }) ]}

${[ "add_color", Inputs.radio(["Oui", "Non"], { value: "Non", step: 5, label: "Ajouter des couleurs dans les boites ? " }) ]}

${[ "diff_annee", Inputs.radio(["Oui", "Non"], { value: "Non", step: 5, label: "Différencier les années ? " }) ]}

`2b:T101a,boxplot = { const w = 700, h = 500, svg = d3.select(DOM.svg(w, h)).style("background", "#f0f0f0"); const min = d3.min(data.map((d) => d[ctr.attribut])); const max = d3.max(data.map((d) => d[ctr.attribut])); const xmin = ctr.extended_scale == "Oui" ? min - 3 : -5; const xmax = ctr.extended_scale == "Oui" ? max + 3 : 35; const x = d3 .scaleBand() .range([80, w / 1.6]) .domain(["PARIS-MONTSOURIS (75)", "PERPIGNAN (66)"]) .paddingInner(1) .paddingOuter(0.5); const y = d3 .scaleLinear() .domain([xmin, xmax]) .range([h - 100, 10]); svg .append("g") .attr("transform", "translate(0," + 400 + ")") .call(d3.axisBottom(x)) .attr("font-size", "14px"); svg .append("g") .call(d3.axisLeft(y)) .attr("font-size", "14px") .attr("transform", "translate(80,0)"); // -------------Tracé des lignes verticales ----------------- svg .selectAll("vertLines") .data(sumDat) .enter() .append("line") .attr("x1", function (d) { return x(d.key); }) .attr("x2", function (d) { return x(d.key); }) .attr("y1", function (d) { return y(d.value.min); }) .attr("y2", function (d) { return y(d.value.max); }) .attr("stroke", "black") .attr("stroke-width", "1px") .style("width", 40); var boxWidth = 80; // -------------Tracé titre ----------------- svg .append("text") .attr("transform", "translate(" + 100 + "," + 470 + ")") .style("text-anchor", "left") .attr("font-size", 18) .attr("fill", "#660066") .text( ctr.attribut + " moyenne du mois : " + ctr.mois + " entre 1933 et 2023" ); // -------------Tracé des boites ----------------- svg .selectAll("boxes") .data(sumDat) .enter() .append("rect") .attr("x", function (d) { return x(d.key) - boxWidth / 2; }) .attr("y", function (d) { return y(d.value.q3); }) .attr("height", function (d) { return y(d.value.q1) - y(d.value.q3); }) .attr("width", boxWidth) .attr("stroke-width", "1px") .attr("stroke", "black") //.style("fill", "#69b3a2"); .style( "fill", ctr.add_color == "Oui" ? (d) => (d.key == "PARIS-MONTSOURIS (75)" ? "lightblue" : "lightgreen") : "white" ); // -------------Tracé des médianes ----------------- svg .selectAll("medianLines") .data(sumDat) .enter() .append("line") .attr("x1", function (d) { return x(d.key) - boxWidth / 2; }) .attr("x2", function (d) { return x(d.key) + boxWidth / 2; }) .attr("y1", function (d) { return y(d.value.median); }) .attr("y2", (d) => y(d.value.median)) .attr("stroke-width", "1px") .attr("stroke", "black"); // -------------Tracé des cercles ----------------- if (ctr.add_point == "Oui") { svg .selectAll("indPoints") .data(data) .enter() .append("circle") .attr("cx", function (d) { return ( x(d.localite) - ctr.jitterWidth / 2 + Math.random() * ctr.jitterWidth ); }) .attr("cy", function (d) { return y(d[ctr.attribut]); }) .attr("r", r) //.style("fill", "black") .attr( "fill", ctr.diff_annee == "Oui" ? (d) => (+d.annee < 1978 ? "blue" : "orange") : "light-grey" ) .attr("opacity", 0.5) .text(function (d) { return d[ctr.attribut]; }); } // ------------- text couleur ----------------- if ((ctr.diff_annee == "Oui") & (ctr.add_point == "Oui")) { svg .append("text") .attr("transform", "translate(" + 420 + "," + 350 + ")") .style("text-anchor", "right") .attr("font-size", 12) .attr("fill", "blue") .text("Bleu : entre 1933 et 1978"); svg .append("text") .style("text-anchor", "right") .attr("font-size", 12) .attr("transform", "translate(" + 420 + "," + 335 + ")") .attr("fill", "orange") .text("Orange : entre 1978 et 2023"); } return svg.node(); }2c:T46b,tooltip = { boxplot; const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .text("ege"); d3.selectAll("circle") .on("mouseover", function (d) { d3.select(this) .transition() .attr("r", 2 * r); //.style("fill", "grey"); }) .on("mousemove", function (d) { return tooltip .style("background-color", "#c5c5c5") .html( `\ Année : ${d.annee}
\ Mois : ${d.mois}
\ Température en °C : ${d[ctr.attribut]}
\ ` ) .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 20 + "px") .style("visibility", "visible"); }) .on("mouseout", function () { d3.select(this) .transition() .attr("r", r) //.style("fill", "lightgrey"); .attr( "fill", ctr.diff_annee == "Oui" ? (d) => (+d.annee < 1978 ? "blue" : "orange") : "light-grey" ); return tooltip.html(``).style("visibility", "hidden"); }); }2d: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; }, {}) }); }2e: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; }, {} ) }); }2f:[{"id":"db87786d7e477241dff9737989dacbebb2bf32ffbc85a1e23868ac162b2f97996810411b97d4cdaf73968527192ea09a1e78319097a87ac2d7a26984b0f4085b","href":"https://static.observableusercontent.com/files/db87786d7e477241dff9737989dacbebb2bf32ffbc85a1e23868ac162b2f97996810411b97d4cdaf73968527192ea09a1e78319097a87ac2d7a26984b0f4085b","name":"mean_de_min-max_boxplot@2.csv","type":"text/csv","lastModified":1704810206507.923,"size":182265}] 28:{"id":"8dfbdd162c4a84ef","slug":"boxplot-guide-datavisualisation","title":"Boxplot guide datavisualisation","thumbnail":"56fc39c7ef8260504211a1f034d7ca86007308ed939baac1f1871f5a66dd1598","access_level":"public","create_time":"$D2024-01-09T12:07:30.197Z","update_time":"$D2024-01-09T17:19:05.499Z","view_time":null,"first_public_time":"$D2024-01-09T12:07:30.197Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":566,"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":0,"collection":{"id":"d3620e7df67703ac","slug":"production-design-guidelines","title":"Guide DataViz","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":"Boxplot guide datavisualisation","cells":[{"id":0,"value":"# Boxplot guide datavisualisation\n\nMesure des températures minimales et maximales moyennes de chaque mois entre 1933 et 2023.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":349,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"r = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"md`\n## Data \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"raw_data = FileAttachment(\"mean_de_min-max_boxplot@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"data = raw_data\n .filter((d) => (d.DATE_MONTH == ctr.mois) & (d.Température_min != 0))\n .map(function (d) {\n return {\n localite: d.NOM_USUEL,\n annee: d.DATE_YEAR,\n mois: d.DATE_MONTH,\n Température_min: +(+d.Température_min).toFixed(1),\n Température_max: +(+d.Température_max).toFixed(1),\n dg: +d.DG,\n rr: +(+d.RR).toFixed(1)\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"sumDat = {\n var sumstat = d3\n .nest()\n .key(function (d) {\n return d.localite;\n })\n .rollup(function (d) {\n var q1 = d3.quantile(\n d.map((g) => g[ctr.attribut]).sort(d3.ascending),\n 0.25\n );\n var median = d3.quantile(\n d.map((g) => g[ctr.attribut]).sort(d3.ascending),\n 0.5\n );\n var q3 = d3.quantile(\n d.map((g) => g[ctr.attribut]).sort(d3.ascending),\n 0.75\n );\n var iqr = q3 - q1;\n var min = q1 - 1.5 * iqr;\n var max = q3 + 1.5 * iqr;\n var scale = d3.max(d.map((g) => g[ctr.attribut]));\n return {\n q1: q1,\n median: median,\n q3: q3,\n interQuantileRange: iqr,\n min: min,\n max: max,\n scale: scale > max ? scale : max\n };\n })\n .entries(data);\n return sumstat;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"dataKeys = d3\n .keys(raw_data[0])\n .filter((element, index) => (index == 4) | (index == 5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"function calculateValues(d, key) {\n var q1 = d3.quantile(d.map((g) => g[key]).sort(d3.ascending), 0.25);\n var median = d3.quantile(d.map((g) => g[key]).sort(d3.ascending), 0.5);\n var q3 = d3.quantile(d.map((g) => g[key]).sort(d3.ascending), 0.75);\n var iqr = q3 - q1;\n var min = q1 - 1.5 * iqr;\n var max = q3 + 1.5 * iqr;\n return { key: key, values: [q1, median, q3, iqr, min, max] };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`\n## Import \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 29:"$28:body"