2e:null 2f:["$","title",null,{"children":"Color gradients comparison : linear or values-adapted lightness | Laurent Jégou | Observable"}] 34:T1d2f,map = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 480]) .style("width", "100%") .style("height", "auto"); let f = d3.format(".3"); let mapTitle = ""; let mapSubTitle = ""; let v = 0; // Map svg.selectAll("path") .data(fond.features) .enter().append("path") .attr ("fill", function(d) { v = parseFloat(d.properties[indicator]); let cec = dq.getClass(v); switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return paletteL[cec]; break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): return palette[cec]; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): return paletteMed[cec]; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): return paletteMeans[cec]; break; } }) .attr("d", path) .on("mouseover", function(d,i) { //debugger; div.transition().duration(200) .style("visibility", "visible"); var etiq = ""; //if (letyperep != "Variable") {etiq += ", il : " + f(cilv.table_il[i]);} div.text(parseFloat(i.properties[indicator])) .style("left", (d.pageX) + "px") .style("top", (d.pageY -30) + "px"); }) .on("mouseout", function() { div.transition().duration(200) .style("visibility", "hidden"); }) .append("title") .text(function(d) { v = parseFloat(d.properties[indicator]); return v; }); // Paris city grey contour svg.append("path") .datum(fondContour) .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 4) .attr("d", path); // Seine river svg.append("path") .datum(seine) .attr("fill", "none") .attr("stroke", "#bbb") //.attr("stroke", "#AAF") .attr("stroke-width", 12) .attr("stroke-opacity", 0.4) .attr("d", path); switch (indicator){ case "pmen_pauv": switch (language) { case "English": mapTitle = "Poverty"; mapSubTitle = "% of poor households, 2015"; break; case "Français": mapTitle = "Pauvreté"; mapSubTitle = "% de ménages pauvres, 2015"; break; } break; case "pmen_1ind": switch (language) { case "English": mapTitle = "1 pers. households"; mapSubTitle = "% of households, 2015"; break; case "Français": mapTitle = "Ménages de 1 personne"; mapSubTitle = "% des ménages, 2015"; break; } break; case "pmen_5ind": switch (language) { case "English": mapTitle = "Large households"; mapSubTitle = "% of 5+ pers. households, 2015"; break; case "Français": mapTitle = "Ménages de 5 pers. et +"; mapSubTitle = "% des ménages, 2015"; break; } break; case "pmen_prop": switch (language) { case "English": mapTitle = "Homeowners"; mapSubTitle = "% of owners, 2015"; break; case "Français": mapTitle = "Propriétaires"; mapSubTitle = "% des ménages, 2015"; break; } break; case "pmen_fmp": switch (language) { case "English": mapTitle = "Single-parent families"; mapSubTitle = "% of spf, 2015"; break; case "Français": mapTitle = "Fam. mono-parentales"; mapSubTitle = "% des ménages, 2015"; break; } break; case "pmen_coll": switch (language) { case "English": mapTitle = "Muli-fam. housings"; mapSubTitle = "% of dwellings, 2015"; break; case "Français": mapTitle = "Logts. collectifs"; mapSubTitle = "% des logements, 2015"; break; } break; case "plog_av45": switch (language) { case "English": mapTitle = "Dwellings constr. < 1945"; mapSubTitle = "% of dwellings, 2015"; break; case "Français": mapTitle = "Logts. constr. < 1945"; mapSubTitle = "% des logements, 2015"; break; } break; case "plog_ap90": switch (language) { case "English": mapTitle = "Dwellings constr. > 1990"; mapSubTitle = "% of dwellings, 2015"; break; case "Français": mapTitle = "Logts. constr. > 1990"; mapSubTitle = "% des logements, 2015"; break; } break; case "plog_soc": switch (language) { case "English": mapTitle = "Social housing"; mapSubTitle = "% of dwellings, 2015"; break; case "Français": mapTitle = "Logts. sociaux"; mapSubTitle = "% des logements, 2015"; break; } break; case "pmen_mais": switch (language) { case "English": mapTitle = "Houses"; mapSubTitle = "% of dwellings, 2015"; break; case "Français": mapTitle = "Maisons"; mapSubTitle = "% des logements, 2015"; break; } break; } // Title svg.append("g") .attr("transform", "translate(10, 20)") .append("text") .text(mapTitle) .attr("font-size", 22) .attr("font-weight", "bold"); // Subtitle svg.append("g") .attr("transform", "translate(10, 40)") .append("text") .text("Paris") .attr("font-size", 18) .attr("font-weight", "bold"); // Gradient type and classification let gtc = ""; if (gradientType !== "Palette") { switch (language) { case "English": gtc = "HCL interpolation btw 2 colors"; break; case "Français": gtc = "Interpolation HCL entre 2 couleurs"; break; } } else { gtc = gradientType + ": " + palc; } svg.append("g") .attr("transform", "translate(10, 70)") .append("text") .text(gtc) .attr("font-size", 14); svg.append("g") .attr("transform", "translate(10, 86)") .append("text") .text(paletteType+" gradient, "+classif+" classes") .attr("font-size", 14); // Sources svg.append("g") .attr("transform", "translate(10, 474)") .append("text") .text("Source : INSEE, 200m pixels, FILOSOFI, 2015") .attr("font-size", 12); // Legend var thePalette = Array(); switch (true) { case (paletteType === "Linear" || paletteType === "Linéaire"): thePalette = paletteL; break; case (paletteType === "Manual spline" || paletteType === "Spline Manuelle"): thePalette = palette; break; case (paletteType === "Medians" || paletteType === "Médianes"): thePalette = paletteMed; break; case (paletteType === "Means" || paletteType === "Moyennes"): thePalette = paletteMeans; break; } svg.append("g") .attr("transform", "translate(10, 120)") .append(() => Legend(d3.scaleThreshold(dq.breaks, thePalette), {title: mapSubTitle, heigth: 280, tickFormat: ".0f"})); // Scale bar svg.append("g") .call(echelle); return svg.node(); }35:T94d,{ let lt = ""; const doc = []; let str = "" let att = ""; if (attenuation !== 0) { switch (language) { case "English": att = ", adjusted: " + attenuation + "%"; break; case "Français": att = ", ajustement : " + attenuation + "%"; break; } } else { att = ""; } switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return Object.assign(html`

`, {value: null}); break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): switch (language) { case "English": lt = "Manual spline gradient" + att; break; case "Français": lt = "Gradient selon une courbe spline manuelle" + att; break; } str = JSON.stringify(JSON.stringify(palette)); doc.push(``+lt+`
${drawpal(palette.map(d => d3.color(d).hex()))}`); doc.push( `` ); return html`${doc.join("
")}`; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): switch (language) { case "English": lt = "Medians controlled spline gradient" + att; break; case "Français": lt = "Gradient selon une courbe spline des médianes" + att; break; } str = JSON.stringify(JSON.stringify(paletteMed)); doc.push(``+lt+`
${drawpal(paletteMed.map(d => d3.color(d).hex()))}`); doc.push( `` ); return html`${doc.join("
")}`; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): switch (language) { case "English": lt = "Means controlled spline gradient" + att; break; case "Français": lt = "Gradient selon une courbe spline des moyennes" + att; break; } str = JSON.stringify(JSON.stringify(paletteMeans)); doc.push(``+lt+`
${drawpal(paletteMeans.map(d => d3.color(d).hex()))}`); doc.push( `` ); return html`${doc.join("
")}`; break; } }36:T91d,Plot.plot({ style: "overflow: visible;", height: 400, width: 1000, x: { label: "Class", domain: [1, nbc], ticks: nbc }, y: { label: "Indicators", grid: true }, marks: [ Plot.ruleY([0]), Plot.lineY(binsq, {x: "cl", y: "meanv", strokeWidth: 2, stroke: "green"}), Plot.text(binsq.slice(nbc-1), {x: "cl", y: "meanv", dy: -12, text: ["Means"]}), Plot.lineY(binsq, {x: "cl", y: "medianv", strokeWidth: 2, stroke: "blue"}), Plot.text(binsq.slice(nbc-1), {x: "cl", y: "medianv", dy: -12, text: ["Medians"]}), Plot.lineY(binsq, {x: "cl", y: function(d,i) { switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return 100 - d3.lab(paletteL[i]).l; break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): return 100 - lstars[i].y; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): return 100 - d3.lab(paletteMed[i]).l; //return (lstarMedAt[i].y - (d3.lab(c1).l - binsq[0].medianv * coefMed))/coefMed; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): return 100 - d3.lab(paletteMeans[i]).l; //return (lstarMeansAt[i].y - (d3.lab(c1).l - binsq[0].meanv * coefMean))/coefMean; break; } }, strokeWidth: 2, stroke: "red"}), Plot.text(binsq.slice(nbc-1), {x: "cl", y: function(d,i) { switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return 100 - d3.lab(paletteL[nbc-1]).l; break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): return 100 - lstars[nbc-1].y; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): return 100 - d3.lab(paletteMed[nbc-1]).l; //return (lstarMedAt[nbc-1].y - (d3.lab(c1).l - binsq[0].medianv * coefMed))/coefMed; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): return 100 - d3.lab(paletteMeans[nbc-1]).l; //return (lstarMeansAt[nbc-1].y - (d3.lab(c1).l - binsq[0].meanv * coefMean))/coefMean; break; } }, dy: -12, text: ["L*"]}), ] })37:T918,Plot.plot({ style: "overflow: visible;", height: 400, width: 1000, x: { label: "Value", domain: [vt[0], vt[vt.length -1]] }, y: { label: "Indicators", grid: true }, marks: [ Plot.ruleY([0]), Plot.lineY(binsq, {x: "x", y: "meanv", strokeWidth: 2, stroke: "green"}), Plot.text(binsq.slice(nbc-1), {x: "x", y: "meanv", dy: -12, text: ["Means"]}), Plot.lineY(binsq, {x: "x", y: "medianv", strokeWidth: 2, stroke: "blue"}), Plot.text(binsq.slice(nbc-1), {x: "x", y: "medianv", dy: -12, text: ["Medians"]}), Plot.lineY(binsq, {x: "x", y: function(d,i) { switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return 100 - d3.lab(paletteL[i]).l; break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): return 100 - lstars[i].y; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): return 100 - d3.lab(paletteMed[i]).l; //return (lstarMedAt[i].y - (d3.lab(c1).l - binsq[0].medianv * coefMed))/coefMed; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): return 100 - d3.lab(paletteMeans[i]).l; //return (lstarMeansAt[i].y - (d3.lab(c1).l - binsq[0].meanv * coefMean))/coefMean; break; } }, strokeWidth: 2, stroke: "red"}), Plot.text(binsq.slice(nbc-1), {x: "x", y: function(d,i) { switch (true) { case ((paletteType === "Linear") || (paletteType === "Linéaire")): return 100 - d3.lab(paletteL[nbc-1]).l; break; case ((paletteType === "Manual spline") || (paletteType === "Spline Manuelle")): return 100 - lstars[nbc-1].y; break; case ((paletteType === "Medians") || (paletteType === "Médianes")): return 100 - d3.lab(paletteMed[nbc-1]).l; //return (lstarMedAt[nbc-1].y - (d3.lab(c1).l - binsq[0].medianv * coefMed))/coefMed; break; case ((paletteType === "Means") || (paletteType === "Moyennes")): return 100 - d3.lab(paletteMeans[nbc-1]).l; //return (lstarMeansAt[nbc-1].y - (d3.lab(c1).l - binsq[0].meanv * coefMean))/coefMean; break; } }, dy: -12, text: ["L*"]}), ] })38:T41c,valeursObj = { var result = Array(); for (let i=0; i x } = options; const rangeWrap = htl.html`

`; Object.assign(rangeWrap.style, { display: "inline-flex", position: "relative" }); const bubble = htl.html``; if (vertical) Object.assign(bubble.style, { position: "absolute", width: "max-content", transform: "translateY(50%)", left: "150%" }); else Object.assign(bubble.style, { position: "absolute", width: "fit-content", transform: "translateX(-50%)", bottom: "100%" }); const rangeInput = htl.html``; if (vertical) { rangeInput.setAttribute("orient", "vertical"); rangeInput.style.writingMode = "bt-lr"; /* IE */ rangeInput.style["-webkit-appearance"] = "slider-vertical"; /* WebKit */ rangeInput.style.width = "8px"; } rangeWrap.append( htl.html`

${rangeInput}${bubble}

` ); if (label) rangeWrap.prepend(htl.html`${label}`); const setBubble = () => { const val = rangeInput.valueAsNumber; const newPos = Number(((val - min) * 100) / (max - min)); bubble.innerHTML = format(val); rangeWrap.value = val; rangeWrap.dispatchEvent(new CustomEvent("input")); // Sorta magic numbers based on size of the native UI thumb if (vertical) bubble.style.bottom = `calc(${newPos}% + (${8 - newPos * 0.15}px))`; else { bubble.style.left = `calc(${newPos}% + (${8 - newPos * 0.15}px))`; const { width: w, height: h } = rangeInput.getBoundingClientRect(); const { width: bubw, height: bubh } = bubble.getBoundingClientRect(); if ((newPos / 100) * w < bubw / 2) bubble.style.left = bubw / 2 + "px"; else if ((newPos / 100) * w + bubw / 2 > w) bubble.style.left = w - bubw / 2 + "px"; } }; let resizeObserver; resizeObserver = new ResizeObserver(() => { setBubble(); resizeObserver.disconnect(); }); resizeObserver.observe(rangeWrap); rangeInput.addEventListener("input", () => { setBubble(); }); setBubble(); return rangeWrap; }3a:Tc9f,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend // Modified for vertical presentation of the threshold maps type, choropleth. function Legend(color, { title, tickSize = 6, width = 60 + tickSize, height = 280, marginTop = 20, marginRight = 10 + tickSize, marginBottom = 20, marginLeft = 4, ticks = height / 64, tickFormat, tickValues } = {}) { function rampV(color, n = 256) { const canvas = DOM.canvas(1, n); const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(0, n-i, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = function(g) { let decalY = marginTop - height + (height - marginTop - marginBottom) / (color.range().length); g.selectAll(".tick line").attr("x1", marginLeft); g.selectAll(".tick line").attr("x2", marginLeft + width + tickSize); g.selectAll(".tick line").attr("y1", decalY); g.selectAll(".tick line").attr("y2", decalY); g.selectAll(".tick text").attr("x", marginLeft + width).attr("dy", -4); g.selectAll(".tick text").attr("y", decalY).attr("dy", -4); return g; } let x, y; // Threshold if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; y = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([height - marginBottom, marginTop]); //.rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", marginLeft) .attr("y", (d, i) => y(i)) //height - marginTop - marginBottom + .attr("width", width - marginLeft - marginRight) .attr("height", (d, i) => y(i - 1) - y(i)) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Legend's title svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisLeft(y) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop - height - tickSize) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-size", "1.2em") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }3b:T104f,function legendV({ color, title, tickSize = 6, width = 36 + tickSize, height = 320, marginTop = 20, marginRight = 10 + tickSize, marginBottom = 20, marginLeft = 5, ticks = height / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("x1", marginLeft - width + marginRight); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(height - marginBottom, marginTop), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(height - marginBottom, marginTop)), {range() { return [height - marginBottom, marginTop]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("y", (d, i) => x(i)) .attr("x", marginLeft) .attr("height", (d, i) => x(i - 1) - x(i)) .attr("width", width - marginRight - marginLeft) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([height - marginBottom, marginTop]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("y", x) .attr("x", marginLeft) .attr("height", Math.max(0, x.bandwidth() - 1)) .attr("width", width - marginLeft - marginRight) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft - width + marginRight) .attr("y", 0) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); }3c:[{"id":"6672a882c79b1282f37b1c62be8b5e95c8843ca0228fda317847cd3f8909b397c1c43f84151c2cd1f37b4ec884f7ab2ed38c6bbe3ac05889423b00d9ae532c0b","href":"https://static.observableusercontent.com/files/6672a882c79b1282f37b1c62be8b5e95c8843ca0228fda317847cd3f8909b397c1c43f84151c2cd1f37b4ec884f7ab2ed38c6bbe3ac05889423b00d9ae532c0b","name":"contour_paris.json","type":"application/json","lastModified":1689408807838.884,"size":2003},{"id":"84dcd7a9dba0ad52e1316660cafd34c9c912230b24b6ad61f1a97bd997fe2ed456d66adf640d8e321e1dd71c0c394f5e0a4428158262468289e6e69c15b2bb57","href":"https://static.observableusercontent.com/files/84dcd7a9dba0ad52e1316660cafd34c9c912230b24b6ad61f1a97bd997fe2ed456d66adf640d8e321e1dd71c0c394f5e0a4428158262468289e6e69c15b2bb57","name":"seiner.json","type":"application/json","lastModified":1689408813007.138,"size":1647},{"id":"1967b3bcb800ab035ff824728cd31208cc6725e1bd48b3568bd4b4a0bb3097b2a972be8c4a7955c4c2b123a566c31922083ebf940b558f5353c086d84e7c626e","href":"https://static.observableusercontent.com/files/1967b3bcb800ab035ff824728cd31208cc6725e1bd48b3568bd4b4a0bb3097b2a972be8c4a7955c4c2b123a566c31922083ebf940b558f5353c086d84e7c626e","name":"filo15_paris2ex.json","type":"application/json","lastModified":1689495699033.032,"size":1031685}] 32:{"id":"3506c2d72c46b70f","slug":"color-gradients-values-adapted-lum","title":"Color gradients comparison : linear or values-adapted lightness","thumbnail":"b0afb1341d21b2447b8acf1a836c93677b0a34a41b4c493d5fb823f55bad3b68","access_level":"public","create_time":"$D2023-07-13T08:42:55.659Z","update_time":"$D2024-07-08T12:13:08.878Z","view_time":null,"first_public_time":"$D2023-11-05T13:38:15.977Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"1936870012656af6","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":"starter_2024"},"version":3893,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null}],"members":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Color gradients comparison : linear or values-adapted lightness","cells":[{"id":3266,"value":"# Color gradients comparison : linear or values-adapted lightness","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"{\n switch (language) {\n case \"English\":\n return Object.assign(html`

`, {value: null});\n case \"Français\":\n return htl.html`

Comparaison de gradients colorés : linéaires ou selon une luminosité adaptée aux valeurs

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3801,"value":"- Preprint (fr) : https://osf.io/preprints/osf/4cyf8\n- Data from the survey : https://osf.io/r7btc/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2628,"value":"viewof language = Inputs.radio([\"English\", \"Français\"], {value: \"English\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2145,"value":"html`${[viewof nbc, viewof indicator, viewof classif]}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3027,"value":"viewof gradientType = {\n switch (language) {\n case \"English\":\n return Inputs.radio([\"2 Colors\", \"Palette\"], {value: \"2 Colors\", label: \"Gradient type:\"});\n break;\n case \"Français\":\n return Inputs.radio([\"2 Couleurs\", \"Palette\"], {value: \"2 Couleurs\", label: \"Type de gradient :\"});\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2245,"value":"viewL = {\n let lt = \"\";\n let str = \"\";\n let doc = [];\n if ((gradientType === \"2 Colors\") || (gradientType === \"2 Couleurs\")) {\n switch (language) {\n case \"English\":\n lt = \"Linear gradient, as a reference\";\n break;\n case \"Français\":\n lt = \"Gradient linéaire, pour référence\";\n break;\n }\n str = JSON.stringify(JSON.stringify(paletteL));\n doc.push(``+lt+`
${drawpal(paletteL.map(d => d3.color(d).hex()))}`);\n } else {\n switch (language) {\n case \"English\":\n lt = \"Catalog palette: \" + palc;\n break;\n case \"Français\":\n lt = \"Palette de catalogue : \" + palc;\n break;\n }\n str = JSON.stringify(JSON.stringify(paletteC));\n doc.push(``+lt+`
${drawpal(paletteC.map(d => d3.color(d).hex()))}`);\n }\n doc.push(\n ``\n );\n return html`${doc.join(\"
\")}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3173,"value":"{\n if (gradientType === \"2 Colors\" || gradientType === \"2 Couleurs\") {\n return html`${[viewof c1, viewof c2]}`;\n } else {\n return Object.assign(html`

`, {value: null});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2989,"value":"viewof palc = {\n if (gradientType === \"Palette\") {\n return Inputs.select(\n new Map(\n dicopal\n .getPalettes({ number: nbc })\n .filter((d) => (d.type === \"sequential\") && (d.number <= nbc))\n .map((d) => [`${d.name} (${d.provider}) - ${d.type} `, d.name])\n ),\n { label: \"Palette:\" })\n } else {\n return Object.assign(html`

`, {value: null});;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2267,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Progression type

`;\n case \"Français\":\n return htl.html`

Type de progression

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"viewof paletteType = {\n let l = Array();\n if (language === \"English\") {\n l.push(\"Linear\", \"Medians\", \"Means\", \"Manual spline\");\n return Inputs.radio(l, {value: \"Linear\"});\n } else {\n l.push(\"Linéaire\", \"Médianes\", \"Moyennes\", \"Spline Manuelle\");\n return Inputs.radio(l, {value: \"Linéaire\"});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2770,"value":"viewof attenuation = {\n if (paletteType !== \"Linear\" && paletteType !== \"Linéaire\") {\n let l = (language == \"English\") ? \"Curve adj. %\" : \"Ajust. courbe %\";\n return Inputs.range([-100, 100],{label: l, value: 0, step: 10});\n } else {\n return Object.assign(html`

`, {value: null});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2660,"value":"{\n if (paletteType === \"Manual spline\" || paletteType === \"Spline Manuelle\") {\n switch (language) {\n case \"English\":\n return htl.html`

Manual spline gradient : curve profile control points

`;\n case \"Français\":\n return htl.html`

Points de contrôle de la courbe manuelle de luminosité`;\n }\n } else {\n return Object.assign(html`
`, {value: null});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"{\n if (paletteType === \"Manual spline\" || paletteType === \"Spline Manuelle\") {\n return html`${viewof slidersSpline}`;\n } else {\n return Object.assign(html`
`, {value: null});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3211,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Means, medians and L* lightness, by class number

`;\n case \"Français\":\n return htl.html`

Moyenne, médianes et luminosité L*, par numéro de classe`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3201,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2074,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Means, medians and L* lightness, by class center value

`;\n case \"Français\":\n return htl.html`

Moyenne, médianes et luminosité L*, par valeur centrale de classe`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2021,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Deviation of L* from Medians, by class

`;\n case \"Français\":\n return htl.html`

Écarts à la luminosité L*, par classe`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2035,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n color: {type: \"linear\", scheme: \"Greys\", reverse: true, legend: true},\n x: {\n label: \"Palette step\"\n },\n y: {\n label: \"Ratio\",\n grid: true,\n domain: [-100, 100]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.barY(binsq, {x: \"cl\", y: function(d, i) {return colorDiff(d,i)}, fill: function(d, i) {return colorDiff(d,i)}}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Palette's RGB values

`;\n case \"Français\":\n return htl.html`

Valeurs R,G,B de la palette

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 200,\n width: 1000,\n x: {\n label: \"Palette step\",\n domain: [1, nbc],\n ticks: nbc\n },\n y: {\n label: \"R,G,B value\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(splineValuesRGB, {x: \"x\", y: \"y\", stroke: \"Component\", strokeWidth: 2}),\n Plot.text(splineValuesRGB, Plot.selectLast({x: \"x\", y: \"y\", z: \"Component\", text: \"Component\", textAnchor: \"start\", dx: 3}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2079,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Palette's HSL values

`;\n case \"Français\":\n return htl.html`

Valeurs H,S,L de la palette

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 200,\n width: 1000,\n x: {\n label: \"Palette step\",\n domain: [1, nbc],\n ticks: nbc\n },\n y: {\n label: \"H,S,L value\",\n grid: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(splineValuesHSL, {x: \"x\", y: \"y\", stroke: \"Component\", strokeWidth: 2}),\n Plot.text(splineValuesHSL, Plot.selectLast({x: \"x\", y: \"y\", z: \"Component\", text: \"Component\", textAnchor: \"start\", dx: 3}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

BluGrn linear palette adapted to the class medians

`; //Values Histogram\n case \"Français\":\n return htl.html`

Histogramme des valeurs

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 340,\n width: 1000,\n x: {\n label: \"Value\"\n },\n y: {\n label: \"Count\",\n grid: true\n \n },\n marks: [\n Plot.rectY(valeursObj, Plot.binX({y: \"count\"}, {x: {thresholds: 80, value: \"v\"}, fill: \"couleur\"})),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3846,"value":"Plot.plot({\n //style: \"overflow: visible;\",\n height: 340,\n width: 1000,\n y: {\n domain: [0, 250],\n grid: true\n },\n fx: {\n interval: 10,\n label: \"valeur →\",\n labelAnchor: \"right\",\n tickFormat: (v) => v.toFixed(1)\n },\n color: {\n scheme: \"BuRd\"\n },\n marks: [\n //Plot.ruleY([0]),\n Plot.dot(valeursObj, Plot.dodgeY(\"middle\", {x: \"v\", padding: 1, fill: \"couleur\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Classes frequencies

`;\n case \"Français\":\n return htl.html`

Fréquences des classes

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 340,\n width: 1000,\n color: \"blue\",\n x: {\n label: \"Value\"\n },\n y: {\n label: \"Count\",\n grid: true\n },\n marks: [\n Plot.rectY(binsq, {x1: \"x1\", x2: \"x2\", y: \"nbic\", stroke: \"white\", fill: \"darkgrey\" //function (d,i){\n /*switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return paletteL[i];\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return palette[i];\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return paletteMed[i];\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return paletteMeans[i];\n break;\n }\n }*/})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Inverse L* intensity of the colors

`;\n case \"Français\":\n return htl.html`

Intensité L* inverse des couleurs

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n x: {\n label: \"Palette step\"\n },\n y: {\n label: \"Count\",\n grid: true\n },\n marks: [\n Plot.rectY(binsq, {x1: \"x1\", x2: \"x2\", y: function(d,i) {return 100 - lstars[i].y}, fill: function (d,i){\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return paletteL[i];\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return palette[i];\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return paletteMed[i];\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return paletteMeans[i];\n break;\n }\n }})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Means of the classes

`;\n case \"Français\":\n return htl.html`

Moyennes des classes

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n x: {\n label: \"Classe\"\n },\n y: {\n label: \"Count\",\n grid: true\n },\n marks: [\n Plot.rectY(binsq, {x1: \"x1\", x2: \"x2\", y: \"meanv\", fill: function (d,i){\n //if (gradientType === \"2 Colors\" || gradientType === \"2 Couleurs\") {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return paletteL[i];\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return palette[i];\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return paletteMed[i];\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return paletteMeans[i];\n break;\n }\n //} else {\n // return paletteC[i];\n //}\n }})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Medians of the classes

`;\n case \"Français\":\n return htl.html`

Médianes des classes

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n x: {\n label: \"Classe\"\n },\n y: {\n label: \"Count\",\n grid: true\n },\n marks: [\n Plot.rectY(binsq, {x1: \"x1\", x2: \"x2\", y: \"medianv\", fill: function (d,i){\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return paletteL[i];\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return palette[i];\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return paletteMed[i];\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return paletteMeans[i];\n break;\n }\n }})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2713,"value":" Plot.plot({\n style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n x: {\n label: \"Classes\"\n },\n y: {\n label: \"Count\",\n grid: true\n },\n marks: [\n Plot.barY(binsql, {x: \"type\", fx: \"cl\", y: \"value\", fill: function (d,i){\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return paletteL[Math.floor(i/2)];\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return palette[Math.floor(i/2)];\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return paletteMed[Math.floor(i/2)];\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return paletteMeans[Math.floor(i/2)];\n }\n } , insetRight: 12, insetLeft: 12}),\n Plot.tip(binsql, Plot.pointerX({x: \"type\", y: \"value\"}))\n ]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2141,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Data structures and algorithms

Palettes and interpolators

`;\n case \"Français\":\n return htl.html`

Structures de données et algorithmes

Palettes et leurs interpolateurs

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"dq = {\n let dq = {};\n switch (classif) {\n case \"quantile\":\n viewof nbc.dispatchEvent(new Event(\"input\", {bubbles: true}));\n dq = new stat.QuantileClassifier(vt, 2);\n dq.classify();\n break;\n case \"equal\":\n viewof nbc.dispatchEvent(new Event(\"input\", {bubbles: true}));\n dq = new stat.EqualClassifier(vt, 2);\n dq.classify();\n break;\n case \"Q6\":\n viewof nbc.value = 6;\n viewof nbc.dispatchEvent(new Event(\"input\", {bubbles: true}));\n dq = new stat.Q6Classifier(vt, 2);\n dq.classify();\n break;\n case \"jenks\":\n viewof nbc.dispatchEvent(new Event(\"input\", {bubbles: true}));\n dq = new stat.JenksClassifier(vt, 2);\n dq.classify();\n break;\n case \"headtail\":\n viewof nbc.dispatchEvent(new Event(\"input\", {bubbles: true}));\n dq = new stat.HeadTailClassifier(vt, 2);\n dq.classify();\n break;\n }\n return dq;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"// Classification\nbinsq = {\n let binsq = Array();\n let rdq = dq.classify(nbc);\n let ac1 = 0; let ac = 0;\n let meanv = 0; let medianv = 0;\n for (let i=0; i (pInterpolate)(d))\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"paletteL = {\n if (gradientType !== \"Palette\") {\n return d3.map(d3.range(0, 1+(1/nbc), 1/(nbc-1)), d => (d3.interpolateHcl(c1, c2))(d));\n } else {\n return paletteC;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"paletteMeans = d3.map(d3.range(0, nbc), d => (lstarMeansAt[d].couleur).hex())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1763,"value":"paletteMed = //d3.map(d3.range(0, 1+(1/nbc), 1/(nbc-1)), d => (pInterpolateMed)(d))\n d3.map(d3.range(0, nbc), d => (lstarMedAt[d].couleur).hex())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"pInterpolate = {\n if (gradientType !== \"Palette\") {\n return d3.interpolateRgbBasis([c1, colorPoint0_25, colorMidPoint, colorPoint0_75, c2]);\n } else {\n return d3.interpolateRgbBasis([paletteC[0], colorPoint0_25, colorMidPoint, colorPoint0_75, paletteC[nbc-1]]);\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"pInterpolateMeans = {\n return d3.interpolateRgbBasis(lstarMeansAt.map(function(d) { return d.couleur;}));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"pInterpolateMed = {\n return d3.interpolateRgbBasis(lstarMedAt.map(function(d) { return d.couleur;}));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"{\n switch (language) {\n case \"English\":\n return htl.html`

Intermediate data

`;\n case \"Français\":\n return htl.html`

Données intermédiaires

`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"Data source : INSEE, 200m grid, FILOSOFI income data, 2015 : https://www.insee.fr/fr/statistiques/4176290?sommaire=4176305","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3263,"value":"Geodata source : IGN, BD Carto, 2021.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2221,"value":"colorDiff = function(d,i) {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.lab(paletteL[i]).l - (100 - binsq[i].medianv);\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return lstars[i].y - (100 - binsq[i].medianv);\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return (lstarMedAt[i].y - (d3.lab(c1).l - binsq[0].medianv * coefMed))/coefMed - binsq[i].medianv;\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return (lstarMeansAt[i].y - (d3.lab(c1).l - binsq[0].meanv * coefMean))/coefMean - binsq[i].meanv;\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2024,"value":"ratioMedL = {\n let maxMed = binsq[nbc-1].medianv;\n let meds = binsq.map( d => d.medianv * 100 / maxMed); // / coefMed + d3.lab(c1).l - binsq[0].medianv * coefMed);\n let lums = Array();\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n lums = paletteL.map( d => d3.lab(d).l);\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n lums = palette.map(d => d3.lab(d).l);\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n lums = paletteMed.map(d => d3.lab(d).l);\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n lums = paletteMeans.map(d => d3.lab(d).l);\n break; \n }\n return meds.map(function (m, i) { return 1-(m/lums[i])});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"midPoint = {\n if (gradientType !== \"Palette\") {\n return d3.interpolateRgb.gamma(2.2)(c1, c2)(0.5);\n } else {\n return d3.interpolateRgb.gamma(2.2)(paletteC[0], paletteC[nbc-1])(0.5);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"point0_25 = {\n if (gradientType !== \"Palette\") {\n return d3.interpolateRgb.gamma(2.2)(c1, c2)(0.25);\n } else {\n return d3.interpolateRgb.gamma(2.2)(paletteC[0], paletteC[nbc-1])(0.25);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"point0_75 = {\n if (gradientType !== \"Palette\") {\n return d3.interpolateRgb.gamma(2.2)(c1, c2)(0.75);\n } else {\n return d3.interpolateRgb.gamma(2.2)(paletteC[0], paletteC[nbc-1])(0.75);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"colorMidPoint = {\n if (slidersSpline.curveFactor0_5 > 0) {\n return d3.color(midPoint).brighter(slidersSpline.curveFactor0_5);\n } else {\n return d3.color(midPoint).darker(Math.abs(slidersSpline.curveFactor0_5));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"colorPoint0_25 = {\n if (slidersSpline.curveFactor0_25 > 0) {\n return d3.color(point0_25).brighter(slidersSpline.curveFactor0_25);\n } else {\n return d3.color(point0_25).darker(Math.abs(slidersSpline.curveFactor0_25));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"colorPoint0_75 = {\n if (slidersSpline.curveFactor0_75 > 0) {\n return d3.color(point0_75).brighter(slidersSpline.curveFactor0_75);\n } else {\n return d3.color(point0_75).darker(Math.abs(slidersSpline.curveFactor0_75));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"reds = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteL[d]).r}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.color(pInterpolate(d)).r}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMed[d]).r}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMeans[d]).r}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"greens = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteL[d]).g}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.color(pInterpolate(d)).g}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMed[d]).g}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMeans[d]).g}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"blues = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteL[d]).b}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.color(pInterpolate(d)).b}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMed[d]).b}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.color(paletteMeans[d]).b}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"hues = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteL[d]).h/360}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.hsl(pInterpolate(d)).h/360}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMed[d]).h/360}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMeans[d]).h/360}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"sats = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteL[d]).s}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.hsl(pInterpolate(d)).s}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMed[d]).s}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMeans[d]).s}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"lums = {\n switch (true) {\n case ((paletteType === \"Linear\") || (paletteType === \"Linéaire\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteL[d]).l}));\n break;\n case ((paletteType === \"Manual spline\") || (paletteType === \"Spline Manuelle\")):\n return d3.map(d3.range(0, 1, 1/nbc), d => ({\"x\": (d*nbc)+1, \"y\": d3.hsl(pInterpolate(d)).l}));\n break;\n case ((paletteType === \"Medians\") || (paletteType === \"Médianes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMed[d]).l}));\n break;\n case ((paletteType === \"Means\") || (paletteType === \"Moyennes\")):\n return d3.map(d3.range(0, nbc), d => ({\"x\": d+1, \"y\": d3.hsl(paletteMeans[d]).l}));\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"lstars = d3.map(d3.range(0, 1, 1/nbc), d => ({\"x1\": d, \"x2\": d+(1/nbc), \"y\": (d3.lab(pInterpolate(d)).l)}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2278,"value":"coefMean = {\n let mmin = binsq[0].meanv;\n let mmax = binsq[nbc-1].meanv;\n let etLum = 0;\n if (gradientType !== \"Palette\") {\n etLum = d3.lab(c2).l - d3.lab(c1).l;\n } else {\n etLum = d3.lab(paletteC[nbc-1]).l - d3.lab(paletteC[0]).l;\n }\n let coefMean = etLum / (mmax-mmin);\n return coefMean;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2007,"value":"coefMed = {\n let mmin = binsq[0].medianv;\n let mmax = binsq[nbc-1].medianv;\n let etLum = 0;\n if (gradientType !== \"Palette\") {\n etLum = (d3.lab(c2).l - d3.lab(c1).l);\n } else {\n etLum = d3.lab(paletteC[nbc-1]).l - d3.lab(paletteC[0]).l;\n }\n let coefMed = etLum / (mmax-mmin);\n return coefMed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3510,"value":"decalageMed = { //(d3.lab(c1).l - (binsq[0].medianv * coefMed))\n if (gradientType !== \"Palette\") {\n return d3.lab(c1).l - (binsq[0].medianv * coefMed);\n } else {\n return d3.lab(paletteC[0]).l - (binsq[0].medianv * coefMed);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3642,"value":"lum4a = binsq[3].meanv*coefMed+decalageMed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2275,"value":"lstarMeans = {\n let lma = Array();\n let mmin = binsq[0].meanv;\n if (gradientType !== \"Palette\") {\n lma = d3.map(d3.range(0, nbc), d => (\n {\n \"x1\": d/nbc,\n \"x2\": (d+1)/nbc,\n \"y\": (binsq[d].meanv * coefMean) + (d3.lab(c1).l - mmin * coefMean),\n \"couleur\": d3.lab(binsq[d].meanv*coefMean + (d3.lab(c1).l - mmin * coefMean), d3.lab(paletteL[d]).a, d3.lab(paletteL[d]).b)\n }));\n } else {\n lma = d3.map(d3.range(0, nbc), d => (\n {\n \"x1\": d/nbc,\n \"x2\": (d+1)/nbc,\n \"y\": (binsq[d].meanv * coefMean) + (d3.lab(paletteC[0]).l - mmin * coefMean),\n \"couleur\": d3.lab(binsq[d].meanv*coefMean + (d3.lab(paletteC[0]).l - mmin * coefMean), d3.lab(paletteC[d]).a, d3.lab(paletteC[d]).b)\n }));\n }\n return lma;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2810,"value":"lstarMeansAt = {\n let lAt = Array();\n let atCoef = attenuation/100;\n let lmLin = 0;\n let At = 0;\n let o = null;\n for (let i=0; i (\n {\n \"x1\": d/nbc,\n \"x2\": (d+1)/nbc,\n \"y\": (binsq[d].medianv * coefMed) + (d3.lab(c1).l - mmin * coefMed),\n \"couleur\": d3.lab(binsq[d].medianv * coefMed + (d3.lab(c1).l - (mmin * coefMed)), d3.lab(paletteL[d]).a, d3.lab(paletteL[d]).b)\n }));\n } else {\n lma = d3.map(d3.range(0, nbc), d => (\n {\n \"x1\": d/nbc,\n \"x2\": (d+1)/nbc,\n \"y\": (binsq[d].medianv * coefMed) + (d3.lab(paletteC[0]).l - mmin * coefMed),\n \"couleur\": d3.lab(binsq[d].medianv * coefMed + (d3.lab(paletteC[0]).l - (mmin * coefMed)), d3.lab(paletteC[d]).a, d3.lab(paletteC[d]).b)\n }));\n }\n return lma;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2788,"value":"lstarMedAt = {\n let lAt = Array();\n let atCoef = attenuation / 100;\n let lmLin = 0;\n let At = 0;\n let o = null;\n for (let i=0; i values.map(d => ({Component, ...d})));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"splineValuesHSL = [\n [\"hue\", hues],\n [\"sat\", sats],\n [\"lum\", lums]\n].flatMap(([Component, values]) => values.map(d => ({Component, ...d})));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"// Topojson base map, joined file, départements with id (in arbitrary order)\nfondRP = FileAttachment(\"filo15_paris2ex.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"contour_paris = FileAttachment(\"contour_paris.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"seine_river = FileAttachment(\"seiner.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"// Projection Albers sur la France, équivalente\nprojection = d3.geoAlbers()\n\t.rotate([-1.2, 0.02])\n\t.center([1.08, 48.89])\n\t.parallels([29.5, 45.5])\n\t.scale(280000)\n\t.translate([975 / 2 - 70, 480 / 2 - 60])\n\t.precision(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"fond = topojson.feature(fondRP, fondRP.objects.filo15_paris2ex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"fondContour = topojson.feature(contour_paris, contour_paris.objects.contour_paris);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"seine = topojson.feature(seine_river, seine_river.objects.seiner);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"echelle = d3.geoScaleBar()\n .projection(projection)\n .size([600, 600])\n .left(0.1)\n .top(0.75)\n .distance(2) // The distance of the scale bar\n .label(\"2km\") // The label on top of the scale bar\n .labelAnchor(\"middle\") // The position of the label (you can also pass \"start\" and \"end\")\n .tickSize(null) // The height of the bar\n .tickValues(null); // The tick values below the bar will be removed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"valeurs = {\n let valeurs = [];\n fond.features.forEach((carreau) => {\n var v = parseFloat(carreau.properties[indicator]).toFixed(2);\n valeurs.push(parseFloat(v));\n })\n return valeurs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"vt = (valeurs.toSorted((a, b) => a - b));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Appendix, imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"function sRGBtoLin(colorChannel) {\n // Send this function a decimal sRGB gamma encoded color value\n // between 0.0 and 1.0, and it returns a linearized value.\n\n if ( colorChannel <= 0.04045 ) {\n return colorChannel / 12.92;\n } else {\n return Math.pow((( colorChannel + 0.055)/1.055),2.4);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"function YfromRGB (c){\n let vR = sRGBtoLin(c.r / 255); let vG = sRGBtoLin(c.g / 255); let vB = sRGBtoLin(c.b / 255);\n let Y = (0.2126 * sRGBtoLin(vR) + 0.7152 * sRGBtoLin(vG) + 0.0722 * sRGBtoLin(vB));\n return Y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"function YtoLstar(Y) {\n // Send this function a luminance value between 0.0 and 1.0,\n // and it returns L* which is \"perceptual lightness\"\n\n if ( Y <= (216/24389)) { // The CIE standard states 0.008856 but 216/24389 is the intent for 0.008856451679036\n return Y * (24389/27); // The CIE standard states 903.3, but 24389/27 is the intent, making 903.296296296296296\n } else {\n return Math.pow(Y,(1/3)) * 116 - 16;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function swatch(color) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function swatches(colors) {\n return html`${colors.map(c => `

\n${(\"00\" + d3.color(c).r).slice(-3)}
\n${(\"00\" + d3.color(c).g).slice(-3)}
\n${(\"00\" + d3.color(c).b).slice(-3)}

\n${(d3.lab(c).l).toFixed(2)}
\n${(d3.lab(c).a).toFixed(2)}
\n${(d3.lab(c).b).toFixed(2)}

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"function ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3\", \"d3-geo-projection@2\", \"d3-geo-scale-bar\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"stat = require(\"statsbreaks\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"// Source : https://observablehq.com/@esperanc/range-input-variations\nfunction pack(inputs, options = {}) {\n const { sep = 10, style = \"\", label = \"\" } = options;\n const root = htl.html`

`;\n root.value = {};\n if (label != \"\")\n root.append(htl.html`

${label}

`);\n const pairs = [...Object.entries(inputs)];\n pairs.forEach(([key, input], i) => {\n root.value[key] = input.value;\n input.addEventListener(\"input\", (e) => {\n root.value[key] = input.value;\n root.dispatchEvent(new CustomEvent(\"input\"));\n });\n root.append(input);\n if (sep && i < pairs.length - 1)\n root.append(htl.html`

`);\n });\n root.append(htl.html` `);\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1484,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2463,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2242,"value":"// Source : https://observablehq.com/@mthh/hello-dicopal\ndrawpal = function (col) {\n let str = \"\";\n col.forEach((d) => {\n str += ``;\n });\n str += \"
\";\n col.forEach((d) => {\n str += `${d}`;\n });\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2991,"value":"dicopal = import(\"dicopal@0.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3386,"value":"kmeds = import('https://cdn.skypack.dev/k-medoids@1.0.6?min');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"viewof c1 = {\n let l = (language == \"English\") ? \"Start color\" : \"Couleur départ\";\n return Inputs.color({label: l, value: \"#c8e6ef\"});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"viewof c2 = {\n let l = (language == \"English\") ? \"End color\" : \"Couleur fin\";\n return Inputs.color({label: l, value: \"#003866\"});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof nbc = Inputs.range([2, 20], {value: 6, step: 1, label: \"Nb. classes\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"viewof indicator = Inputs.select(Object.keys(fond.features[1].properties), {value: \"pmen_pauv\", label: \"Variable \"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"viewof classif = Inputs.select([\"quantile\", \"equal\", \"Q6\", \"jenks\", \"headtail\"], {value: \"quantile\", label: \"Classification: \"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3493,"value":"viewof slidersSpline = \n pack({\n curveFactor0_25: BubbleRange([-4, 4], { value: 0, step: 0.05, label: \"1/4:\", vertical: true}),\n curveFactor0_5: BubbleRange([-4, 4], { value: 0, step: 0.05, label: \"1/2:\" , vertical: true}),\n curveFactor0_75: BubbleRange([-4, 4], { value: 0, step: 0.05, label: \"3/4:\", vertical: true})\n }\n , { sep: 100, label: \"\" }\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3827,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3813,"value":"// ToolTip\ndiv = d3.select(\"body\").append(\"div\")\n\t.attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"//\n// Custom styles for range input components\n//\ncustomStyles = htl.html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"//\n// Suggestion of default style for the range input components created by functions\n// in this notebook. Import this style along with the function(s) or adapt it to your needs.\n//\nrangeStyles = htl.html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"