23:null 24:["$","title",null,{"children":"Carte de chaleur - Heatmap | ToulouseDataviz | Observable"}] 2a: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; }, {}) }); }2b: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; }, {} ) }); }2c:[{"id":"1f975450a02647404318e5073829087e6b3a717ce1bf75e120936f14a95ddecabe350448bbb22affca432dba6107d213b7bf0f39fffab8d3f7621f6f1d8089aa","href":"https://static.observableusercontent.com/files/1f975450a02647404318e5073829087e6b3a717ce1bf75e120936f14a95ddecabe350448bbb22affca432dba6107d213b7bf0f39fffab8d3f7621f6f1d8089aa","name":"mean_de_min_heatmap@5.csv","type":"text/csv","lastModified":1705877187524.117,"size":6887}] 27:{"id":"12d3429245863865","slug":"carte-de-chaleur-heatmap","title":"Carte de chaleur - Heatmap","thumbnail":"3e9e7b3a6068c054bcca7c2aafd2a6dddc1ef37b9468b3e3c464e559de327f75","access_level":"public","create_time":"$D2024-01-21T19:05:53.804Z","update_time":"$D2024-01-29T13:35:47.678Z","view_time":null,"first_public_time":"$D2024-04-24T13:32:13.042Z","fork":{"id":"c2a7e7d7079f2af0","slug":"heatmap-1","title":"Heatmap – Lösung","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"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":577,"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":"Carte de chaleur - Heatmap","cells":[{"id":0,"value":"# Carte de chaleur - Heatmap\n\nTestez par vous-même.","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"viewof ctr = view`

${[\n \"couleur\",\n Inputs.select(colors, {\n label: \" Choisir les couleurs\",\n format: (x) => x.value,\n value: colors.find((t) => t.value === \"rdBu\")\n })\n ]}

\n\n

${[\n \"extent\",\n Inputs.range([7, 20], {\n label: \" Modifier la gamme des couleurs\",\n step: 1,\n value: 15\n })\n]}

\n\n

${[\n \"inverse\",\n Inputs.toggle({ label: \" Inverser les couleurs\", value: false })\n]}

\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"heatmap_plot = html`\n

Temperatures mensuelles moyennes à Paris

${colorLegend}

\n \n

${tempPlot1}

Source: Météo-France

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"tempPlot1 = {\n //\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"class\", \"chart\");\n\n const g = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n\n g.append(\"g\").attr(\"transform\", `translate(0, ${boundedHeight})`).call(xAxis);\n g.append(\"g\").attr(\"transform\", `translate(0, 0)`).call(yAxis);\n\n months.forEach((month) => {\n g.append(\"g\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d) => x(d.time))\n .attr(\"y\", y(month))\n .attr(\"width\", x.bandwidth)\n .attr(\"height\", y.bandwidth)\n .attr(\"fill\", (d) => color(d[month] - meanTemp));\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"data = FileAttachment(\"mean_de_min_heatmap@5.csv\").csv({\n typed: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"### Configuration","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"margin = ({\n top: 10,\n bottom: 25,\n left: 30,\n right: 25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"boundedWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"boundedHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"### Couleur, échelle et légende","pinned":false,"hidden":false,"mode":"md"},{"id":378,"value":"colors = [\n { value: \"rdBu\", text: d3.interpolateRdBu },\n { value: \"viridis\", text: d3.interpolateViridis },\n { value: \"PiYG\", text: d3.interpolatePiYG },\n { value: \"Turbo\", text: d3.interpolateTurbo }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"color_choice = ctr.couleur.text","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"color = ctr.inverse\n ? d3\n .scaleDiverging((t) => color_choice(t))\n .domain([-ctr.extent, 0, ctr.extent])\n : d3\n .scaleDiverging((t) => color_choice(1 - t))\n .domain([-ctr.extent, 0, ctr.extent])","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"colorLegend = Legend(color, { title: \"°C\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"### échelles et axes ","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"x = d3\n .scaleBand()\n .domain(data.map((d) => d.time))\n .range([0, boundedWidth])\n .padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"y = d3.scaleBand().domain(months).range([0, boundedHeight]).padding(0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"xAxis = d3\n .axisBottom(x)\n .tickValues(data.map((d) => d.time).filter((d) => d % 10 === 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"yAxis = d3.axisLeft(y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"meanTemp = d3.mean(data.map((d) => d.year)).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"months = Object.keys(data[0]).slice(1, 13)","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"### Style","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":506,"value":"### Import ","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"function view(strings, ...exprs) {\n return wrap(htl.html, strings, ...exprs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}} 28:"$27:body"