Published unlisted
Edited
Jun 28, 2019
3 stars
compare(["black", "#9ad0ef", "white"])
compare(["black", "blue", "white"])
compare(["black", "red", "white"])
compare(["black", "yellow", "white"])
compare(["black", "green", "white"])
compare(["black", "violet", "white"])
compare(["black", "orange", "white"])
compare(["black", "magenta", "white"])
compare(["black", "cyan", "white"])
compare([d3.hcl(NaN, 0, 0), "blue", d3.hcl(NaN, 0, 100)])
d3.hcl("black")
d3.hcl("blue")
d3.hcl("yellow")
d3.hcl("white")
function compare(colors) {
return html`${[
ramp(d3.piecewise(d3.interpolateHcl, colors)),
ramp(d3.piecewise(d3.interpolateLab, colors))
]}`;
}
import {ramp} from "@mbostock/color-ramp"
d3 = require.alias({
"d3-color": "d3-color@1.2.8",
"d3-interpolate": "d3-interpolate@1.3.2"
})("d3-color", "d3-interpolate")
chroma = require("chroma-js")
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.
