2f:T457,function cielabScatter(palette, { darkMode = false } = {}) { let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})})); return Plot.plot({ width: size, height: size, style: { fontSize: 12 }, marks: [ Plot.frame({rx: size / 2, ry: size / 2, opacity: 0.2}), Plot.gridX({ticks: 3, opacity: 0.2}), Plot.gridY({ticks: 3, opacity: 0.2}), Plot.ruleX([0], {opacity: 0.25}), Plot.ruleY([0], {opacity: 0.25}), Plot.dot(labPalette, { x: "a", y: "b", r: 5, fill: { value: (d) => d.color, label: "Color" }, channels: { L: { value: "l", label: "L*" } }, tip: { format: { fill: (d,i) => `${d} (${i})` }, fill: darkMode ? "#202020" : "white" } }), ], x: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "a*" }, y: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "b*" } }); }30:T4a3,31:[{"id":"8ed6e6bf225643f48bd9ac038ee574f9c67c7da9f9e572cee450acf7fbbd401fa7027949218887ee460ee1028bbc321d3a5f87a4b324b99777972afe0d71ba7a","href":"https://static.observableusercontent.com/files/8ed6e6bf225643f48bd9ac038ee574f9c67c7da9f9e572cee450acf7fbbd401fa7027949218887ee460ee1028bbc321d3a5f87a4b324b99777972afe0d71ba7a","name":"red-blind.png","type":"image/png","lastModified":1740743186654.909,"size":232557},{"id":"019890cd906d58408c0d7b28d7f982f8decc206e19c6147ad294edebbec555a646be9e52f796643dde48c87a70ad492225cc26e3d21a3fe06b92771896292bbb","href":"https://static.observableusercontent.com/files/019890cd906d58408c0d7b28d7f982f8decc206e19c6147ad294edebbec555a646be9e52f796643dde48c87a70ad492225cc26e3d21a3fe06b92771896292bbb","name":"couleurs_data_Ined (2).jpg","type":"image/jpeg","lastModified":1740743763504.294,"size":207547}] 2d:{"title":"Palette de couleurs site web","cells":[{"id":0,"value":"# Palette de couleurs site web","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"## Palette \n\n* Dernière proposition de palette de couleurs avec un jaune (28-02)\n","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"### Custom (100%)","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n]","pinned":true,"hidden":true,"mode":"ojs"},{"id":370,"value":"displayPalette(pal100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"displayPalette(pal100, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"## Dark 10%","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"palDark10 = [\n \"#ff362d\", //rouge\n \"#cc618b\", //rose\n \"#401d5d\", //mauve\n \"#0036bc\", //bleu\n \"#44ce90\", //vert\n \"#e6a527\", //jaune \n \"#000000\", //noir\n \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"displayPalette(palDark10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"displayPalette(palDark10, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"### Light 60","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"palLight60 = [\n \"#ff9a96\", //rouge\n \"#ffb0cf\", //rose\n \"#987cac\", //mauve\n \"#678ef3\", //bleu\n \"#9ee5c5\", //vert\n \"#ffe597\", //jaune plus clair au pif\n \"#8a8a8a\", //noir\n \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"displayPalette(palLight60)","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"displayPalette(palLight60, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"### Light30","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"palLight30 = [\n \"#ffccc9\", //rouge\n \"#ffd7e7\", //rose\n \"#ccbed5\", //mauve\n \"#b1c7f9\", //bleu\n \"#cdf2e1\", //vert\n \"#ffe8be\", //jaune \n \"#ededed\", //noir\n \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"displayPalette(palLight30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"displayPalette(palLight30, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"### Red-Blind test (dernière version)","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"couleurs_data_ined2 = FileAttachment(\"couleurs_data_Ined (2).jpg\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"Avec protanopia","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"redBlind = FileAttachment(\"red-blind.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"--- \n\n## Appendix: Drawing functions","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"function displayPalette(palette, { darkMode = false } = {}) {\n return htl.html`\n \n

${paletteDots(palette, { darkMode: darkMode })}

${cielabScatter(palette, { darkMode: darkMode })}

${lightnessSpectrum(palette, { darkMode: darkMode })}

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

${ c }

`) }

${swatches(palette)}

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

${shapePreview(c)}

`) }

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"paletteDots = function(palette, { darkMode = false } = {}) { \n return Plot.plot( {\n marks: [\n Plot.dot(palette, {\n x: (d,i) => i * 40,\n r: 16,\n fill: { value: (d) => d, label: \"Color\" },\n tip: { \n format: { x: false },\n fill: darkMode ? \"#202020\" : \"white\" \n }\n }),\n Plot.text(palette.map((d,i) => i), {\n x: (d) => d * 40,\n dx: 18,\n dy: 16,\n opacity: 0.8\n }),\n ],\n x: { domain: [ 0, 320 ], ticks: 0 },\n height: 48,\n width: (palette.length) * 40,\n marginTop: 16,\n style: { fontSize: 12, overflow: \"visible\" }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function lightnessSpectrum(palette, { darkMode = false } = {}) {\n let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})}));\n\n return Plot.plot({\n height: size,\n width: 70,\n style: { fontSize: 12, overflow: \"visible\" }, // let the tip overflow the rect of the plot\n marks: [\n Plot.tickY( labPalette, {\n y: (d) => d.l,\n stroke: { value: (d) => d.color, label: \"Color\" },\n strokeWidth: 3,\n tip: {\n anchor: \"right\",\n frameAnchor: \"left\",\n format: { \n fontSize: 12, \n stroke: (d,i) => `${d} (${i})`,\n a: true, b: true \n },\n fill: darkMode ? \"#202020\" : \"white\"\n },\n channels: {\n a: { value: \"a\", label: \"a*\" },\n b: { value: \"b\", label: \"b*\" }\n },\n })\n ],\n y: { \n domain: [30, 100], \n grid: true, \n tickSize: 0, \n labelAnchor: \"center\",\n label: \"L*\",\n labelArrow: false\n }, \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"function swatches(palette) {\n return Plot.plot({\n height: size,\n width: 50,\n x: {ticks: 0},\n margin: 0,\n marks: [\n Plot.barX(\n palette, {\n y: (d,i) => i,\n fill: (d) => d,\n inset: -1\n }\n )\n ]\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"shapePreview = (c) => htl.html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"size = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}