color = d3.scaleOrdinal(d3.schemeCategory10)
setDomain = {
color.domain("A list of ten words to explore this scale’s domain".split(/ /));
return color.domain();
}
d3.schemeCategory10
(setDomain, color.range())
werner = {
replay;
return d3.scaleOrdinal([`#383867`, `#584c77`, `#33431e`, `#a36629`, `#92462f`, `#b63e36`, `#b74a70`, `#946943`]);
}
run = {
const data = "While the original colors have aged, they have been preserved here as in the original in an effort to faithfully reproduce the guide.".split(
/ /
);
var i = 0;
while (i++ < data.length) {
const str = data.slice(0, i);
yield html`<p style="font-family:sans-serif;color:white;font-weight:bold;line-height:1.8em;">${str
.map(
word =>
`<span style="background:${werner(word)};padding:5px;">
${word}
</span>`
)
.join("")}`;
werner;
await Promises.delay(300);
}
}
(run, werner.domain())
taint = d3.scaleOrdinal(["earth", "wind", "fire"], ["green", "red", "blue"])
invert = d3.scaleOrdinal(taint.range(), taint.domain())
invert("green")
unknown = d3.scaleOrdinal([0, 1, 2], ["A", "B", "C"])
unknown(3)
no_unknown = d3.scaleOrdinal([0, 1, 2], ["A", "B", "C"])
.unknown("…")
no_unknown(3)
unknown.unknown()
no_unknown.unknown()
source = d3.scaleOrdinal()
.domain([0, 1])
.range(["red", "blue", "green"])
{
const a2 = source.copy()(2);
const a3 = source.copy()(3); // without the copy, a3 would go back to "red"
return { a2, a3 };
}
{
const scale = d3.scaleOrdinal();
scale.range(["first", "second"]);
const before = scale("A") + ", " + scale("B");
scale.range(["1st", "2nd"]);
const after = scale("A") + ", " + scale("B");
return { before, after };
}
{
const symbols = d3.scaleOrdinal().range(d3.symbols),
color = d3.scaleOrdinal(d3.schemePaired),
height = 200,
symbol = d3.symbol().size(200),
data = d3.range(500).map(i => ({
x: width * Math.random(),
y: height * Math.random(),
s: Math.floor(9 * Math.random()),
c: Math.floor(20 * Math.random())
})),
paths = data.map(
d =>
`<path transform="translate(${d.x},${d.y})" d="${symbol.type(
symbols(d.s)
)()}" fill="${color(d.c)}" />`
);
return svg`<svg width=${width} height=${height}>${paths.join("")}</svg>`;
}
atoms = new Map([["C", 12], ["H", 1], ["O", 16]])
colors = new Map([["C", "black"], ["H", "white"], ["O", "blue"]])
m = d3.scaleOrdinal()
.domain(atoms.keys())
.range(colors.values())
m("O")
new Map(m.domain().map(d => [d, m(d)]))
d3 = require("d3-scale@3", "d3-scale-chromatic@2", "d3-shape@2", "d3-array@2")
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.
