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;
}
ramp(d3.interpolateRgbBasis([ '#deebf7', '#9ecae1', '#3182bd' ]))
ramp(d3.interpolateRgbBasis([ '#eff3ff', '#bdd7e7', '#6baed6', '#2171b5' ]))
ramp(d3.interpolateRgbBasis([ '#eff3ff', '#bdd7e7', '#6baed6', '#3182bd', '#08519c' ]))
ramp(d3.interpolateRgbBasis([ '#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd', '#08519c' ]))
ramp(d3.interpolateRgbBasis([
'#eff3ff',
'#c6dbef',
'#9ecae1',
'#6baed6',
'#4292c6',
'#2171b5',
'#084594'
]))
ramp(d3.interpolateRgbBasis([
'#f7fbff', '#deebf7',
'#c6dbef', '#9ecae1',
'#6baed6', '#4292c6',
'#2171b5', '#084594'
]))
ramp(d3.interpolateRgbBasis([
'#f7fbff', '#deebf7',
'#c6dbef', '#9ecae1',
'#6baed6', '#4292c6',
'#2171b5', '#08519c',
'#08306b'
]))
ramp(d3.interpolateBlues)
vegalite = require("@observablehq/vega-lite@0.2")
hclC7 = [7, 18, 30, 41, 49, 52, 47];
hclC9 = [4, 9, 18, 30, 41, 49, 52, 50, 50];
hclL7 = [95, 86, 77, 67, 56, 45, 27];
hclL9 = [98, 93, 86, 77, 67, 56, 45, 32, 19];
function getColorsFromHcl(baseColor, hclC, hclL, numSteps) {
const color = d3.hcl(baseColor);
const colors = [];
for (let i = 0; i < numSteps; i++) {
colors.push(d3.hcl(color.h, hclC[i], hclL[i]).hex());
}
return colors;
}
swatches([d3.color('#077A9D')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#077A9D', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#077A9D', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#077A9D', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#077A9D', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#077A9D', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
ramp(d3.interpolateBlues);
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC7, hclL7, 7) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9.slice(1), hclL9.slice(1), 8) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC7, hclL7, 7) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9.slice(1), hclL9.slice(1), 8) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
},
config: {background: "#11171C"}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC7.slice(1), hclL7.slice(1), 6) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9, hclL9, 9) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: {scheme: 'blues', nice: false} }
}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC7.slice(1), hclL7.slice(1), 6) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#077A9D', hclC9, hclL9, 9) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: {scheme: 'blues', nice: false} }
},
config: {background: "#11171C"}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
swatches([d3.color('#FFAB00')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FFAB00', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FFAB00', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FFAB00', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FFAB00', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FFAB00', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
swatches([d3.color('#00A972')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#00A972', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#00A972', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#00A972', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#00A972', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#00A972', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
ramp(d3.interpolateGreens)
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC7, hclL7, 7) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC9.slice(1), hclL9.slice(1), 8) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC7, hclL7, 7) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC9.slice(1), hclL9.slice(1), 8) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#00A972', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
},
config: {background: "#11171C"}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
swatches([d3.color('#FF3621')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FF3621', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FF3621', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FF3621', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FF3621', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#FF3621', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
ramp(d3.interpolateReds)
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC7, hclL7, 7) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC9.slice(1), hclL9.slice(1), 8) } }
}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
(async () => {
const charts = await Promise.all([
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC7, hclL7, 7) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC9.slice(1), hclL9.slice(1), 8) } }
},
config: {background: "#11171C"}
}),
vegalite({
data: { url: "https://gist.githubusercontent.com/mbostock/5870a43c73b8899213019ded657840bd/raw/469d70043a0e0e11adba24f5390d147c9970046e/cars.csv" },
mark: "point",
width: 380,
height: 360,
autosize: "fit",
encoding: {
x: { field: "Horsepower", type: "quantitative" },
y: { field: "Miles_per_Gallon", type: "quantitative" },
color: { field: "Miles_per_Gallon", type: "quantitative", scale: { range: getColorsFromHcl('#FF3621', hclC9.slice(1, -1), hclL9.slice(1, -1), 7) } }
},
config: {background: "#11171C"}
})
]);
return html`<div style="display: flex;">${charts}</div>`;
})();
swatches([d3.color('#8BCAE7')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#8BCAE7', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#8BCAE7', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#8BCAE7', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#8BCAE7', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#8BCAE7', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
swatches([d3.color('#AB4057')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#AB4057', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#AB4057', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#AB4057', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#AB4057', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#AB4057', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
swatches([d3.color('#99DDB4')])
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#99DDB4', hclC7, hclL7, 7)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#99DDB4', hclC7.slice(1), hclL7.slice(1), 6)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#99DDB4', hclC9, hclL9, 9)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#99DDB4', hclC9.slice(1), hclL9.slice(1), 8)))
ramp(d3.interpolateRgbBasis(getColorsFromHcl('#99DDB4', hclC9.slice(1, -1), hclL9.slice(1, -1), 7)))
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.
