Plot.plot({
marks: [
Plot.dot(countries, {
x: "population_20",
y: "fert_rate",
r: "area",
fill: "region"
})
]
})
Plot.plot({
r: { range: [1, 20] },
marks: [
Plot.dot(countries, {
x: "population_20",
y: "fert_rate",
r: "area",
fill: "region",
title: (d) => {
let title = "";
for (let key of Object.keys(d)) {
title += `${key}: ${
typeof d[key] === "number" ? d3.format(".2f")(d[key]) : d[key]
} \n`;
}
return title;
}
})
]
})
Plot.plot({
x: {
line: true
},
y: {
line: true
},
r: { range: [1, 20] },
marks: [
Plot.dot(countries, {
x: "population_20",
y: "fert_rate",
r: "area",
fill: "region",
title: (d) => {
let title = "";
for (let key of Object.keys(d)) {
title += `${key}: ${
typeof d[key] === "number" ? d3.format(".2f")(d[key]) : d[key]
} \n`;
}
return title;
}
})
]
})
Plot.plot({
x: {
line: true
},
y: {
line: true
},
r: { range: [1, 20] },
color: {
scheme: myscheme
},
marks: [
Plot.dot(countries, {
x: "population_20",
y: "fert_rate",
r: "area",
fill: "region",
title: (d) => {
let title = "";
for (let key of Object.keys(d)) {
title += `${key}: ${
typeof d[key] === "number" ? d3.format(".2f")(d[key]) : d[key]
} \n`;
}
return title;
}
})
]
})
Plot.dot(countries, {
x: "population_20",
y: "fert_rate",
r: "area",
fill: "region"
})
.plot()
.scale("color")
Plot.rectY(
d3.range(0, 100),
Plot.binX({ y: "count" }, { fill: (d) => d % 2 })
).plot()
Plot.rectX(athletes, Plot.binY({ x: "count" }, { y: "weight" })).plot()
Plot.rect(
athletes,
Plot.bin(
{ fillOpacity: "count" },
{ x: "weight", y: "height", fill: "sex", inset: 0 }
)
).plot()
Plot.plot({
y: {
grid: true
},
marks: [
Plot.barY(penguins, Plot.groupX({ y: "count" }, { x: "species" })),
Plot.ruleY([0])
]
})
Plot.plot({
marginLeft: 70,
x: {
grid: true
},
marks: [
Plot.barX(
penguins,
Plot.groupY({ x: "count" }, { y: "species", fill: "island" })
),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
percent: true
},
marks: [
Plot.barX(
penguins,
Plot.stackX(Plot.groupZ({ x: "proportion" }, { fill: "sex" }))
),
Plot.ruleX([0, 1])
]
})
Plot.plot({
padding: 0,
y: {
tickFormat: Plot.formatMonth()
},
color: {
scheme: "BuRd"
},
marks: [
Plot.cell(
seattle,
Plot.group(
{ fill: "max" },
{
x: (d) => d.date.getUTCDate(),
y: (d) => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}
)
)
]
})
import { view } from "@tomlarkworthy/view"
import { spot } from "@enjalot/plot-spot"
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.
