Public
Edited
Jul 10, 2023
9 stars
Plot as an inset for another PlotMaking a Treemap and Sankey diagram with Observable PlotAnalyzing time series data with PlotScatterplot Charts - a collection of Plot examplesAn easter egg collection of Plot examplesDisplaying multiple plots of the whole dataset - a collection of Plot examplesLine charts - a collection of Plot examplesThe function mark - a collection of Plot examplesArea Charts - a collection of Plot examplesDistributions and summary statistics - a collection of Plot examplesPlot party! 🥳🎉Plot API v0.1.0Raincloud Plots with Observable PlotPlot exploration: How to make a clock with Plot?Plot Exploration: How to customize the calendar visualization?Plot exploration: How to make a slope graph?
Sorting with Plot - a collection of Plot examples
toc()
Plot.plot({
marginLeft: 70,
x: {
line: true
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region" })
)
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
marginLeft: 70,
x: {
line: true,
domain: ["Oceania", "Africa", "Americas", "Asia", "Europe"] // setting the order manually by specifying the array
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region" })
)
]
})
newOrder = d3.groupSort(
countries,
(g) => d3.median(g, (d) => d.fert_rate),
(d) => d.region
)
Plot.plot({
marginLeft: 70,
x: {
line: true,
domain: newOrder // setting the order with d3.groupSort()
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region" })
)
]
})
Plot.plot({
marginLeft: 70,
x: {
line: true,
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region", sort: {x: "y"} })
)
]
})
Plot.plot({
marginLeft: 70,
x: {
line: true,
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region", sort: {x: "y", reverse: true} })
)
]
})
Plot.plot({
marginLeft: 70,
x: {
line: true,
},
y: {
line: true
},
marks: [
Plot.barY(
countries,
Plot.groupX({ y: "max" }, { y: "fert_rate", x: "region", sort: {x: "y", reverse: true, limit: 3} })
)
]
})
Plot.plot({
marginLeft: 130,
height: 2000,
x: {
line: true
},
y: {
line: true
},
color: {
legend: true
},
marks: [
Plot.barX(
countries,
Plot.groupY(
{ x: "max" },
{
x: "fert_rate",
y: "country",
fill: "region",
sort: { y: "x", reverse: true }
}
)
)
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.plot({
width: 100,
marks:[
Plot.dot(countries, {
x: "area",
y: "region",
fill: "region",
r: "area"
})
]
})
Plot.plot({
width: 100,
marks: [
Plot.dot(countries, {
x: "area",
y: "region",
fill: "region",
r: "area",
sort: "area"
})
]
})
{
const plot1 = Plot.plot({
width: 100,
marks: [
Plot.dot(countries, {
x: "area",
y: "region",
fill: "region",
r: "area"
})
]
});
const plot2 = Plot.plot({
width: 100,
marks: [
Plot.dot(countries, {
x: "area",
y: "region",
fill: "region",
r: "area",
sort: "area"
})
]
});
const plot3 = Plot.plot({
width: 100,
marks: [
Plot.dot(countries, {
x: "area",
y: "region",
fill: "region",
r: "area",
sort: "area",
reverse: true
})
]
});
return html`${plot1}${plot2}${plot3}`;
}
{
let options = { x: "date", y: "middle", k: 28 };
if (shuffle_sort) options = Plot.sort("date", options);
return Plot.lineY(shuffled, Plot.windowY(options)).plot({ height: 250 });
}
Plot.plot({
marks: [
Plot.lineY(
shuffled,
Plot.windowY(Plot.sort("date", { x: "date", y: "middle", k: 28 }))
)
]
})
import {countries} from '@ee2dev/plot-party'
import { shuffled } from '@observablehq/plot-window'
import { toc } from "@mbostock/toc"
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.
