colorSchemes = {
const colorSchemes = {
"main-colors": [
"#00C65E",
"#425563",
"#C72514",
"#C7A022",
"#18BEF5",
"#2314C7"
],
"main-dark": [
"#005A02",
"#2B3E4B",
"#AA0503",
"#563D00",
"#005383",
"#3C24D8"
],
"main-medium": [
"#00AB46",
"#768A99",
"#F5583B",
"#AA8602",
"#01A2D8",
"#9F6FFF"
],
"main-light": [
"#40E378",
"#ADC1D1",
"#FF9F79",
"#E6BB40",
"#50DBFF",
"#DCA3FF"
],
primary: ["#00C65E", "#425563"],
"secondary-green": ["#008264", "#00AB8E", "#00C389"],
"secondary-gray": ["#63666A", "#97999B", "#D9D9D6"],
"shades-alluma-green": [
'#002900',
'#004100',
'#005a02',
'#007410',
'#008f2c',
'#00ab46',
'#04c860',
'#40e378',
'#67ff95'
],
"shades-alluma-green": [
'#002900',
'#004100',
'#005a02',
'#007410',
'#008f2c',
'#00ab46',
'#04c860',
'#40e378',
'#67ff95'
],
"shades-alluma-slate": [
'#00101c',
'#132733',
'#2b3e4b',
'#435664',
'#5c6f7e',
'#768a99',
'#91a5b5',
'#adc1d1',
'#cadeef'
],
"shades-red": [
'#670000',
'#880000',
'#aa0503',
'#c62313',
'#df3d26',
'#f5583b',
'#ff7b59',
'#ff9f79',
'#ffbf96'
],
"shades-gold": [
'#300900',
'#402500',
'#563d00',
'#705400',
'#8c6d00',
'#aa8602',
'#c7a022',
'#e6bb40',
'#ffd95e'
],
"shades-lightblue": [
'#00244e',
'#003b68',
'#005383',
'#006c9e',
'#0087bb',
'#01a2d8',
'#18bef5',
'#50dbff',
'#77f9ff'
],
"shades-indigo": [
'#00008d',
'#140cbb',
'#3c24d8',
'#5e3bef',
'#7e53ff',
'#9f6fff',
'#be89ff',
'#dca3ff',
'#f9bdff'
],
"likert-rdbu": ["#aa0503", "#df3d26", "#5c6f7e", "#0087bb", "#005383"],
"likert-yebu": ["#705400", "#aa8602", "#5c6f7e", "#0087bb", "#005383"],
"case-study-cdss": ["#273459", "#72788C", "#F2A679", "#F27127"],
"case-study-cmsp-map": [
"#04B2D9",
"#0B758C",
"#66D8F2",
"#BFBFBF",
"#0D0D0D"
],
"case-study-one-e-app-ad": [
"#56308C",
"#97BF04",
"#F2F1E4",
"#F2B705",
"#F2D98D"
],
tetradic: ["#00C65E", "#0005C6", "#C60068", "#C6C100"],
triadic: ["#00C65E", "#5E00C6", "#C65E00"],
complementary: ["#00C65E", "#C60068"],
"dkor-dkbu-10-seq": [
"#f25900",
"#f26514",
"#f27127",
"#ed8e36",
"#e7af48",
"#ddcd55",
"#bad15a",
"#84c05a",
"#54ab5c",
"#499278",
"#3b6a76",
"#2c3859"
],
'one-group': ['#e98426', '#e98426'],
'two-groups-cat-1': ['#e98426', '#0d828a'],
'two-groups-cat-2': ["#649ea5", "#0d828a"],
'two-groups-cat-3': ['#0d828a', '#3e7aa8'],
'two-groups-seq': ['#73a57a', '#e98426'],
'three-groups-cat': ['#e98426', "#649ea5", "#0d828a"],
'three-groups-seq': ['#f4c192', '#e98426', '#ba691e'],
'four-groups-cat-1': ['#776972', '#649ea5', '#0d828a', '#e98426'],
'four-groups-cat-2': ['#e98426', '#0d828a', '#649ea5', '#776972'],
'four-groups-seq': ['#f4c192', '#ed9c51', '#e98426', '#ba691e'],
'five-groups-cat-1': [
'#e98426',
'#0d828a',
'#649ea5',
'#004a80',
'#776972'
],
'five-groups-cat-2': [
'#e98426',
'#ba691e',
'#649ea5',
'#0d828a',
'#332d2f'
],
'five-groups-seq': ['#f4c192', '#efa867', '#eb903b', '#e98426', '#ba691e'],
'six-groups-cat-1': [
"#e98426",
"#649ea5",
"#0d828a",
"#776972",
"#004a80",
"#3e7aa8"
],
'six-groups-cat-2': [
"#e98426",
"#649ea5",
"#0d828a",
"#b44b27",
"#905a78",
"#73a57a"
],
'six-groups-seq': [
'#e5edf2',
'#b2c9d8',
'#7fa5bf',
'#4c81a6',
'#195d8c',
'#004b80'
],
'diverging-colors': [
'#ba691e',
'#e98426',
'#eb903b',
'#efa867',
'#e5edf2',
'#7fa5bf',
'#195d8c',
'#002d4c'
],
// blog
'blog-two-cat': ['#485064', '#ABAFBA'], // https://www.ppic.org/blog/for-many-californians-poverty-is-one-minor-expense-away/
'blog-two-cat-2': ['#8CAA9E', '#485064'],
'blog-four-cat': ["#8BAA9D", "#485064", "#CBCB6D", "#715F24"], // Daniel's blog on mental health (https://www.ppic.org/blog/improving-equity-in-mental-health-services/)
'hec-bkit-one-cat': ['#65AC8E'], // Higher Ed Briefing kit 2019
'hec-bkit-two-cat': ['#FE5339', "#0EA5DF"],
'hec-bkit-two-cat-2': ["#FE5339", "#460D42"],
'hec-bkit-two-cat-3': ['#6C82C0', '#F2AA2A'],
'hec-bkit-two-cat-4': ['#6C82C0', '#C6702A'],
'hec-bkit-two-cat-5': ['#65AC8E', '#460D42'],
'hec-bkit-three-cat': ['#65AC8E', '#C6702A', '#0EA5DF'],
'hec-bkit-three-cat-2': ['#65AC8E', '#C6702A', '#460D42'],
'hec-bkit-three-cat-3': ['#460D42', '#0EA5DF', '#FE5339'],
'hec-bkit-four-cat': ['#460D42', '#C6702A', '#6C82C0', '#F2AA2A'],
'hec-bkit-five-cat': [
'#C9292A',
'#F2AA2A',
'#C6702A',
'#65AC8E',
'#53619E'
],
'hec-bkit-five-cat-2': [
'#859191',
'#65AC8E',
'#F2AA2A',
'#C6702A',
'#460D42'
],
'hec-bkit-five-cat-two-groups': [
'#C6702A',
'#F2AA2A',
'#7484AE',
'#53619E',
'#152596'
]
};
return colorSchemes;
}
function swatches(name) {
const colors = colorSchemes[`${name}`];
const n = colors.length;
const dark = d3.lab(colors[0]).l < 50;
const canvas = svg`<svg viewBox="0 0 ${n} 1" style="display:block;width:${n *
45}px;height:45;margin:0;cursor:pointer;">${colors.map(
(c, i) => svg`<rect x=${i} width=1 height=1 fill=${c}>`
)}`;
const label = document.createElement("div");
label.textContent = name;
label.setAttribute("class", "color-label");
canvas.onclick = () => {
label.textContent = "Copied!";
copy(JSON.stringify(colors));
setTimeout(() => (label.textContent = name), 2000);
};
const colors_label = document
.createElement("div")
.appendChild(document.createElement('p'));
colors_label.textContent = `${colors.map((c, i) => c)}`;
colors_label.setAttribute('class', 'color-hex-codes');
return html`${label}${colors_label}${canvas}`;
}
d3 = require("d3@5")
style = html`
<style>
body {
font-family: "Arial";
color: "#425563";
}
.color-label {
font-size: x-large !important;
color: #425563;
}
.color-hex-codes {
font-size: small !important;
color: #19267C;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
