30:T4f8,defaultConfig = ({ /* The following values are based on the values used here: * https://github.com/nzzdev/ed-tech-utilities/blob/main/sophie/src/scales/defaultConfig.ts * The two sources should be kept in sync. */ hueShiftDistance: 0, /** The maximum number of colors */ maximumNumberOfColors: 7, /** The minimal lightness, or: how dark the darkest colour can be */ minimalLightness: 0.35, /** * The maximal lightness, or: how light the lightes colour can be * * Yes, 0.85 does not seem very bright, but by going brighter we * risk that the colour won't be printable anymore. */ maximalLightness: 0.85, /** What colour space to use for the interpolation */ colorSpace: 'okhsl', /** Instead of creating a light colour from the seed colour, define the lightest colour directly */ lightTargetColor: null, /** Instead of creating a dark colour from the seed colour, define the darkest colour directly. */ darkTargetColor: null, /** By how much the lightest colour should be desaturated based on the seed colour's saturation. */ desaturationFactor: 0.25, maximalSaturation: 0.4, /** Always use colors from the complete lightness range; useful for diverging scales */ forceMaximumLightnessSpread: false })31:[] 2e:{"title":"Gradient Creator","cells":[{"id":0,"value":"# Gradient Creator\n\nDieses Tool unterstützt beim Erstellen von\n- Sequentiellen Skalen\n- Divergierenden Skalen\n- Mischungen zwischen zwei Farben\n- Aufgehellten «Hintergrundfarben»\n\nDer hier verwendete Code entspricht dem entsprechenden Code auf [ed-tech-utilities/sophie](https://github.com/nzzdev/ed-tech-utilities/tree/main/sophie).","pinned":false,"hidden":false,"mode":"md"},{"id":1342,"value":"$${[3,4,5,6,7].map(num => html`${swatches(getSequentialScale(baseColor, num, {hueShiftDistance: sequentialHueShiftDistance, forceMaximumLightnessSpread: maxLightnessDistance}).reverse())}\n`)}","pinned":false,"hidden":false,"mode":"html"},{"id":559,"value":"## Sequentielle Skalen\n\nDie [standardmässig verwendeten Skalen des NZZ Visuals Styleguides](https://nzzdev.github.io/Storytelling-Styleguide/#/colors-scales?a=sequenzielle-skalen) wurden mit diesem Tool entwickelt.\n\nDieses Tool erlaubt es, für massgeschneiderte Grafiken eine eigene Farbskala zu definieren, basierend auf einer Basisfarbe.","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"viewof baseColor = Inputs.text({label: \"Basisfarbe\", placeholder: \"#1b87aa\", value: \"#1b87aa\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"Inputs.color({value: baseColor, disabled: true, label: 'Basisfarbe'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"viewof numberOfColors = Inputs.range([3, defaultConfig.maximumNumberOfColors], {step: 1, value: 3, label: 'Anzahl Farben'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":837,"value":"// How much in degrees the hue should shift between the light and the dark color\nviewof sequentialHueShiftDistance = Inputs.range([-180, 180], {step: 15, value: 0, label: 'HueShift'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"Wenn der Unterschied zwischen den einzelnen Stufen auch bei wenigen Farben möglichst gross sein soll, kann die folgende Option angewählt werden:","pinned":false,"hidden":false,"mode":"md"},{"id":1306,"value":"viewof maxLightnessDistance = Inputs.toggle({value: false, label: 'Maximiere Helligkeits-unterschiede'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"### Resultierende Skala","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"swatches(seqScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"```\n${seqScale.join(' ')}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"seqScale = getSequentialScale(\n baseColor, \n numberOfColors, \n {\n hueShiftDistance: sequentialHueShiftDistance, \n forceMaximumLightnessSpread: maxLightnessDistance,\n // Zusätzliche Konfigurationsoptionen können hier eingefügt werden.\n // Für eine Dokumentation der möglichen Optionen siehe hier:\n // https://github.com/nzzdev/ed-tech-utilities/blob/main/sophie/src/scales/defaultConfig.ts\n //\n // Sei dir bewusst, dass eine Anpassung dieser Werte bedeuten kann,\n // dass deine Skala stark von den standardmässig verwendeten Farben\n // abweichen kann.\n colorSpace: 'jch',\n lightTargetColor: '#444',\n minimalLightness: 0.9\n }\n).reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"Für mehr als 7 verschiedene Kategorien: einen Farbverlauf verwenden:\n\n${gradientDisplay(getSequentialScale(baseColor, 8, {hueShiftDistance: sequentialHueShiftDistance}))}","pinned":false,"hidden":false,"mode":"md"},{"id":565,"value":"// import from NPM Package @nzz/et-utils-sophie\ngetSequentialScale = sophie.getSequentialScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"$${categoryColors.map(culori.formatHex).map(hex => html`

${swatches(getSequentialScale(hex, 4))}

`)}","pinned":true,"hidden":false,"mode":"html"},{"id":1256,"value":"categoryColors.map(culori.formatHex).map(hex => getSequentialScale(hex, 3, {desaturationFactor: 0.75})[2]).map(culori.okhsl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"# Divergierende Skalen\n\nDiese Skalen basieren auf den sequentiellen Skalen, aber verwenden jeweils zwei Farben (und eine neutrale Farbe als Mittelpunkt).","pinned":false,"hidden":false,"mode":"md"},{"id":1352,"value":"$${[2,3,4,5,6,7,8,9,10,11,12,13,14].map(cols => md`${swatches(getDivergingScale(baseColorOne, baseColorTwo, cols))}\n`)}","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"viewof baseColorOne = Inputs.text({label: \"Basisfarbe 1\", placeholder: \"#374e8e\", value: \"#374e8e\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"$${Inputs.color({value: baseColorOne, disabled: true, label: 'Basisfarbe 1'})}\n${Inputs.color({value: baseColorTwo, disabled: true, label: 'Basisfarbe 2'})\n}","pinned":false,"hidden":false,"mode":"html"},{"id":882,"value":"viewof baseColorTwo = Inputs.text({label: \"Basisfarbe 2\", placeholder: \"#ac004f\", value: \"#ac004f\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"viewof numberOfDivergingColors = Inputs.range([2, defaultConfig.maximumNumberOfColors * 2], {step: 1, value: 5, label: 'Anzahl Farben'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"$${swatches(divScale)}","pinned":false,"hidden":false,"mode":"md"},{"id":1467,"value":"```\n${divScale.join(' ')}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":911,"value":"divScale = getDivergingScale(baseColorOne, baseColorTwo, numberOfDivergingColors)","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"Für mehr als 14 verschiedene Kategorien: einen Farbverlauf verwenden:\n\n${gradientDisplay(getDivergingScale(baseColorOne, baseColorTwo, numberOfDivergingColors % 2 === 0 ? 12 : 13), numberOfDivergingColors % 2 === 0 ? 10 : 11)}","pinned":false,"hidden":false,"mode":"md"},{"id":900,"value":"// Code from @nzz/et-utils-sophie\ngetDivergingScale = sophie.getDivergingScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"# Color Mixer\n\nDiese Funktion mischt aus zwei bestehenden Farben eine dritte, die zwischen diesen Farben zu liegen kommt. Dies kann verwendet werden, um für spezielle Charts weitere Farben basierend auf den bestehenden Kategoriefarben zu generieren.","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"viewof colorA = Inputs.text({label: \"Farbe 1\", placeholder: \"#1b87aa\", value: \"#1b87aa\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"Inputs.color({value: colorA, disabled: true, label: 'Farbe 1'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"Inputs.color({value: mixedColor, disabled: true, label: 'Mixed'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"Inputs.color({value: colorB, disabled: true, label: 'Farbe 2'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof colorB = Inputs.text({label: \"Farbe 2\", placeholder: \"#93a345\", value: \"#93a345\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"mixedColor = getMixedColor(colorA, colorB)","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"getMixedColor = (color1, color2, colorspace = 'oklch') => {\n\n // Create the color interpolator\n const interpolator = culori.interpolate([color1, color2], colorspace)\n \n const clampedColor = culori.clampChroma(interpolator(0.5), 'oklch')\n\n return culori.formatHex(clampedColor)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"# Hintergrundfarbe\n\nDiese Funktion generiert eine aufgehellte Version einer Farbe, die bezüglich Helligkeit den anderen aufgehellten Farben entspricht. Die relativen Helligkeitsunterschiede werden dabei nach Möglichkeit beibehalten.","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"viewof darkColor = Inputs.text({label: \"Dunkle Farbe\", placeholder: \"#ac004f\", value: '#ac004f'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"Inputs.color({value: darkColor, disabled: true, label: 'Dunkle Farbe'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"Inputs.color({value: mutedColor, disabled: true, label: 'Helle Farbe'})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"mutedColor = getMutedColor(darkColor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"getMutedColor = (darkColor) => {\n\n // Move the color to the same lightness range as the other light colors\n const lightnessScale = d3.scaleLinear().domain(standardColorLightnessRange).range(mutedColorLightnessRange).clamp(true)\n \n // Alternative calculation for saturation reduction\n // const saturationScale = d3.scaleLinear().domain([0.6,1]).range([0.2,0.5])\n\n const hex = culori.formatHex(darkColor)\n const col = culori.okhsl(darkColor)\n \n return mutedColorLookup[hex] ?? culori.formatHex({\n ...col,\n l: lightnessScale(col.l),\n s: col.s * 0.6\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$${swatches(categoryColors.map(culori.formatHex))}\n${swatches(categoryColors.map(getMutedColor))}\n${swatches(categoryColorsMuted.map(culori.formatHex))}","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"## Helpers and Configuration","pinned":true,"hidden":false,"mode":"md"},{"id":417,"value":"standardColorLightnessRange = [0.35,0.75]","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"mutedColorLightnessRange = [0.7, 0.825]","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"// Lookup table for previously defined values\nmutedColorLookup = categoryColors.reduce((lut, col, i) => ({\n ...lut,\n [culori.formatHex(col)]: culori.formatHex(categoryColorsMuted[i])\n }), {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"gradientDisplay = (colors, numberOfSamples = 5) => {\n const id = nanoid.nanoid(5)\n let gradientFixPoints = culori.samples(numberOfSamples)\n .map(culori.interpolate(colors, 'oklch'))\n \n return html`\n\n\n

${gradientFixPoints.map(culori.formatHex).join(', ')}

\n\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1193,"value":"indexedColors = categoryColors.map(culori.okhsl).map((c, i) => ({...c, index: i + 1}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1198,"value":"Plot.plot({\n color: {type: 'identity'},\n marks: [\n Plot.barY(indexedColors, {x: 'index', y: 'l', fill: d => culori.formatHex(d)}),\n Plot.line(indexedColors, {x: 'index', y: 's'}),\n Plot.dot(indexedColors, {x: 'index', y: 's', r: 5, fill: d => culori.formatHex(d), stroke: 'white'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"swatches(indexedColors.map(culori.formatHex))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"## Imports","pinned":true,"hidden":false,"mode":"md"},{"id":474,"value":"import {categoryColors, categoryColorsMuted, swatches} from \"@nzzvisuals/dataviz-colors\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"culori = import('https://cdn.skypack.dev/culori@3.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"nanoid = import('https://cdn.skypack.dev/nanoid@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"sophie = import(\"https://cdn.skypack.dev/@nzz/et-utils-sophie\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}