2c:null 2d:["$","title",null,{"children":"Adapter une palette de couleurs aux valeurs d'une variable | Laurent Jégou | Observable"}] 32:T404,{ let lt = ""; const doc = []; let str = "" let att = ""; let paletteType = "Medians" if (attenuation !== 0) { switch (language) { case "English": att = ", adjusted: " + attenuation + "%"; break; case "Français": att = ", ajustement : " + attenuation + "%"; break; } } else { att = ""; } switch (true) { 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; } }33:T945,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.dotY(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.dotY(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 === "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.dotY(binsq, {x: "cl", y: function(d,i) { return 100 - d3.lab(paletteMed[i]).l;}, 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*"]}), ] })34:T446,valeursObj = { var result = Array(); let paletteType = "Medians" for (let i=0; i`+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":20,"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":37,"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":336,"value":"- Étape 3 : Choisir le nombre de classes et la discrétisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"## Variable à représenter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"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":193,"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":126,"value":"## Palette adaptée en luminosité","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"- Étape 4 : Ajuster l'intensité de l'adaptation des luminosités","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof attenuation = {\n let l = (language == \"English\") ? \"Curve adj. %\" : \"Ajust. courbe %\";\n return Inputs.range([-100, 100],{label: l, value: 0, step: 10});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"- Étape 5 : Récupérer la palette modifiée","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"## Histogramme des fréquences de la variables, avec les couleurs de la palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":317,"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":150,"value":"### Équation de la droite d'ajustement des luminosités aux médianes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"Y = ${coefAdapt.toLocaleString( undefined, { minimumFractionDigits: 2 })}X + ${decalageAdapt.toLocaleString( undefined, { minimumFractionDigits: 2 })}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"Plot.plot({ style: \"overflow: visible;\",\n height: 400,\n width: 1000,\n marks: [\n Plot.lineY(equation, {x: \"x\", y: \"y\"}),\n Plot.dotY(equation, {x: \"x\", y: \"y\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"### Graphe des moyennes, des médianes et des luminosités L* des classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof language = Inputs.radio([\"English\", \"Français\"], {label: \"Version :\", value: \"Français\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"equation = [\n {x:varMin, y:(varMin * coefAdapt + decalageAdapt)},\n {x:varMax, y:(varMax * coefAdapt + decalageAdapt)}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"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 (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":66,"value":"coefAdapt = {\n let etLum = 0;\n let mmin = binsq[0].medianv;\n let mmax = binsq[nbc-1].medianv;\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 coefAdapt = etLum / (mmax-mmin);\n return coefAdapt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"decalageAdapt = {\nif (gradientType !== \"Palette\") {\n return d3.lab(c1).l - (binsq[0].medianv * coefAdapt);\n } else {\n return d3.lab(paletteC[0]).l - (binsq[0].medianv * coefAdapt);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"lstarMedians = {\n let lma = Array();\n let mmin = binsq[0].medianv;\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].medianv * coefAdapt) + (d3.lab(c1).l - mmin * coefAdapt),\n \"couleur\": d3.lab(binsq[d].medianv * coefAdapt + (d3.lab(c1).l - (mmin * coefAdapt)), 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 * coefAdapt) + (d3.lab(paletteC[0]).l - mmin * coefAdapt),\n \"couleur\": d3.lab(binsq[d].medianv * coefAdapt + (d3.lab(paletteC[0]).l - (mmin * coefAdapt)), 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":107,"value":"paletteMed = 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":110,"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 a - b));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"valeursSource = (FileAttachment(\"variable.csv\").csv());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"valeurs = {\n let vn = valeursSource.map(function(a) {return parseFloat(a.variable)});\n return vn.filter(function(a) {return !isNaN(a)});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"varMax = vt[valeurs.length-1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"varMin = vt[0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Appendix, imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"dicopal = import(\"dicopal@0.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"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":166,"value":"stat = require(\"statsbreaks\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"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":26,"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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"