The avatar for @joshdata
Joshua Tauberer
Founder of @govtrack, head of product development at @larsa4d, and civic technologist.
Published
Reusable Components
Edited
Dec 30, 2020
1 fork
Importers
26 stars
Reusable Components
Perceptually valid color scales
Simple line chart that you can import in your notebook
Insert cell
Insert cell
Insert cell
Insert cell
show_scale(make_scale("#d6191b", "#f0b6d9", 11));
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
show_scale(make_scale("#b91513", "#4455d4", 11)) // test lightness=100
Insert cell
Insert cell
show_scale(make_divergent_scale('#d6191b', '#fefec4', '#2c7bb6', 12, true))
Insert cell
Insert cell
show_scale(make_divergent_scale('black', '#1166aa', 'white', 12))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let color1 = ["#d7191c", "#d01c8b", "#000000"];
let color2 = [
"#fdae61",
"#f1b6da",
"#abdda4",
"#abd9e9",
"#E5E5E5",
"#FFFFFF"
];
let color3 = [null, "#1a9641", "#2c7bb6", "#000000"];
let table = DOM.element("div");
color1.forEach(c1 => {
color2.forEach(c2 => {
color3.forEach(c3 => {
let s;
if (c3 == null) s = make_scale(c1, c2, 11);
else s = make_divergent_scale(c1, c2, c3, 11);
table.appendChild(show_scale(s));
});
});
});
return table;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more