29:null 2a:["$","title",null,{"children":"应用色板测试 | GnimOay | Observable"}] 2f:T6df,Plot.plot({ marks: [ Plot.axisX(d3.ticks(0, 1, 10), { label: "scale(最深色 --> 最浅色)" }), // main tone position // Plot.ruleX([mainTonePosition], { stroke: "#3333" }), Plot.text([mainTonePosition], { y: 1, x: mainTonePosition, text: () => "主色scale位置" }), // Plot.dot([mainTonePosition],{}) // chroma Plot.axisY(d3.ticks(0, 1, 10), { label: "chroma", anchor: "right", color: "#45b" }), Plot.line( d3.range(-0.1, 1.1, 0.05).map((s, idx) => ({ value: culori.lerp(darkChroma, lightChroma, s), scale: s })), { x: "scale", y: "value", stroke: "#45b5", filter(d) { return d.scale >= 0 && d.scale <= 1; } } ), Plot.dot( [ { x: 0, y: darkChroma }, { x: 1, y: lightChroma }, { x: mainTonePosition, y: culori.lerp(darkChroma, lightChroma, mainTonePosition) } ], { x: "x", y: "y", stroke: "#45b" } ), // lightness steps Plot.axisY(d3.ticks(0, 1, 10), { label: "lightness", color: "#394" }), Plot.line( d3.range(-0.1, 1.1, 0.05).map((s, idx) => ({ value: culori.lerp(darkLightness, lightLightness, s), scale: s })), { x: "scale", y: "value", stroke: "#3945", filter(d) { return d.scale >= 0 && d.scale <= 1; } } ), Plot.dot( [ { x: 0, y: darkLightness }, { x: 1, y: lightLightness }, { x: mainTonePosition, y: culori.lerp(darkLightness, lightLightness, mainTonePosition) } ], { x: "x", y: "y", stroke: "#394" } ) ] })30:T759,function updateSeriesChart() { const option = { legend: {}, tooltip: { trigger: "axis", showContent: false }, color: categoricalPalette, dataset: { source: [ [ "causal_glosa", "2019-Enero", "2019-Febrero", "2019-Marzo", "2019-Junio", "2019-Julio", "2019-Agosto" ], ["FACTURACIÓN", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], ["TARIFAS", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], ["SOPORTES", 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], ["AUTORIZACIÓN", 24.8, 57.2, 39.5, 46.4, 85.2, 92.5], ["COBERTURA", 55.2, 67.1, 69.2, 72.4, 53.9, 39.1], ["PERTINENCIA", 45.2, 37.1, 69.2, 52.4, 33.9, 49.1], ["DEVOLUCIONES", 45.2, 37.1, 69.2, 52.4, 33.9, 49.1], ["RESPUESTAS A GLOSAS/DEVOLUCIONES", 45.2, 37.1, 69.2, 52.4, 33.9, 49.1] ] }, xAxis: { type: "category" }, yAxis: { gridIndex: 0 }, grid: { top: "55%" }, series: [ { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "line", seriesLayoutBy: "row" }, { type: "pie", id: "pie", radius: "30%", center: ["50%", "30%"], label: { formatter: "{b}: {@2019-Agosto} ({d}%)" }, encode: { itemName: "causal_glosa", value: "2019-Agosto", tooltip: "2019-Agosto" } } ] }; echartSeries.instance = echarts.init( document.querySelector("#echart-series") ); setTimeout(() => echartSeries.instance.setOption(option), 600, "svg"); }31:T6aab,rawUDLeonardoPalette = { return { Sunflower100: { value: "#f7efb2", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Sunflower200: { value: "#e8d754", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Sunflower300: { value: "#d4c000", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Sunflower400: { value: "#bba800", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Sunflower500: { value: "#a39200", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Sunflower600: { value: "#8c7d00", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Sunflower700: { value: "#756800", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Sunflower800: { value: "#5e5400", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Sunflower900: { value: "#484000", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Sunflower1000: { value: "#342e00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Gray100: { value: "#edeef0", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Gray200: { value: "#d3d6dc", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Gray300: { value: "#babfc7", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Gray400: { value: "#a2a8b1", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Gray500: { value: "#8c929b", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Gray600: { value: "#787d86", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Gray700: { value: "#636870", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Gray800: { value: "#50545b", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Gray900: { value: "#3d4046", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Gray1000: { value: "#2c2e32", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Blue100: { value: "#ebedf8", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Blue200: { value: "#ccd5f7", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Blue300: { value: "#a8bdff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Blue400: { value: "#7fa5ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Blue500: { value: "#598dff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Blue600: { value: "#3572ff", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Blue700: { value: "#205bdf", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Blue800: { value: "#1448bb", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Blue900: { value: "#0a3593", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Blue1000: { value: "#05256d", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Carmine100: { value: "#ffe8f1", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Carmine200: { value: "#ffc6dd", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Carmine300: { value: "#fea4c9", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Carmine400: { value: "#f880b4", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Carmine500: { value: "#ed5ba0", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Carmine600: { value: "#dd308b", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Carmine700: { value: "#be0073", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Carmine800: { value: "#99005c", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Carmine900: { value: "#740747", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Carmine1000: { value: "#530a33", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Violet100: { value: "#fbe8f9", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Violet200: { value: "#f5c8f2", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Violet300: { value: "#eda8e9", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Violet400: { value: "#e287df", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Violet500: { value: "#d565d3", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Violet600: { value: "#c443c3", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Violet700: { value: "#ac21ab", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Violet800: { value: "#8d0e8d", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Violet900: { value: "#6b0f6b", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Violet1000: { value: "#4c0d4c", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Purple100: { value: "#efebff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Purple200: { value: "#dacfff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Purple300: { value: "#c7b4ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Purple400: { value: "#b496ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Purple500: { value: "#a179ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Purple600: { value: "#8c5cf9", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Purple700: { value: "#7745dc", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Purple800: { value: "#6132bb", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Purple900: { value: "#4a2293", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Purple1000: { value: "#35156e", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Indigo100: { value: "#e7eeff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Indigo200: { value: "#c5d6ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Indigo300: { value: "#a8bdff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Indigo400: { value: "#8ca3ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Indigo500: { value: "#7388ff", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Indigo600: { value: "#5b6bff", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Indigo700: { value: "#4954e5", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Indigo800: { value: "#3a40c1", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Indigo900: { value: "#2a2e9a", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Indigo1000: { value: "#1d1f73", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Wathet100: { value: "#dbf1fd", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Wathet200: { value: "#a3defc", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Wathet300: { value: "#71c9f4", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Wathet400: { value: "#3db2e5", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Wathet500: { value: "#009bcf", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Wathet600: { value: "#0084b5", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Wathet700: { value: "#006d98", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Wathet800: { value: "#00587d", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Wathet900: { value: "#004361", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Wathet1000: { value: "#003047", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Turquoise10: { value: "#e1f1ed", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Turquoise20: { value: "#b3dfd4", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Turquoise30: { value: "#87ccbc", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Turquoise40: { value: "#5bb7a5", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Turquoise50: { value: "#2fa28e", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Turquoise60: { value: "#008b78", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Turquoise70: { value: "#007463", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Turquoise80: { value: "#005e4f", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Turquoise90: { value: "#00473b", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Turquoise100: { value: "#00332a", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Green10: { value: "#e1f3df", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Green20: { value: "#b2e2ac", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Green30: { value: "#86d07d", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Green40: { value: "#5cbc51", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Green50: { value: "#31a625", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Green60: { value: "#008f00", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Green70: { value: "#007700", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Green80: { value: "#006000", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Green90: { value: "#004900", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Green100: { value: "#003400", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Lime10: { value: "#ebf0df", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Lime20: { value: "#cfdbaf", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Lime30: { value: "#b4c681", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Lime40: { value: "#9bb155", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Lime50: { value: "#849b2d", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Lime60: { value: "#6f8500", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Lime70: { value: "#5b6f00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Lime80: { value: "#495a00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Lime90: { value: "#364500", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Lime100: { value: "#263100", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Yellow10: { value: "#ffef8e", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Yellow20: { value: "#ffd02d", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Yellow30: { value: "#eeb600", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Yellow40: { value: "#d39f00", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Yellow50: { value: "#b98a00", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Yellow60: { value: "#9e7600", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Yellow70: { value: "#846200", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Yellow80: { value: "#6c4e00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Yellow90: { value: "#533b00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Yellow100: { value: "#3c2a00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Orange10: { value: "#ffebd5", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Orange20: { value: "#ffcc98", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Orange30: { value: "#ffac5c", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Orange40: { value: "#fd8810", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Orange50: { value: "#e17200", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Orange60: { value: "#c45f00", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Orange70: { value: "#a54d00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Orange80: { value: "#873d00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Orange90: { value: "#682c00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Orange100: { value: "#4c1f00", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" }, Red10: { value: "#ffe9e6", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 7.57:1 against background #ffffff" }, Red20: { value: "#ffc9c2", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 21.61:1 against background #ffffff" }, Red30: { value: "#ffa89e", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 34.53:1 against background #ffffff" }, Red40: { value: "#ff8278", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 46.89:1 against background #ffffff" }, Red50: { value: "#fd534d", type: "color", description: "Do not use for UI elements or text. WCAG 3 (APCA) contrast is 58.14:1 against background #ffffff" }, Red60: { value: "#e82b2f", type: "color", description: "Color can be used for UI elements or large text. WCAG 3 (APCA) contrast is 68.31:1 against background #ffffff" }, Red70: { value: "#c60016", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 77.88:1 against background #ffffff" }, Red80: { value: "#a00005", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 86.34:1 against background #ffffff" }, Red90: { value: "#790000", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 94.1:1 against background #ffffff" }, Red100: { value: "#570000", type: "color", description: "Color can be used for small text. WCAG 3 (APCA) contrast is 100.1:1 against background #ffffff" } }; }32:T597,function inspectPalette(palette, title, open = false) { return htl.html`

${title}

${UDTokenFamilyNameByHue.filter((n) => n !== "Neutral").map( (name) => html`

${drawTokenFamily(palette.get(name))} ${name}

` )} ${ !palette.get("Neutral") ? null : html`

${drawTokenFamily(palette.get("Neutral"))} Neutral

` }

500 Tokens

${drawTokenFamily(getSwatchForStep(palette, 500))}

400 Tokens

${drawTokenFamily(getSwatchForStep(palette, 400))}

300 Tokens

${drawTokenFamily(getSwatchForStep(palette, 300))}

间隔一个相邻色

${alternateSwatch(palette, 500)} ${alternateSwatch(palette, 400)} ${alternateSwatch(palette, 300)}

亮度分布

${plotPalette(palette)}

色度分布

${plotPalette(palette, "colorfulness")}

`; }33:T4cc7,UDWCAGTokens = { return new Map( Object.entries({ Blue: [ { family: "Blue", token: "B50", order: 50, sRGB: "#F0F4FF" }, { family: "Blue", token: "B100", order: 100, sRGB: "#E0E9FF" }, { family: "Blue", token: "B200", order: 200, sRGB: "#C2D4FF" }, { family: "Blue", token: "B300", order: 300, sRGB: "#94B4FF" }, { family: "Blue", token: "B350", order: 350, sRGB: "#7AA2FF" }, { family: "Blue", token: "B400", order: 400, sRGB: "#5789FF" }, { family: "Blue", token: "B500", order: 500, sRGB: "#336DF4" }, { family: "Blue", token: "B600", order: 600, sRGB: "#1456F0" }, { family: "Blue", token: "B700", order: 700, sRGB: "#0442D2" }, { family: "Blue", token: "B800", order: 800, sRGB: "#002F9E" }, { family: "Blue", token: "B900", order: 900, sRGB: "#002270" } ], Carmine: [ { family: "Carmine", token: "C50", order: 50, sRGB: "#FEF0F8" }, { family: "Carmine", token: "C100", order: 100, sRGB: "#FEE2F2" }, { family: "Carmine", token: "C200", order: 200, sRGB: "#F8C4E1" }, { family: "Carmine", token: "C300", order: 300, sRGB: "#F797CD" }, { family: "Carmine", token: "C350", order: 350, sRGB: "#F476BD" }, { family: "Carmine", token: "C400", order: 400, sRGB: "#EF57AD" }, { family: "Carmine", token: "C500", order: 500, sRGB: "#D72D8D" }, { family: "Carmine", token: "C600", order: 600, sRGB: "#B82879" }, { family: "Carmine", token: "C700", order: 700, sRGB: "#9D1562" }, { family: "Carmine", token: "C800", order: 800, sRGB: "#730744" }, { family: "Carmine", token: "C900", order: 900, sRGB: "#4D0A2F" } ], Green: [ { family: "Green", token: "G50", order: 50, sRGB: "#E4FAE1" }, { family: "Green", token: "G100", order: 100, sRGB: "#CBF5C6" }, { family: "Green", token: "G200", order: 200, sRGB: "#99E490" }, { family: "Green", token: "G300", order: 300, sRGB: "#45D036" }, { family: "Green", token: "G350", order: 350, sRGB: "#3DBC2F" }, { family: "Green", token: "G400", order: 400, sRGB: "#1BA70C" }, { family: "Green", token: "G500", order: 500, sRGB: "#0E8A00" }, { family: "Green", token: "G600", order: 600, sRGB: "#0F7703" }, { family: "Green", token: "G700", order: 700, sRGB: "#186010" }, { family: "Green", token: "G800", order: 800, sRGB: "#174511" }, { family: "Green", token: "G900", order: 900, sRGB: "#152B12" } ], Indigo: [ { family: "Indigo", token: "I50", order: 50, sRGB: "#F2F3FD" }, { family: "Indigo", token: "I100", order: 100, sRGB: "#E9EAFB" }, { family: "Indigo", token: "I200", order: 200, sRGB: "#CCCFF9" }, { family: "Indigo", token: "I300", order: 300, sRGB: "#ABB0F2" }, { family: "Indigo", token: "I350", order: 350, sRGB: "#959BEE" }, { family: "Indigo", token: "I400", order: 400, sRGB: "#7C84EE" }, { family: "Indigo", token: "I500", order: 500, sRGB: "#5B65F5" }, { family: "Indigo", token: "I600", order: 600, sRGB: "#4752E6" }, { family: "Indigo", token: "I700", order: 700, sRGB: "#333DCC" }, { family: "Indigo", token: "I800", order: 800, sRGB: "#1E27A4" }, { family: "Indigo", token: "I900", order: 900, sRGB: "#13196C" } ], Lime: [ { family: "Lime", token: "L50", order: 50, sRGB: "#F2F8D3" }, { family: "Lime", token: "L100", order: 100, sRGB: "#E3F0A3" }, { family: "Lime", token: "L200", order: 200, sRGB: "#C8DD5F" }, { family: "Lime", token: "L300", order: 300, sRGB: "#A1C200" }, { family: "Lime", token: "L350", order: 350, sRGB: "#95B200" }, { family: "Lime", token: "L400", order: 400, sRGB: "#819A04" }, { family: "Lime", token: "L500", order: 500, sRGB: "#6B7F06" }, { family: "Lime", token: "L600", order: 600, sRGB: "#5C6D08" }, { family: "Lime", token: "L700", order: 700, sRGB: "#4A5804" }, { family: "Lime", token: "L800", order: 800, sRGB: "#333D00" }, { family: "Lime", token: "L900", order: 900, sRGB: "#222900" } ], Neutral: [ { family: "Neutral", token: "N00", order: 0, sRGB: "#ffffff" }, { family: "Neutral", token: "N50", order: 50, sRGB: "#f5f6f7" }, { family: "Neutral", token: "N100", order: 100, sRGB: "#f2f3f5" }, { family: "Neutral", token: "N200", order: 200, sRGB: "#eff0f1" }, { family: "Neutral", token: "N300", order: 300, sRGB: "#dee0e3" }, { family: "Neutral", token: "N350", order: 350, sRGB: "#d0d3d6" }, { family: "Neutral", token: "N400", order: 400, sRGB: "#bbbfc4" }, { family: "Neutral", token: "N500", order: 500, sRGB: "#8f959e" }, { family: "Neutral", token: "N600", order: 600, sRGB: "#646a73" }, { family: "Neutral", token: "N650", order: 650, sRGB: "#51565d" }, { family: "Neutral", token: "N700", order: 700, sRGB: "#373c43" }, { family: "Neutral", token: "N800", order: 800, sRGB: "#2b2f36" }, { family: "Neutral", token: "N900", order: 900, sRGB: "#1f2329" }, { family: "Neutral", token: "N950", order: 950, sRGB: "#0f1114" }, { family: "Neutral", token: "N1000", order: 1000, sRGB: "#000000" } ], Orange: [ { family: "Orange", token: "O50", order: 50, sRGB: "#FFF3E5" }, { family: "Orange", token: "O100", order: 100, sRGB: "#FEE7CD" }, { family: "Orange", token: "O200", order: 200, sRGB: "#FEC88B" }, { family: "Orange", token: "O300", order: 300, sRGB: "#FFA338" }, { family: "Orange", token: "O350", order: 350, sRGB: "#FA8500" }, { family: "Orange", token: "O400", order: 400, sRGB: "#DB7500" }, { family: "Orange", token: "O500", order: 500, sRGB: "#B36205" }, { family: "Orange", token: "O600", order: 600, sRGB: "#9B5403" }, { family: "Orange", token: "O700", order: 700, sRGB: "#7F4401" }, { family: "Orange", token: "O800", order: 800, sRGB: "#5A3102" }, { family: "Orange", token: "O900", order: 900, sRGB: "#3B2002" } ], Purple: [ { family: "Purple", token: "P50", order: 50, sRGB: "#F5F0FE" }, { family: "Purple", token: "P100", order: 100, sRGB: "#EFE6FE" }, { family: "Purple", token: "P200", order: 200, sRGB: "#DCC9FD" }, { family: "Purple", token: "P300", order: 300, sRGB: "#C8A8FF" }, { family: "Purple", token: "P350", order: 350, sRGB: "#B88FFF" }, { family: "Purple", token: "P400", order: 400, sRGB: "#A571FE" }, { family: "Purple", token: "P500", order: 500, sRGB: "#8E4EFD" }, { family: "Purple", token: "P600", order: 600, sRGB: "#7A32F5" }, { family: "Purple", token: "P700", order: 700, sRGB: "#611FD6" }, { family: "Purple", token: "P800", order: 800, sRGB: "#4811A6" }, { family: "Purple", token: "P900", order: 900, sRGB: "#2D007A" } ], Red: [ { family: "Red", token: "R50", order: 50, sRGB: "#FEF0F0" }, { family: "Red", token: "R100", order: 100, sRGB: "#FEE3E2" }, { family: "Red", token: "R200", order: 200, sRGB: "#FDC6C4" }, { family: "Red", token: "R300", order: 300, sRGB: "#F89E9B" }, { family: "Red", token: "R350", order: 350, sRGB: "#F67E7A" }, { family: "Red", token: "R400", order: 400, sRGB: "#F45C57" }, { family: "Red", token: "R500", order: 500, sRGB: "#D93B36" }, { family: "Red", token: "R600", order: 600, sRGB: "#C02A26" }, { family: "Red", token: "R700", order: 700, sRGB: "#A11C17" }, { family: "Red", token: "R800", order: 800, sRGB: "#741915" }, { family: "Red", token: "R900", order: 900, sRGB: "#530704" } ], Sunflower: [ { family: "Sunflower", token: "S50", order: 50, sRGB: "#FFFCE5" }, { family: "Sunflower", token: "S100", order: 100, sRGB: "#FFF6A3" }, { family: "Sunflower", token: "S200", order: 200, sRGB: "#FFF066" }, { family: "Sunflower", token: "S300", order: 300, sRGB: "#FFE928" }, { family: "Sunflower", token: "S350", order: 350, sRGB: "#F5DC00" }, { family: "Sunflower", token: "S400", order: 400, sRGB: "#DBC500" }, { family: "Sunflower", token: "S500", order: 500, sRGB: "#B2A000" }, { family: "Sunflower", token: "S600", order: 600, sRGB: "#857700" }, { family: "Sunflower", token: "S700", order: 700, sRGB: "#635900" }, { family: "Sunflower", token: "S800", order: 800, sRGB: "#423C00" }, { family: "Sunflower", token: "S900", order: 900, sRGB: "#2C2702" } ], Turquoise: [ { family: "Turquoise", token: "T50", order: 50, sRGB: "#E2F8F5" }, { family: "Turquoise", token: "T100", order: 100, sRGB: "#C4F2EC" }, { family: "Turquoise", token: "T200", order: 200, sRGB: "#64E8D6" }, { family: "Turquoise", token: "T300", order: 300, sRGB: "#03CEB2" }, { family: "Turquoise", token: "T350", order: 350, sRGB: "#00B89F" }, { family: "Turquoise", token: "T400", order: 400, sRGB: "#02A28C" }, { family: "Turquoise", token: "T500", order: 500, sRGB: "#198576" }, { family: "Turquoise", token: "T600", order: 600, sRGB: "#077365" }, { family: "Turquoise", token: "T700", order: 700, sRGB: "#045D51" }, { family: "Turquoise", token: "T800", order: 800, sRGB: "#03443B" }, { family: "Turquoise", token: "T900", order: 900, sRGB: "#022C26" } ], Violet: [ { family: "Violet", token: "V50", order: 50, sRGB: "#FCEEFC" }, { family: "Violet", token: "V100", order: 100, sRGB: "#F9E2F9" }, { family: "Violet", token: "V200", order: 200, sRGB: "#F3C4F3" }, { family: "Violet", token: "V300", order: 300, sRGB: "#E89BE8" }, { family: "Violet", token: "V350", order: 350, sRGB: "#E27EE2" }, { family: "Violet", token: "V400", order: 400, sRGB: "#DE59DE" }, { family: "Violet", token: "V500", order: 500, sRGB: "#C82DC8" }, { family: "Violet", token: "V600", order: 600, sRGB: "#A82EA8" }, { family: "Violet", token: "V700", order: 700, sRGB: "#892489" }, { family: "Violet", token: "V800", order: 800, sRGB: "#6A116A" }, { family: "Violet", token: "V900", order: 900, sRGB: "#470047" } ], Wathet: [ { family: "Wathet", token: "W50", order: 50, sRGB: "#E7F8FE" }, { family: "Wathet", token: "W100", order: 100, sRGB: "#CAEFFC" }, { family: "Wathet", token: "W200", order: 200, sRGB: "#94DDFF" }, { family: "Wathet", token: "W300", order: 300, sRGB: "#24C4FF" }, { family: "Wathet", token: "W350", order: 350, sRGB: "#00AFF0" }, { family: "Wathet", token: "W400", order: 400, sRGB: "#039BD3" }, { family: "Wathet", token: "W500", order: 500, sRGB: "#007FAD" }, { family: "Wathet", token: "W600", order: 600, sRGB: "#056D94" }, { family: "Wathet", token: "W700", order: 700, sRGB: "#0A5875" }, { family: "Wathet", token: "W800", order: 800, sRGB: "#044158" }, { family: "Wathet", token: "W900", order: 900, sRGB: "#062A37" } ], Yellow: [ { family: "Yellow", token: "Y50", order: 50, sRGB: "#FBF4DF" }, { family: "Yellow", token: "Y100", order: 100, sRGB: "#FAEDC2" }, { family: "Yellow", token: "Y200", order: 200, sRGB: "#FFE385" }, { family: "Yellow", token: "Y300", order: 300, sRGB: "#FFC60A" }, { family: "Yellow", token: "Y350", order: 350, sRGB: "#DBA700" }, { family: "Yellow", token: "Y400", order: 400, sRGB: "#B28900" }, { family: "Yellow", token: "Y500", order: 500, sRGB: "#947100" }, { family: "Yellow", token: "Y600", order: 600, sRGB: "#826403" }, { family: "Yellow", token: "Y700", order: 700, sRGB: "#664F05" }, { family: "Yellow", token: "Y800", order: 800, sRGB: "#493903" }, { family: "Yellow", token: "Y900", order: 900, sRGB: "#302503" } ] }) ); }34:Tc06,rawUDTokens = { return { B100: "#e1eaff", B200: "#bacefd", B300: "#82a7fc", B400: "#4e83fd", B50: "#f0f4ff", B500: "#3370ff", B600: "#245bdb", B700: "#1c4cba", B800: "#133c9a", B900: "#0c296e", C100: "#fdddef", C200: "#f9aed9", C300: "#f57ac0", C400: "#f14ba9", C50: "#fef1f8", C500: "#f01d94", C600: "#c71077", C700: "#9e1361", C800: "#7a0f4b", C900: "#520a32", G100: "#d9f5d6", G200: "#b7edb1", G300: "#8ee085", G400: "#62d256", G50: "#f0fbef", G500: "#34c724", G600: "#2ea121", G700: "#237b19", G800: "#186010", G900: "#124b0c", I100: "#e0e2fa", I200: "#b4b9f3", I300: "#7b83ea", I400: "#616ae5", I50: "#f2f3fd", I500: "#4954e6", I600: "#2933c7", I700: "#161fa2", I800: "#0a1285", I900: "#0c1264", L100: "#eef6c6", L200: "#dfee96", L300: "#d2e76a", L400: "#c3dd40", L50: "#f7fae5", L500: "#b3d600", L600: "#8fac02", L700: "#667901", L800: "#495700", L900: "#354200", N50: "#ffffff", N100: "#f2f3f5", // N1000: "#000000", N200: "#eff0f1", N300: "#dee0e3", // N350: "#d0d3d6", N400: "#bbbfc4", // N50: "#f5f6f7", N500: "#8f959e", N600: "#646a73", // N650: "#51565d", N700: "#373c43", N800: "#2b2f36", N900: "#1f2329", // N950: "#0f1114", O100: "#feead2", O200: "#fed4a4", O300: "#ffba6b", O400: "#ffa53d", O50: "#fff5eb", O500: "#ff8800", O600: "#de7802", O700: "#b26206", O800: "#8f4f04", O900: "#6b3900", P100: "#ece2fe", P200: "#cdb2fa", P300: "#ad82f7", P400: "#935af6", P50: "#f6f1fe", P500: "#7f3bf5", P600: "#6425d0", P700: "#4e1ba7", P800: "#380d82", P900: "#270561", R100: "#fde2e2", R200: "#fbbfbc", R300: "#f98e8b", R400: "#f76964", R50: "#fef1f1", R500: "#f54a45", R600: "#d83931", R700: "#ac2f28", R800: "#812520", R900: "#621c18", S100: "#ffffcc", S200: "#fffca3", S300: "#fff67a", S400: "#fff258", S50: "#fefff0", S500: "#ffe928", S600: "#e5ce00", S700: "#c2a800", S800: "#8f7c00", S900: "#5c4f00", T100: "#d5f6f2", T200: "#a9efe6", T300: "#64e8d6", T400: "#14e1c6", T50: "#eafaf8", T500: "#00d6b9", T600: "#04b49c", T700: "#078372", T800: "#036356", T900: "#024b41", V100: "#f8def8", V200: "#efb9ef", V300: "#e58fe5", V400: "#db66db", V50: "#fceefc", V500: "#d136d1", V600: "#b220b2", V700: "#8c218c", V800: "#681268", V900: "#460b46", W100: "#d9f3fd", W200: "#b1e8fc", W300: "#7edafb", W400: "#50cefb", W50: "#ecf9fe", W500: "#14c0ff", W600: "#049fd7", W700: "#037eaa", W800: "#006185", W900: "#004761", Y100: "#faf1d1", Y200: "#f8e6ab", Y300: "#f7dc82", Y400: "#fad355", Y50: "#fdf9ed", Y500: "#ffc60a", Y600: "#dc9b04", Y700: "#aa7803", Y800: "#795101", Y900: "#5c3a00" }; }35:[] 2d:{"id":"2b303dd8b3867816","slug":null,"title":"应用色板测试","thumbnail":"8680a608dfa9a1bd989498dfc8cf8295d4561308d01bc6c52748db324cde4f3e","access_level":"public","create_time":"$D2023-02-03T11:01:20.326Z","update_time":"$D2023-02-10T10:24:56.175Z","view_time":null,"first_public_time":"$D2023-02-03T11:01:20.326Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":1304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"应用色板测试","cells":[{"id":786,"value":"# 应用色板测试","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":796,"value":"

Series Chart Test

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1055,"value":"

\n ${drawLineChart(categoricalPalette)}\n

\n ${drawBarChart(categoricalPalette)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1280,"value":"- 对齐线图样式\n- 曲线效果预览","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1233,"value":"主分类色板\n${gappedSwatches(mainTones.map(t=>({name:t.family,value:t.hex})),68,30)}\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1099,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":906,"value":"viewof mainTonePosition = Inputs.range([0.4, 0.85], {\n label: \"Main Tone Position\",\n step: 0.00001,\n value: 0.62521\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1080,"value":"TODO chroma不能线性插值，得搞个map曲线","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":924,"value":"mainTones = Object.keys(UDWCAGLchBase)\n .filter((n) => n !== \"Neutral\")\n .map((family) => {\n const lch = oklch(UDWCAGLchBase[family]);\n return {\n family,\n hex: culori.formatHex({\n ...lch,\n l: culori.lerp(darkLightness, lightLightness, mainTonePosition),\n c: culori.lerp(darkChroma, lightChroma, mainTonePosition)\n })\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":873,"value":"categoricalPalette = mainTones.map((c) => c.hex) // ) // true // getSwatchForStep(UDLeonardo, 400).map((s) => s.sRGB), // skip(\n// .slice(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"function drawLineChart(colors, marks) {\n return drawChart(colors, [\n // Create a line mark\n Plot.line(remapedData, {\n x: \"date\", // feature for the x channel\n y: \"value\", // feature for the y channel\n stroke: \"brand\" // feature for the stroke,\n })\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"function drawBarChart(colors, marks) {\n return drawChart(colors, [\n Plot.barY(remapedData.slice(0, 50), {\n x: \"date\", // feature for the x channel\n y: \"value\", // feature for the y channel\n fill: \"brand\", // feature for the stroke,\n width: 20\n })\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"function drawChart(colors, marks) {\n return Plot.plot({\n // Pass in an array of desired marks\n color: {\n // type: \"categorical\",\n // domain: _.uniq(remapedData.map((d) => d.brand)),\n range: colors\n },\n marks,\n legend: {\n color: \"brand\"\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":784,"value":"---\n# Base 色板测试","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":624,"value":"inspectPalette(UDTokenFamily, \"当前UD业务色板\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"inspectPalette(UDWCAGTokens, \"UD WCAG 色板\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"oklchToCSS(culori.oklch(\"#336DF4\"), true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1271,"value":"viewof swatchSteps = Inputs.range([5, 12], { label: \"swatch steps\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"viewof useMidTone = Inputs.toggle({ label: \"useMidTone\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"viewof lightLightness = Inputs.range([0, 1], {\n label: \"LightLightness\",\n step: 0.0001,\n value: 0.981\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"viewof darkLightness = Inputs.range([0, 1], {\n label: \"DarkLightness\",\n step: 0.0001,\n value: 0.3179\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"viewof lightChroma = Inputs.range([0, 0.4], {\n label: \"LightChroma\",\n step: 0.00001,\n value:0.09157\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"viewof darkChroma = Inputs.range([0, 0.4], {\n label: \"DarkChroma\",\n step: 0.00001,\n value: 0.20633\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"paletteUDWCAGLch = inspectPalette(UDWCAGLch, \"UD WCGA OKLch 可视化色板\", true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"inspectPalette(UDOKLch, \"UD OKLch 可视化色板\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"inspectPalette(UDLeonardo, \"UD Leonardo 色板\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"

Lightness Distribution

\n \n ### UD OKLch 各token亮度分布\n${plotPalette(UDOKLch)}\n### UD WCAG 各token亮度分布\n${plotPalette(UDWCAGTokens)}\n### UD当前色板各token亮度分布\n${plotPalette(UDTokenFamily)}\n### UD Leonardo 各token亮度分布\n${plotPalette(UDLeonardo)}\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":399,"value":"

Hue Distribution

\n\n### UD OKLch 各 token Hue 分布\n${plotPalette(UDOKLch,'hue')}\n### UD WCAG 各 token Hue 分布\n${plotPalette(UDWCAGTokens,'hue')}\n### UD当前色板各 token Hue 分布\n${plotPalette(UDTokenFamily,'hue')}\n### UD Leonardo 各 token Hue 分布\n${plotPalette(UDLeonardo,'hue')}\n\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":403,"value":"

Chroma Distribution

\n\n### UD OKLch 各 token 色度分布\n${plotPalette(UDOKLch,'colorfulness')}\n### UD WCAG 各 token 色度分布\n${plotPalette(UDWCAGTokens,'colorfulness')}\n### UD当前色板各 token 色度分布\n${plotPalette(UDTokenFamily,'colorfulness')}\n### UD Leonardo 各 token 色度分布\n${plotPalette(UDLeonardo,'colorfulness')}\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":0,"value":"---\n# Appendix\n---\n### Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":807,"value":"echartSeries = {\n return { instance: null };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":819,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"JSON.stringify(\n Object.fromEntries(\n Array.from(UDWCAGLch.entries()).map(([fam, tkn]) => {\n return [fam, tkn.map((t) => t.sRGB)];\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"--- \n### Palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"UDLeonardo = d3.group(\n Object.entries(rawUDLeonardoPalette).map(([n, obj]) => {\n const valueIdx = /\\d/.exec(n).index;\n let family = n.substring(0, valueIdx);\n if (family === \"Gray\") family = \"Neutral\";\n const OKLch = culori.oklch(obj.value);\n let order = Number(n.substring(valueIdx));\n if (\n [\"Turquoise\", \"Green\", \"Lime\", \"Yellow\", \"Orange\", \"Red\"].includes(family)\n ) {\n order *= 10;\n }\n return {\n family,\n token: family + order,\n sRGB: obj.value,\n OKLch,\n order,\n description: obj.description\n };\n }),\n (t) => t.family\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"UDOKLch = {\n const map = Array.from(Object.entries(UDOKLchBase)).reduce(\n (acc, [family, _base500]) => {\n const series = genOKLchSeries(family, _base500);\n\n acc.set(family, series);\n return acc;\n },\n new Map()\n );\n map.set(\"Neutral\", UDWCAGTokens.get(\"Neutral\"));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":772,"value":"UDWCAGLch = {\n const map = genTokensFromLchBase(UDWCAGLchBase);\n map.set(\"Neutral\", UDWCAGTokens.get(\"Neutral\"));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"Array.from(UDTokenFamily.entries())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":702,"value":"[\"Neutral\", UDWCAGTokens.get(\"Neutral\")]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"UDOKLchBase = {\n return {\n Carmine: \"oklch(59.12% 0.222 353.97)\",\n Violet: \"oklch(59.12% 0.222 328.06)\",\n Purple: \"oklch(59.12% 0.222 292.64)\",\n Indigo: \"oklch(59.12% 0.222 273.03)\",\n Blue: \"oklch(59.12% 0.222 263.57)\",\n Wathet: \"oklch(59.12% 0.119 231.58)\",\n Turquoise: \"oklch(59.12% 0.108 178.23)\",\n Green: \"oklch(59.12% 0.198 141.81)\",\n Lime: \"oklch(59.12% 0.141 120.8)\",\n Sunflower: \"oklch(59.12% 0.123 102.13)\",\n Yellow: \"oklch(59.12% 0.12 87.35)\",\n Orange: \"oklch(59.12% 0.143 56.46)\",\n Red: \"oklch(59.12% 0.222 26.45)\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"UDWCAGLchBase = getSwatchForStep(UDWCAGTokens, 500)\n .reverse()\n .reduce((acc, cur) => {\n acc[cur.family] = oklchToCSS(culori.oklch(cur.sRGB), true);\n return acc;\n }, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"oklch(UDOKLchBase.Blue)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"UDLeo = paletteData(UDLeonardo)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"\n

ud wcga

\n \n${getSwatchForStep(UDWCAGTokens, 500).reverse().map((t) => html``)}\n

family	oklch	sRGB
${t.family}	${oklchToCSS(culori.oklch(t.sRGB),true)}	`${t.sRGB}`

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":147,"value":"### Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1242,"value":"function gappedSwatches(palette, w = 32, h = 20, gap = 6) {\n return htl.html`\n

\n ${palette.map(\n (clr) =>\n html`\n

${clr.name ?? \"\"}

`\n )} \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"function genTokensFromLchBase(base) {\n const map = Array.from(Object.entries(base)).reduce(\n (acc, [family, _base500]) => {\n const series = genOKLchSeries(family, _base500);\n\n acc.set(family, series);\n return acc;\n },\n new Map()\n );\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"function oklchToCSS(lch, trim = false) {\n const l = lch.l * 100;\n const c = lch.c;\n const h = lch.h;\n return `oklch(${trim ? l.toFixed(2) : l}% ${trim ? c.toFixed(4) : c} ${\n trim ? h.toFixed(2) : h\n })`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"function alternateSwatch(palette, step) {\n return htl.html`\n

${step} Tokens

\n ${drawTokenFamily(skip(getSwatchForStep(palette, step)))}\n ${drawTokenFamily(\n skip(getSwatchForStep(palette, step), true)\n )}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"function genOKLchSeries(family, mid) {\n const baseMid = oklch(mid);\n const baseMin = { ...baseMid, l: lightLightness, c: lightChroma };\n const baseMax = { ...baseMid, l: darkLightness, c: darkChroma };\n\n const stops = useMidTone ? [baseMin, baseMid, baseMax] : [baseMin, baseMax];\n const interpolator = culori.interpolate(stops, \"oklch\");\n\n const series = Array(swatchSteps)\n .fill()\n .map((_, idx) => {\n const scale = idx / swatchSteps;\n const t = (idx + 1) * 100;\n\n const OKLch = interpolator(scale);\n const sRGB = culori.formatHex(OKLch);\n\n return {\n family,\n order: t,\n token: family + t,\n sRGB,\n scale,\n OKLch\n };\n });\n\n return series;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"function oklch(oklchStr) {\n const [_l, c, h] = /(?<=\$).*(?=\$)/.exec(oklchStr)[0].split(\" \");\n const l = Number(_l.substring(0, _l.length - 1)) / 100;\n return culori.clampChroma(\n { mode: \"oklch\", l, c: Number(c), h: Number(h) },\n \"oklch\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"function drawTokenFamily(family) {\n return htl.html`

${swatches(\n family.sort((a, z) => z.order - a.order).map((d) => d.sRGB)\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"function plotPalette(colorMap, type = \"lightness\") {\n const objMap = Object.fromEntries(colorMap.entries());\n Object.keys(objMap).forEach((k) => {\n objMap[k] = objMap[k].reduce((acc, cur) => {\n acc[cur.order] = cur.sRGB;\n return acc;\n }, {});\n });\n const data = setupData(objMap);\n return plotColors(data, type);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"function paletteData(colorMap) {\n const objMap = Object.fromEntries(colorMap.entries());\n Object.keys(objMap).forEach((k) => {\n objMap[k] = objMap[k].reduce((acc, cur) => {\n acc[cur.order] = cur.sRGB;\n return acc;\n }, {});\n });\n const data = setupData(objMap);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"function getSwatchForStep(palette, step) {\n return UDTokenFamilyNameByHue.map((family) =>\n palette.get(family)?.find((t) => t.order === step)\n );\n // return Array.from(palette.entries()).map(([family, tokens]) => {\n // return tokens.find((t) => t.order === step);\n // });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"function skip(arr, odd = false) {\n return arr.filter((_, idx) => {\n return odd ? idx % 2 !== 0 : idx % 2 === 0;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"### UD Tokens","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":543,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"UDTokenFamilyNameByHue = Array.from(UDTokenFamily.keys()).sort(\n (nameA, nameB) => {\n const famA = UDTokenFamily.get(nameA);\n const famB = UDTokenFamily.get(nameB);\n const tokenA500 = famA.find((t) => t.order === 500);\n const tokenB500 = famB.find((t) => t.order === 500);\n if (nameA === \"Neutral\") return -1;\n if (nameB === \"Neutral\") return 1;\n\n return tokenA500.OKLch.h - tokenB500.OKLch.h;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"UDTokenFamily = d3.group(\n Object.entries(rawUDTokens).map(([n, v]) => ({\n family: UDTokenNameMap[n[0]],\n token: n,\n sRGB: v,\n OKLch: culori.oklch(v),\n order: Number(n.substring(1))\n })),\n (t) => UDTokenNameMap[t.token[0]]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"UDTokenNameMap = {\n return {\n B: \"Blue\",\n C: \"Carmine\",\n G: \"Green\",\n I: \"Indigo\",\n L: \"Lime\",\n N: \"Neutral\",\n O: \"Orange\",\n P: \"Purple\",\n R: \"Red\",\n S: \"Sunflower\",\n T: \"Turquoise\",\n V: \"Violet\",\n W: \"Wathet\",\n Y: \"Yellow\"\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":969,"value":"select * from data ","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:data"},{"id":1044,"value":"remapedData = data.map((d) => ({\n ...d,\n value: Math.sqrt(d.value),\n count: Math.sqrt(d.count)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"import { data } from \"@observablehq/plot-cheatsheets-marks\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":793,"value":"echarts = require(\"https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"import { plotColors, setupData } from \"@jaukia/color-palette-visualizations\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"culori = import(\"culori\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"import {\n categoryColors,\n categoryColorsMuted,\n swatches\n} from \"@nzzvisuals/dataviz-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"