Plot as an inset for another PlotMaking a Treemap and Sankey diagram with Observable 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 examplesSorting with Plot - 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?
Analyzing time series data with Plot
SeattleWeather = weather.filter((d) => d.location === "Seattle")
new NumberParser("de").parse("100.000,3")
(1233647852.456789).toLocaleString() // format a number
d3.utcParse("%d.%m.%Y")("10.2.2010")
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("de-DE", {
day: "numeric",
month: "numeric",
year: "numeric"
})
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("fr-FR", {
day: "numeric",
month: "numeric",
year: "numeric"
})
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("en-US", {
day: "numeric",
month: "numeric",
year: "numeric"
})
plot1 = {
return Plot.plot({
/*
x: {
ticks: 20
},*/
marks: [
Plot.line(SeattleWeather, {
x: "date",
y: "wind"
}),
Plot.ruleY([0])
]
});
}
plot1.scale("x")
Plot.plot({
color: {
legend: true
},
marks: [
Plot.rectY(SeattleWeather, {
x: "date",
y: "wind",
interval: "month" // short form for interval: d3.utcMonth
// fill: "wind"
}),
Plot.ruleY([0])
]
})
Plot.plot({
color: {
legend: true
},
marks: [
Plot.rectY(
SeattleWeather,
Plot.binX(
{ y: "sum" },
{
x: "date",
y: "wind",
interval: "month" // short form for interval: d3.utcMonth
//fill: "wind"
}
)
),
Plot.ruleY([0])
]
})
summarize({
data: SeattleWeather,
transform: "binX",
outputs: { y: "mean" },
options: {
x: "date",
y: "wind",
interval: "year" // short form for d3.utcYear
}
})
plot2.scale("x")
Plot.plot({
marks: [
Plot.rectY(
SeattleWeather,
Plot.binX(
{
y: "mean" // or any other reducer
},
{
x: "date",
y: "wind",
interval: "year" // short form for d3.utcYear
}
)
),
Plot.ruleY([0])
]
})
timeHist = Plot.plot({
// width: 2000,
x: {
ticks: 20
},
marks: [
Plot.rectY(
SeattleWeather,
Plot.binX(
{
y: "mean" // or any other reducer
},
{
x: "date",
y: "wind",
interval: d3["utc" + timeAggregation]
}
)
),
Plot.ruleY([0])
]
})
Plot.plot({
// width: 2000,
marks: [
Plot.line(
SeattleWeather,
Plot.binX(
{
y: "mean" // or any other reducer
},
{
x: "date",
y: "wind",
interval: d3["utc" + timeAggregation]
}
)
),
Plot.ruleY([0])
]
})
Plot.plot({
// width: 2000,
marks: [
Plot.areaY(
SeattleWeather,
Plot.binX(
{
y: "mean" // or any other reducer
},
{
x: "date",
y: "wind",
interval: d3["utc" + timeAggregation]
}
)
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(
SeattleWeather.slice(-365),
Plot.groupX(
{ y: "mean" },
{
x: (d) => d.date.getUTCDate(),
y: "temp_max"
}
)
)
]
})
Plot.plot({
margin: 60,
style: {
fontSize: 14
},
x: {
tickFormat: Plot.formatMonth("de") // German spelling of months
},
marks: [
Plot.barY(
SeattleWeather.slice(-365),
Plot.groupX(
{ y: "mean" },
{
x: (d) => d.date.getMonth(),
y: "temp_max",
tip: {
format: {
// x: (d) => Plot.formatMonth("de", "long")(d), // display month based on long form
x: (d) => Plot.formatMonth("de")(d),
y: true
}
}
}
)
)
]
})
Plot.plot({
style: {
fontSize: 14
},
x: {
domain: [
"Jan",
"Feb",
"Mär",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez"
]
},
marks: [
Plot.barY(
SeattleWeather.slice(-365),
Plot.groupX(
{ y: "mean" },
{
x: (d) => Plot.formatMonth("de")(d.date.getMonth()),
y: "temp_max",
tip: true
}
)
)
]
})
Plot.plot({
x: {
type: "band",
domain: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
tickFormat: Plot.formatMonth("de-DE", "short")
},
marks: [
Plot.ruleY([0]),
Plot.lineY(data_pred, {
x: (d) => d["x"].getMonth(),
y: "y",
curve: "natural",
stroke: "orange",
strokeWidth: 3,
strokeDasharray: [1, 5]
}),
Plot.dot(
data_pred.filter((d, i) => i > 0),
{
x: (d) => d["x"].getMonth(),
y: "y",
r: 5,
fill: "orange"
}
),
Plot.lineY(data_raw, {
x: (d) => d["x"].getMonth(),
y: "y",
curve: "natural",
marker: true,
strokeWidth: 3
})
]
})
data_raw = [
{ x: new Date("2022-1-1"), y: 20 },
{ x: new Date("2022-2-1"), y: 120 },
{ x: new Date("2022-3-1"), y: 120 }
]
data_pred = [
{ x: new Date("2022-3-1"), y: 120 },
{ x: new Date("2022-4-1"), y: 120 },
{ x: new Date("2022-5-1"), y: 120 },
{ x: new Date("2022-6-1"), y: 150 },
{ x: new Date("2022-7-1"), y: 220 },
{ x: new Date("2022-8-1"), y: 120 },
{ x: new Date("2022-9-1"), y: 150 }
]
import { stocks } from "@observablehq/plot-labeled-multi-line-chart"
Plot.plot({
style: "overflow: visible;",
y: { grid: true },
marks: [
Plot.ruleY([0]),
Plot.lineY(
stocks,
Plot.binX(
{ y: "first" },
{
x: "Date",
y: "Close",
interval: d3["utc" + timeUnit],
stroke: "Symbol"
}
)
),
Plot.text(
stocks,
Plot.selectLast(
Plot.binX(
{ y: "first", text: (d) => d[0]["Symbol"] }, // this reducer for text takes the first element of the corresponding bin and accesses value of the 'symbol' column
{
x: "Date",
y: "Close",
interval: d3["utc" + timeUnit],
z: "Symbol",
textAnchor: "start",
dx: 3
}
)
)
)
]
})
Plot.plot({
y: {
tickFormat: Plot.formatMonth("de") // German spelling of months
},
marks: [
Plot.cell(weather.slice(-365), {
x: (d) => d.date.getUTCDate(),
y: (d) => d.date.getUTCMonth(),
fill: "temp_max"
})
]
}).scale("y")
Plot.plot({
width,
marks: [
Plot.axisX({
tickFormat: (
(f1, f2) => (x) =>
x.getUTCMonth() ? f1(x) : `${f1(x)}\n${f2(x)}`
)(d3.utcFormat("%B"), d3.utcFormat("%Y"))
}),
Plot.lineY(aapl, { x: "Date", y: "Close" }),
Plot.ruleY([0])
]
})
Plot.plot({
width,
marks: [
Plot.axisX({ ticks: d3.utcMonth.every(3), tickFormat: "%B" }),
Plot.axisX({ ticks: d3.utcYear, tickFormat: "\n%Y", tickSize: 0 }),
Plot.lineY(aapl, { x: "Date", y: "Close" }),
Plot.ruleY([0])
]
})
Plot.plot({
width,
marks: [
Plot.gridX({ ticks: d3.utcMonth.every(3) }),
Plot.axisX({
ticks: d3.utcMonth.every(3),
tickFormat: " %B",
tickSize: 14,
tickPadding: -10,
textAnchor: "start"
}),
Plot.axisX({
ticks: d3.utcYear,
tickFormat: "\n %Y",
tickSize: 24,
tickPadding: -20,
textAnchor: "start"
}),
Plot.lineY(aapl, { x: "Date", y: "Close" })
]
})
Plot.plot({
width,
marks: [
Plot.gridX({ ticks: d3.utcMonth }),
Plot.axisX({
ticks: d3.utcMonth,
tickFormat: " %b",
tickSize: 0,
tickPadding: 3,
x: (x) => (+x + +d3.utcMonth.offset(x)) / 2
}),
Plot.axisX({ ticks: d3.utcMonth, tickFormat: "", tickSize: 14 }),
Plot.lineY(
aapl.filter((d, i) => i < 600),
{ x: "Date", y: "Close" }
)
]
})
Plot.plot({
y: {
tickFormat: Plot.formatMonth("de") // German spelling of months
},
marks: [
Plot.cell(weather.slice(-365), {
x: (d) => d.date.getUTCDate(),
y: (d) => d.date.getUTCMonth(),
fill: "temp_max"
})
]
})
Plot.plot({
marginLeft: 80,
width,
x: {
padding: 0
},
y: {
padding: 0,
tickFormat: Plot.formatWeekday("en", "long"),
tickSize: 0
},
marks: [
Plot.cell(weather.slice(-365), {
x: (d) => d3.utcWeek.count(d3.utcYear(d.date), d.date),
y: (d) => d.date.getUTCDay(),
fill: "wind",
title: (d) => "wind: " + d.wind,
inset: 0.5
})
]
})
new Date().getUTCFullYear()
d3.utcYear(new Date())
Plot.plot({
y: {
grid: true,
label: `↑ Daily temperature range (°${celsius ? "C" : "F"})`,
transform: celsius ? (f) => (f - 32) * (5 / 9) : undefined // Fahrenheit to Celsius
},
marks: [Plot.areaY(sftemp, { x: "date", y1: "low", y2: "high" })]
})
weather
import { sftemp } from "@observablehq/plot-scales"
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.
