3e:null 3f:["$","title",null,{"children":"Chart color tester | flamont | Observable"}] 45:T864,viewof mySettings = { const colors = [ { id: "c1", label: "1", val: "#4e79a7" }, { id: "c2", label: "2", val: "#f28e2c" }, { id: "c3", label: "3", val: "#e15759" }, { id: "c4", label: "4", val: "#76b7b2" }, { id: "c5", label: "5", val: "#59a14f" }, { id: "c6", label: "6", val: "#edc949" }, { id: "c7", label: "7", val: "#af7aa1" } ]; const container = html`

`; const state = {}; colors.forEach((c) => { const group = html`

COULEUR ${c.label}

`; const p = group.querySelector('input[type="color"]'); const t = group.querySelector('input[type="text"]'); const update = (val) => { state[c.id] = val; container.value = state; container.dispatchEvent(new CustomEvent("input")); }; p.oninput = () => { t.value = p.value; update(p.value); }; t.oninput = () => { let val = t.value.trim(); // Si l'utilisateur a oublié le #, on l'ajoute pour le test if (val.length === 6 && !val.startsWith("#")) { val = "#" + val; } // Si le format est maintenant correct (#RRGGBB) if (/^#[0-9a-fA-F]{6}$/.test(val)) { t.value = val; // On met à jour le champ texte avec le # p.value = val; // On met à jour le sélecteur visuel update(val); // On met à jour le dashboard } }; state[c.id] = c.val; container.append(group); }); container.value = state; return container; }46:T6c4,viewof importBox = { const container = html`

📥 Importation Rapide (Coller ici)

Détecte automatiquement le format JSON ou les listes HEX.

`; const input = container.querySelector("input"); // Dans la fonction input.oninput de ta zone d'import : input.oninput = () => { let raw = input.value.trim(); if (!raw) return; let colors = []; // Cette nouvelle Regex capture 6 caractères hexadécimaux, avec ou sans # const hexMatches = raw.match(/#?([0-9a-fA-F]{6})/g) || []; // On s'assure que chaque code commence bien par # colors = hexMatches.map((c) => (c.startsWith("#") ? c : "#" + c)); if (colors.length > 0) { for (let i = 0; i < 7; i++) { const newColor = colors[i]; if (newColor) { const group = viewof mySettings.querySelectorAll( 'div[style*="flex-direction: column"]' )[i]; if (group) { const p = group.querySelector('input[type="color"]'); const t = group.querySelector('input[type="text"]'); p.value = newColor; t.value = newColor; p.dispatchEvent(new CustomEvent("input")); } } } input.value = ""; } }; return container; }47:T89b,exportPanel = html`

🚀 Exporter la palette (Cliquer pour copier)

Cliquez sur un bloc pour tout sélectionner, puis faites Ctrl+C.

FORMAT JSON

${JSON.stringify(palette)}

FORMAT CSS

${palette
          .map((c, i) => `--color-${i + 1}: ${c};`)
          .join("\n")}

VÉRIFICATION VISUELLE

${palette.map( (c) => html`

${c.toUpperCase()}

` )}

`48:Tb04,{ const wcagLuminance = (color) => { const c = d3.rgb(color); if (!c) return 0; const [r, g, b] = [c.r, c.g, c.b].map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const getContrastRatio = (l1, l2) => (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); const rows = palette.map((color, i) => { const lumColor = wcagLuminance(color); const lumBg = wcagLuminance(bgColor); const ratio = getContrastRatio(lumColor, lumBg); let suggestion = "Déjà OK"; let suggestedHex = color; if (ratio < 4.5) { const lch = d3.lch(color); if (lumBg > 0.5) { lch.l = Math.max(0, lch.l - 25); } else { lch.l = Math.min(100, lch.l + 25); } suggestedHex = lch.formatHex(); suggestion = suggestedHex; } let verdictLabel = ""; let verdictColor = ""; if (ratio >= 4.5) { verdictLabel = "✅ UI OK (Texte)"; verdictColor = "#2e7d32"; } else if (ratio >= 3.0) { verdictLabel = "🟡 UI OK (Graphique)"; verdictColor = "#ed6c02"; } else { verdictLabel = "❌ Échec UI"; verdictColor = "#d32f2f"; } return { "N°": i + 1, Couleur: color, _ratioRaw: ratio, Ratio: ratio.toFixed(2) + ":1", Verdict: html`${verdictLabel}`, Suggestion: suggestion }; }); // Génération du tableau const table = Inputs.table(rows, { sort: "_ratioRaw", reverse: false, columns: ["N°", "Couleur", "Ratio", "Verdict", "Suggestion"], format: { Verdict: (v) => v, Couleur: (c) => html`

`, Suggestion: (s) => s === "Déjà OK" ? html`${s}` : html`

${s}

` } }); // On retourne le tableau à l'intérieur d'un élément details return html`

📊 Analyse des Contrastes et Accessibilité (WCAG)

${table}

`; }49:T45d,metric = html`

🧪 Analyse de Distinction (Espace Perceptuel CIELAB)

Répartition Chromatique ${drawCielab()}

Plus les points sont éloignés les uns des autres, plus les couleurs sont faciles à distinguer.

Scores de Distance (Delta-E) ${contrastTable()}

`4a:T9b1,dashboard = html`

Bar Chart
${drawBar()}

Bar Chart
${drawSmallHorBar()}

Bar Chart
${drawHorBar()}

Bar Chart
${drawMultCol()}

Lines Chart
${drawLines()}

Area Chart
${drawArea()}

Scaterplot
${drawScater()}

Arrow chart
${drawArrow2()}

Pie chart
${drawPie()}

Bar Chart
${drawSingleStack()}

`4b:T4a7,drawCielab = () => { // Transformation des couleurs de la palette en coordonnées Lab const cielabData = palette.map((color, i) => { const lab = d3.lab(color); return { name: i + 1, l: lab.l, a: lab.a, b: lab.b, color: color }; }); return Plot.plot({ width: 400, height: 400, grid: true, background: "none", x: { domain: [-100, 100], label: "a* (Vert → Rouge)" }, y: { domain: [-100, 100], label: "b* (Bleu → Jaune)" }, marks: [ // Le cercle chromatique de fond (optionnel mais aide à se repérer) Plot.dot([0], { x: [0], y: [0], r: 160, stroke: "#ccc", strokeDasharray: "4" }), // Les points de ta palette Plot.dot(cielabData, { x: "a", y: "b", fill: "color", r: 10, stroke: bgColor === "#222222" ? "white" : "black", strokeWidth: 2 }), // Les étiquettes (numéros) Plot.text(cielabData, { x: "a", y: "b", text: "name", dy: -15, fill: bgColor === "#222222" ? "white" : "black", fontWeight: "bold" }) ] }); }4c:[] 43:{"id":"d1bfe29c895bd7a9","slug":null,"title":"Chart color tester","thumbnail":"c7c0b1350f8c0b63c5ab5893d1ad430c6ab14d82b661391c110585e8e89ff38d","access_level":"public","create_time":"$D2026-04-15T12:48:54.925Z","update_time":"$D2026-09-15T20:04:56.432Z","view_time":null,"first_public_time":"$D2026-04-15T15:07:14.148Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"01997b0234bff9b5","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":"starter_2024","bio":"Designer & developer\n-\nCurrently working at CBC / Radio-Canada as an information designer","following":false},"version":384,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"756edf4fcc2b842a","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":null,"bio":"Designer & developer\n-\nCurrently working at CBC / Radio-Canada as an information designer","following":false}],"members":[{"type":"team","id":"01997b0234bff9b5","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":"starter_2024","role":"editor"},{"type":"individual","id":"756edf4fcc2b842a","login":"flamont","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ed01b5e504666ddd72964fd9b415583e23391388dd0eb4404ae98f8df608dc13","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chart color tester","cells":[{"id":0,"value":"# Chart color tester\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"viewof vision = Inputs.select(\n new Map([\n [\"Vision normale\", \"none\"],\n [\"Protanopie (Rouge)\", \"url('#protanopia')\"],\n [\"Deutéranopie (Vert)\", \"url('#deuteranopia')\"],\n [\"Tritanopie (Bleu)\", \"url('#tritanopia')\"],\n [\"Noir & Blanc (Luminance)\", \"grayscale(100%)\"]\n ]),\n { label: \"Simuler\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof bgColor = Inputs.radio([\"white\", \"#f4f4f4\", \"#222222\", \"#000000\", \"#683052\"], {\n label: \"BGColor\",\n value: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"## ChartFunctions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"drawBar = () =>\n Plot.plot({\n color: { range: palette },\n background: \"none\",\n x: { label: \"Mois\" },\n marks: [\n Plot.barY(data, {\n x: \"date\",\n y: \"sales\",\n fill: \"region\",\n fx: \"region\" // C'est ici qu'on crée le groupement\n }),\n Plot.ruleY([0])\n ]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"drawSingleStack = () => Plot.plot({\n color: { range: palette },\n marks: [\n Plot.barX(data.filter(d => d.date === \"Juin\"), {\n x: \"sales\", \n fill: \"region\",\n tip: true\n }),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"drawSmallHorBar = () =>Plot.plot({\n color: { range: palette },\n grid: true,\n marks: [\n Plot.barX(data, {\n x: \"sales\", \n y: \"date\", \n fill: \"region\", \n fx: \"region\" // Crée une colonne par région\n }),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"drawHorBar = () => Plot.plot({\n color: { range: palette },\n marks: [\n // La barre de couleur (Sales)\n Plot.barX(data.filter(d => d.date === \"Juin\"), {\n x: \"sales\", \n y: \"region\", \n fill: \"region\",\n fillOpacity: 0.8\n }),\n // La ligne de cible (Target)\n Plot.tickX(data.filter(d => d.date === \"Juin\"), {\n x: \"target\", \n y: \"region\", \n stroke: \"black\", \n strokeWidth: 3\n }),\n Plot.ruleX([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"drawMultCol = () => Plot.plot({\n color: { range: palette },\n grid: true,\n x: { axis: null }, // On cache l'axe X interne pour ne pas surcharger\n fx: { label: null, padding: 0.1 }, // Les mois en haut\n marks: [\n Plot.barY(data, {\n x: \"region\", \n y: \"sales\", \n fill: \"region\", \n fx: \"date\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"drawLines = () => Plot.plot({\n color: { range: palette },\n marks: [\n Plot.line(data, {\n x: \"monthIndex\", \n y: \"sales\", \n stroke: \"region\", \n strokeWidth: 2.5,\n curve: \"monotone-x\" // Pour un look plus \"Datawrapper\"\n }),\n // On ajoute des points au bout pour tester la reconnaissance\n Plot.dot(data, {\n filter: d => d.monthIndex === 5,\n x: \"monthIndex\",\n y: \"sales\",\n fill: \"region\",\n r: 4\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"drawArea = () => Plot.plot({\n color: { range: palette },\n marks: [\n Plot.areaY(data, {\n x: \"monthIndex\", \n y: \"sales\", \n fill: \"region\", \n curve: \"monotone-x\",\n opacity: 0.8\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"drawScater = () => Plot.plot({\n color: { range: palette },\n grid: true,\n marks: [\n Plot.dot(data, {\n x: \"sales\", \n y: \"profit\", \n fill: \"region\", \n r: 6\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"drawArrow = () => Plot.plot({\n color: { range: palette },\n marks: [\n // La ligne entre les deux points\n Plot.link(data.filter(d => d.date === \"Juin\"), {\n x1: \"previousSales\", \n x2: \"sales\", \n y: \"region\", \n stroke: \"region\",\n strokeWidth: 2\n }),\n // La flèche (le point actuel)\n Plot.dot(data.filter(d => d.date === \"Juin\"), {\n x: \"sales\", \n y: \"region\", \n fill: \"region\", \n r: 5,\n symbol: \"triangle\" // Pour simuler une flèche\n }),\n // Le point de départ (gris pour ne pas polluer le test de couleur)\n Plot.dot(data.filter(d => d.date === \"Juin\"), {\n x: \"previousSales\", \n y: \"region\", \n fill: \"#ccc\", \n r: 3\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"drawArrow2 = () => Plot.plot({\n color: { range: palette },\n x: { grid: true },\n marks: [\n Plot.arrow(data.filter(d => d.date === \"Juin\"), {\n x1: \"previousSales\", \n x2: \"sales\", \n y: \"region\", \n stroke: \"region\", \n bend: true, // Petite courbe pour le style\n headLength: 10\n }),\n Plot.text(data.filter(d => d.date === \"Juin\"), {\n x: \"sales\", \n y: \"region\", \n text: \"region\", \n textAnchor: \"start\", \n dx: 10\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"drawScater2 = () =>\n Plot.plot({\n color: { range: palette },\n marks: [\n // La ligne grise de fond\n Plot.ruleY(\n data.filter((d) => d.date === \"Juin\"),\n {\n x: \"region\",\n y: 0,\n y2: \"sales\",\n stroke: \"#eee\"\n }\n ),\n // Le point de couleur\n Plot.dot(\n data.filter((d) => d.date === \"Juin\"),\n {\n x: \"region\",\n y: \"sales\",\n fill: \"region\",\n r: 8\n }\n ),\n Plot.ruleY([0])\n ]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"drawPie = () => {\n const width = 400;\n const height = 400;\n const radius = Math.min(width, height) / 2 - 10;\n\n // Préparation des données pour un seul mois\n const pieData = data.filter((d) => d.date === \"Juin\");\n const total = d3.sum(pieData, (d) => d.sales);\n\n // Création du conteneur SVG\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n const arc = d3\n .arc()\n .innerRadius(0) // 0 pour un Pie, 60 pour un Donut\n .outerRadius(radius);\n\n const pie = d3.pie().value((d) => d.sales);\n\n const arcs = pie(pieData);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", (d, i) => palette[i % palette.length]) // Utilise ta palette !\n .attr(\"d\", arc)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", \"2\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"

`\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// Ta palette de 7 couleurs à tester\n//palette = [\"#4e79a7\", \"#f28e2c\", \"#e15759\", \"#76b7b2\", \"#59a14f\", \"#edc949\", \"#af7aa1\"]\npalette = [\n mySettings.c1,\n mySettings.c2,\n mySettings.c3,\n mySettings.c4,\n mySettings.c5,\n mySettings.c6,\n mySettings.c7\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = {\n const regions = [\"Nord\", \"Sud\", \"Est\", \"Ouest\", \"Centre\", \"Îles\", \"Export\"];\n const months = [\"Jan\", \"Fév\", \"Mar\", \"Avr\", \"Mai\", \"Juin\"];\n const results = [];\n\n regions.forEach((region, i) => {\n months.forEach((month, j) => {\n const baseValue = 30 + i * 10;\n const trend = j * (i - 3);\n\n results.push({\n region: region,\n date: month,\n monthIndex: j,\n sales: Math.max(10, baseValue + trend + Math.random() * 10),\n target: baseValue + 15, // Pour les bullet charts\n profit: (baseValue + trend) * 0.2 + Math.random() * 5, // Pour les scatterplots\n previousSales: baseValue + trend - 5 // Pour les arrow plots\n });\n });\n });\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"