Public
Edited
Jun 22, 2023
1 star
s = chroma
.scale(["#9ba86e", "#6ea895", "#325C8B", "903F4E"])
.domain([0, 11], 12)
base = [...Array(12).keys()].map((i) => s(i))
svgFromScheme(base.map((d) => d.hex()))
svgFromScheme(base.map((d) => d.brighten(0.8).desaturate(0.1).hex()))
svgFromScheme(base.map((d) => d.darken(0.5).hex()))
svgFromScheme(base.map((d) => d.saturate(0.5).darken(1.8).hex()))
svgFromScheme(base.map((d) => d.desaturate(1).darken(2).hex()))
base.map((d) => d.hex())
function svgFromScheme(scheme) {
const svg = d3.create("svg").attr("width", 700).attr("height", 50);
svg
.selectAll()
.data(scheme)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("fill", function (d) {
return d;
})
.attr("x", function (d, i) {
return 50 * i;
})
.attr("stroke", "black");
return svg.node();
}
chroma = require("chroma-js")
chroma("#000")
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.
