Public
Edited
Jul 18, 2023
colorSchemeNames = ['Blues', 'Oranges', 'Greens', 'Reds', 'Purples', 'YlOrBr', 'YlGnBu', 'Greys', 'Inferno', 'Magma', 'Plasma', 'Warm', 'Cool', 'CubehelixDefault', 'BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBuGn', 'PuBu', 'PuRd', 'RdPu', 'YlGn', 'YlOrRd']
function printColors(scheme, n) {
const scale = d3.scaleSequential()
.domain([n - 1, 0])
.interpolator(d3[`interpolate${scheme}`]);
const components = ["r", "g", "b"]
let palette = `{ // ${scheme}\n`;
for (let j = 0; j < components.length; ++j) {
palette += " {";
for (let i = 0; i < n; ++i) {
palette += d3.color(scale(i))[components[j]];
if (i < n - 1) {
palette += ", "
}
}
palette += "}";
if (j < components.length - 1) {
palette += ",";
}
palette += "\n";
}
palette += "}";
return palette;
}
{
let palettes = "";
for (let i = 0; i < colorSchemeNames.length; ++i) {
palettes += printColors(colorSchemeNames[i], 16)
if (i < colorSchemeNames.length - 1) {
palettes += ",\n"
}
}
d3.select("#mycode")
.text(palettes);
}
html`<pre id="mycode"></pre>`
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.
