d3.color("#ff3399") // hexadecimal RGB
d3.color("hotpink") // named RGB
d3.color("hsl(330, 100%, 70.5%)") // HSL
d3.color("rgba(128, 0, 128, 0.2)") // RGB with alpha (opacity)
d3.hcl("#ff3399")
d3.hsl("hotpink")
d3.lab("hsl(330, 100%, 70.5%)")
d3.cubehelix("rgba(128, 0, 128, 0.2)")
d3.rgb(255, 51, 153)
d3.hcl(356.51, 78.96, 58.56)
d3.lch(58.56, 78.96, 356.51)
d3.cubehelix(318.7, 1.2, 0.48)
d3.rgb(d3.hcl(356.51, 78.96, 58.56))
d3.hcl(d3.rgb("#ff3399"))
d3.hcl(356.51, 78.96, 58.56).rgb()
d3.rgb("#ff3399").rgb() // Returns itself!
d3.hcl(356.51, 78.96, 58.56) + ""
d3.hcl(356.51, 78.96, 58.56, 0.2) + ""
d3.hcl(356.51, 78.96, 58.56, 0.2).toString()
d3.hcl(356.51, 78.96, 58.56).formatHex()
d3.hcl(356.51, 78.96, 58.56).formatHex8()
d3.interpolateRgb("red", "blue")(0.5)
d3.interpolateRgb.gamma(2.2)("red", "blue")(0.5)
d3.interpolateHsl("red", "blue")(0.5)
d3.interpolateHslLong("red", "blue")(0.5)
d3.interpolateLab("red", "blue")(0.5)
d3.interpolate({foo: "red"}, {foo: "blue"})(0.5)
d3.interpolate(["red", "red"], ["green", "blue"])(0.5)
d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])(0.5)
d3.interpolateRgbBasis(["red", "green", "blue"])(0.5)
d3.scaleLinear()
.domain([0, 0.5, 1])
.range(["red", "green", "blue"])
.interpolate(d3.interpolateRgb.gamma(2.2))
(0.5)
d3.interpolateSpectral(0.5)
d3.interpolatePRGn(0.5)
d3.interpolateViridis(0.5)
d3.interpolateCubehelixDefault(0.5)
d3.interpolateRainbow(0.5)
d3.schemeSet1
d3.schemeCategory10
d3.schemeSpectral[7]
d3.schemeSpectral[11]
d3.quantize(d3.interpolateHcl("#fafa6e", "#2A4858"), 10)
d3.quantize(d3.interpolateHcl("#f4e153", "#362142"), 10)
d3.quantize(d3.interpolateHcl("#60c96e", "#4d4193"), 10)
d3.quantize(d3.interpolateHcl("#d66000", "#a9a9b4"), 10)
{
let color = "pink";
color = darken(color);
color = saturate(color, 2);
return color.hex();
}
function darken(color, k = 1) {
const {l, c, h} = d3.lch(color);
return d3.lch(l - 18 * k, c, h);
}
function saturate(color, k = 1) {
const {l, c, h} = d3.lch(color);
return d3.lch(l, c + 18 * k, h);
}
d3.rgb(258, 0, 0).displayable()
d3.cubehelix(318.7, 1.3, 0.48).displayable()
function swatch(color) {
return html`<div title="${color}" style="
display: inline-block;
width: 1em;
height: 1em;
background: ${color};
"></div>`;
}
function swatches(colors) {
return html`${colors.map(c => `<div title="${c}" style="
display: inline-block;
margin-right: 3px;
width: 33px;
height: 33px;
background: ${c};
"></div>`)}`;
}
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
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.
