Ph.D. student at Northeastern
Public
Edited
May 19, 2023
swatches(['red', '#d62728', '#fc665b', '#d1495b'])
Math.max(...[1, 2, 13, 4, 5], ...[1, 2, 3, 4, 5, 6])
startColor = '#7b19b3'
rampToBlack = d3.quantize(d3.interpolateHcl(startColor, 'black'), 5)
rampToWhite.map(c => d3.hcl(c))
rampToWhite = d3.quantize(d3.interpolateHcl(startColor, 'white'), 5)
function lines(scheme) {
const div = d3.create('div')
.style('display', 'flex');
const I = d3.range(scheme.dark.length);
const svg = div.selectAll('svg')
.data(I)
.join('svg')
.attr('width', '100')
.attr('height', '100');
svg.append('rect')
.attr('fill', i => scheme.light[i])
.attr('width', 100)
.attr('height', 100);
svg.append('rect')
.attr('fill', i => scheme.medium[i])
.attr('y', 25)
.attr('width', 100)
.attr('height', 50);
svg.append('rect')
.attr('fill', i => scheme.dark[i])
.attr('y', 49)
.attr('width', 100)
.attr('height', 2);
return div.node();
}
grays = d3.range(10, 100, 10).reverse().map(l => d3.hcl(0, 0, l).formatRgb())
d3.range(2.5, 97.501, )
d3.hcl(0, 0, 97.5).formatRgb()
// equivalent to d3.interpolateHcl('white', 'black')
interpolateGrays = t => (d3.hcl(0, 0, (1 - t) * 100).formatRgb())
interpolateGrays(0.05)
d3.range(3, 7).map(d => interpolateGrays(d / 8))
d3.quantize(interpolateGrays, 12)
interpolateGrays(0.025)
grays.map((g, i) => `--gray-${i + 1}: ${g};`).join('\n')
swatches([
'rgb(121, 35, 103)',
d3.color('rgb(121, 35, 103)').brighter(),
"rgb(111,43,110)",
d3.color("rgb(111,43,110)").brighter(),
"rgb(131,12,111)",
"rgb(133,22,87)",
"rgb(128,25,103)",
"rgb(191,32,158)",
"rgb(161,8,92)",
])
swatches([d3.interpolateBlues(0.5)])
d3.interpolateBlues(0.5)
swatches([d3.interpolateRdBu(0.25), d3.interpolateRdBu(0.75)])
d3.interpolateRdBu(0.25)
d3.interpolateRdBu(0.75)
swatches(["rgb(229,131,106)", "rgb(105,171,207)", "#053061", "rgb(28,76,94)", "#777777"])
swatches(["#1f78b4", "#a6cee3"])
swatches(d3.quantize(d3.interpolateYlGnBu, 3))
d3.hcl(d3.color('#1f78b4'))
d3.hcl(d3.color('#a6cee3'))
swatches(d3.schemeOranges[3])
swatches(d3.schemeReds[3])
blue = d3.schemeBlues[5].slice(1, 4)
green = d3.schemeGreens[5].slice(1, 4)
red = d3.schemeReds[5].slice(1, 4)
orange = d3.schemeOranges[5].slice(1, 4)
purple = d3.schemePurples[5].slice(1, 4)
swatches([blue[2], green[2], red[2], orange[2], purple[2]])
[blue[2], green[2], red[2], orange[2], purple[2]]
swatches([blue[1], green[1], red[1], orange[1], purple[1]])
[blue[1], green[1], red[1], orange[1], purple[1]]
swatches([blue[0], green[0], red[0], orange[0], purple[0]])
[blue[0], green[0], red[0], orange[0], purple[0]]
swatches(blue)
swatches(green)
swatches(red)
swatches(orange)
swatches(purple)
d3.schemeYlGnBu
b = d3.hcl(d3.schemeCategory10[0])
swatches([b.darker(), b, b.brighter(), b.brighter(2)])
swatches(d3.quantize(d3.interpolateHcl(b, 'white'), 3))
swatches(d3.quantize(d3.interpolateHcl(b, 'white'), 4).slice(0, 3))
swatches(d3.quantize(d3.interpolateHcl(d3.schemeCategory10[0], 'white'), 20))
swatches(d3.quantize(d3.interpolateHcl(d3.schemeCategory10[0], 'white'), 4))
function getContinuousSchemes(n, a, b) {
const blues = d3.schemeBlues[n].slice(a, b);
const oranges = d3.schemeOranges[n].slice(a, b);
const greens = d3.schemeGreens[n].slice(a, b);
const reds = d3.schemeReds[n].slice(a, b);
const purples = d3.schemePurples[n].slice(a, b);
return {
dark: [blues[2], oranges[2], greens[2], reds[2], purples[2]],
medium: [blues[1], oranges[1], greens[1], reds[1], purples[1]],
light: [blues[0], oranges[0], greens[0], reds[0], purples[0]],
}
}
makeSchemesInterpolate = (scheme) => d3.transpose(scheme.map(c => d3.quantize(d3.interpolateHcl(c, 'white'), 4).slice(0, 3)))
makeSchemesBrighter = (scheme) => d3.transpose(scheme.map(c => [c, d3.hcl(c).brighter(1).hex(), d3.hcl(c).brighter(2).hex()]))
makeSchemesMulti = (scheme) => d3.transpose(scheme.map(dark => {
const light = d3.quantize(d3.interpolateHcl(dark, 'white'), 20)[15];
const medium = d3.interpolateHcl(light, dark)(0.5);
return [d3.color(dark).formatRgb(), medium, light];
}))
function formatSchemes(schemes) {
return Object.fromEntries(d3.zip(['dark', 'medium', 'light'], schemes))
}
swatches(d3.schemePaired)
swatches([d3.schemeCategory10[5]])
d3.schemeCategory10[5]
swatches(d3.schemePaired.filter((d, i) => i % 2 === 1))
swatches(d3.schemeBlues[9])
swatches([d3.schemeBlues[9][4], d3.schemeBlues[9][6]])
swatches(d3.schemeOranges[9])
swatches([d3.schemeOranges[9][4], d3.schemeOranges[9][6]])
pairedPaired = {
const darkBrown = '#B15928';
const lightBrown = '#D4906D'//'#E88753'//'#FFB881';
const darkPink = '#f781bf';
const lightPink = '#FFB3F2';
let lights = d3.schemePaired.filter((d, i) => i % 2 === 0);
lights = [lights[0], lights[3], lights[1], lights[2], lights[4], lightPink, lightBrown];
let darks = d3.schemePaired.filter((d, i) => i % 2 !== 0);
darks = [darks[0], darks[3], darks[1], darks[2], darks[4], darkPink, darkBrown];
const mediums = d3.zip(lights, darks).map(([light, dark]) => d3.color(d3.interpolateHcl(light, dark)(0.5)).hex());
return {
light: lights,
medium: mediums,
dark: darks,
};
}
pairedPaired['medium'].map(color => d3.hsl(color))
JSON.stringify(pairedPaired, null, 2);
swatches(pairedPaired.light)
swatches(pairedPaired.medium)
swatches(pairedPaired.dark)
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.
