Published unlisted
Edited
Oct 29, 2021
chart = Plot.dot(
{ length: 100 },
{
x: Math.random,
y: Math.random,
r: Math.random,
fill: () => String(Math.random())[2],
fillOpacity: () => 100 * Math.random()
}
).plot({
opacity: { label: "opaque" },
r: { domain: [0, 20] },
height: 100
})
chart.legend("color")
chart.legend("color", { legend: "ramp" })
chart.legend("r") // later
chart.scale("color")
chart.scale("opacity")
chart.legend("opacity") // later
chart.scale("x")
chart2 = Plot.dot(
{ length: 100 },
{
x: Math.random,
y: Math.random,
fill: Math.random,
fillOpacity: Math.random
}
).plot({ height: 100, color: { label: "label by default" } })
chart2.legend("color", { width })
chart2.legend("color", {
width,
label: "fixed label",
marginLeft: 50,
marginRight: 50
})
Plot.legend({
color: {
width,
type: "sqrt",
scheme: "blues",
range: [0.25, 1],
label: "I feel blue",
marginLeft: 50,
marginRight: 50
}
})
Plot.legend({ color: { domain: "DCBA", scheme: "rainbow" } })
Plot.legend({ color: { domain: "DCBA", reverse: true } })
Plot.plot({
marks: [
Plot.dotX(d3.range(100), {
x: (i) => i,
y: (i) => i ** 2,
fill: (_, i) => i ** 2
})
],
color: { type: "quantile", scheme: "inferno" }
})
Plot.legend({
color: Plot.plot({
marks: [
Plot.dotX(d3.range(100), {
x: (i) => i,
y: (i) => i ** 2,
fill: (i) => i ** 2
})
],
color: { type: "quantile", scheme: "inferno", quantiles: 7 }
}).scale("color"),
width: 300,
label: "quantiles!",
tickFormat: ",d"
})
Plot.legend({
color: {
type: "threshold",
domain: d3.ticks(2, 8, 5),
scheme: "viridis"
},
width: 300,
label: "thresholds!",
tickFormat: (d) => d.toFixed(1)
})
Plot.plot({
marks: [
Plot.dotX(d3.range(100), {
x: (i) => i,
fill: (i) => i ** 2
})
],
color: { type: "quantile", scheme: "inferno", legend: true }
})
Plot.legend({
color: { scheme: "viridis", domain: [0, 100], label: "Temperature (°F)" }
})
Plot.legend({
color: { scheme: "Turbo", type: "sqrt", domain: [0, 1], label: "Speed (kts)" }
})
Plot.legend({
color: {
type: "diverging",
domain: [-0.1, 0.1],
scheme: "PiYG",
label: "Daily change",
tickFormat: "+%"
}
})
Plot.legend({
color: {
type: "diverging-sqrt",
domain: [-0.1, 0.1],
scheme: "RdBu",
label: "Daily change",
tickFormat: "+%"
}
})
Plot.legend({
color: {
type: "log",
domain: [1, 100],
scheme: "Blues",
label: "Energy (joules)",
ticks: 10,
width: 380
}
})
Plot.legend({
color: {
type: "sqrt",
domain: [-100, 0, 100],
range: ["blue", "white", "red"],
label: "Temperature (°C)",
interpolate: "rgb"
}
})
// TODO: quantize 🌶
Plot.legend({
color: {
type: "quantize",
domain: [1, 10],
scheme: "Purples",
label: "Unemployment rate (%)"
}
})
Plot.legend({
color: {
type: "quantile",
domain: d3.range(1000).map(d3.randomNormal(100, 20)),
scheme: "Spectral",
label: "Height (cm)",
tickFormat: ".0f",
width: 400,
quantiles: 10
}
})
Plot.legend({
color: {
type: "threshold",
domain: [2.5, 3.1, 3.5, 3.9, 6, 7, 8, 9.5],
scheme: "RdBu",
label: "Unemployment rate (%)",
tickSize: 0
}
})
Plot.legend({
color: {
domain: [
"<10",
"10-19",
"20-29",
"30-39",
"40-49",
"50-59",
"60-69",
"70-79",
"≥80"
],
scheme: "Spectral",
label: "Age (years)",
tickSize: 0
}
})
Plot.legend({
color: {
domain: [
"<10",
"10-19",
"20-29",
"30-39",
"40-49",
"50-59",
"60-69",
"70-79",
"≥80"
],
scheme: "Spectral",
label: "Age (years)",
tickSize: 0,
legend: "ramp",
width: 400
}
})
Plot.legend({
color: { domain: ["blueberries", "oranges", "apples"], scheme: "category10" }
})
Plot.legend({
color: {
domain: [
"Wholesale and Retail Trade",
"Manufacturing",
"Leisure and hospitality",
"Business services",
"Construction",
"Education and Health",
"Government",
"Finance",
"Self-employed",
"Other"
],
columns: "180px", // responsive!
width
}
})
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.
