Plot.plot({
color: {
legend: true
},
marks: [
Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex"})
]
})
athletes = (await FileAttachment("athletes.csv").csv({typed: true}))
.filter(d => ["aquatics", "volleyball", "football", "rowing"].includes(d.sport))
Plot.plot({
grid: true,
height: 320,
color: {
type: "ordinal",
scheme: "category10",
legend: true
},
facet: {
data: athletes,
x: "sex"
},
marks: [
Plot.frame(),
Plot.dot(athletes, {x: "weight", y: "height", fill: "sport", r: 1.5})
]
})
faceted = Plot.plot({
grid: true,
height: 320,
x: {
nice: true
},
color: {
scheme: "warm",
nice: true,
legend: true
},
facet: {
data: athletes,
x: "sport",
y: "sex"
},
marks: [
Plot.frame(),
Plot.dot(athletes, {x: "date_of_birth", y: "height", fill: "weight", r: 1.5})
]
})
sportsPlot = Plot.plot({
color: {
type: "ordinal",
scheme: "category10",
legend: "ramp"
},
marks: [
Plot.dot(athletes, {x: "weight", y: "height", fill: "sport", stroke: "white"})
]
})
sportsPlot.legend("color")
faceted.legend("color", {label: "Weight (kg) →", ticks: 10, width: 350})
wavelengthToColor(400 * 350)
newee = Plot.legend({
color: {
range: ["white", "blue"],
domain: [400, 750]
},
width: 350,
ticks: 10,
label: "Wavelength (nm) →"
})
mutable min_val = 100
mutable max_val = 500
this_legend = Plot.legend({
color: {
range: ["white", "blue"],
domain: [mutable min_val, mutable max_val]
},
width: 350,
ticks: 10,
label: "Wavelength (nm) →"
})
Plot.legend({color: sportsPlot.scale("color")})
alpha = Plot.legend({
color: {
domain: "ABCD"
},
legend: "swatches",
className: "alphabet",
swatchSize: 20,
style: {
fontFamily: "Comic Sans MS",
fontSize: "20px"
}
})
seattle = FileAttachment("seattle-weather.csv").csv({typed: true})
tempChart = Plot.plot({
height: 300,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
color: {
type: "diverging",
pivot: d3.mean(seattle, d => d.temp_max),
reverse: true,
legend: true
},
marks: [
Plot.cell(seattle, Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}))
]
})
tempChart.legend("color")
tempChart.legend("color", {label: "temperature (°C) →"})
tempChart.legend("color", {
label: "temperature (°C) →",
tickSize: r.tickSize,
ticks: r.ticks,
tickFormat: r.tickFormat,
round: r.round,
width: r.width,
height: r.height + r.tickSize
})
Plot.legend({opacity: {domain: [0, 10]}})
Plot.legend({opacity: {type: "linear"}, color: "orange"})
sportsScale = sportsPlot.scale("color")
<div>${sportsScale.domain.map((sport) => htl.html`<div style="
background: ${sportsScale.apply(sport)};
color: white;
display: inline-block;
padding: 0 6px 0 6px;
margin-right: 0.5em;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
">${sport.toUpperCase()}</div>`)}</div>
function wavelengthToColor(wl) {
let R, G, B, alpha;
if (wl >= 380 && wl < 440) {
R = (-1 * (wl - 440)) / (440 - 380);
G = 0;
B = 1;
} else if (wl >= 440 && wl < 490) {
R = 0;
G = (wl - 440) / (490 - 440);
B = 1;
} else if (wl >= 490 && wl < 510) {
R = 0;
G = 1;
B = (-1 * (wl - 510)) / (510 - 490);
} else if (wl >= 510 && wl < 580) {
R = (wl - 510) / (580 - 510);
G = 1;
B = 0;
} else if (wl >= 580 && wl < 645) {
R = 1;
G = (-1 * (wl - 645)) / (645 - 580);
B = 0.0;
} else if (wl >= 645 && wl <= 780) {
R = 1;
G = 0;
B = 0;
} else {
R = 0;
G = 0;
B = 0;
}
// intensity is lower at the edges of the visible spectrum.
if (wl > 780 || wl < 380) {
alpha = 0;
} else if (wl > 700) {
alpha = (780 - wl) / (780 - 700);
} else if (wl < 420) {
alpha = (wl - 380) / (420 - 380);
} else {
alpha = 1;
}
return `rgb(${R * alpha * 100}%,${G * alpha * 100}%,${B * alpha * 100}%)`;
}
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.
