Public
Edited
Jun 14, 2023
Paused
1 fork
38 stars
Insert cell
Insert cell
Insert cell
Insert cell
Plot.rectY(commits, Plot.binX({y: "mean"}, {x: "time", y: "count", thresholds: d3.utcMonday})).plot()
Insert cell
Insert cell
Insert cell
vl.markBar()
.data(commits)
.encode(
vl.x().fieldO("time").timeUnit("week"),
vl.y().mean("count")
)
.render()
Insert cell
Insert cell
Insert cell
commits = FileAttachment("commits.csv").csv({typed: true})
Insert cell
vl.markCircle()
.data(commits)
.encode(
vl.y().fieldO("time").timeUnit("utcday"),// .sort(["mon", "tue", "wed", "thu", "fri", "sat", "sun"]),
vl.x().fieldO("time").timeUnit("utchours"),
vl.size().sum("count") //.scale({ range: [0, 200] })
)
.render()
Insert cell
Insert cell
Plot.plot({
inset: 10,
grid: true,
x: {
ticks: 24
},
y: {
type: "point",
tickFormat: Plot.formatWeekday()
},
marks: [
Plot.frame(),
Plot.dot(commits, Plot.group({r: "sum", title: "sum"}, {
y: d => d.time.getUTCDay(),
x: d => d.time.getUTCHours(),
r: "count",
title: "count",
fill: "green"
}))
]
})
Insert cell
Insert cell
Insert cell
seattle = FileAttachment("seattle-weather.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
vl.markBar()
.data(seattle)
.encode(
vl.x().fieldO("date").timeUnit("month"),
vl.y().mean("precipitation")
)
.render()
Insert cell
Insert cell
Plot.barY(seattle, Plot.groupX({y: "mean"}, {x: d => d.date.getUTCMonth(), y: "precipitation"})).plot()
Insert cell
Insert cell
Plot.barY(seattle, Plot.groupX({y: "mean"}, {x: d => d.date.getUTCMonth(), y: "precipitation"})).plot({
x: {tickFormat: Plot.formatMonth()},
y: {grid: true}
})
Insert cell
Insert cell
Insert cell
vl.layer(
vl.markBar()
.encode(
vl.x().fieldO("date").timeUnit("month"),
vl.y().mean("precipitation")
),
vl.markRule({color: "red"})
.encode(
vl.y().mean("precipitation")
)
)
.data(seattle)
.render()
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(seattle, Plot.groupX({y: "mean"}, {x: d => d.date.getUTCMonth(), y: "precipitation"})),
Plot.ruleY(seattle, Plot.groupZ({y: "mean"}, {y: "precipitation", stroke: "red"}))
],
x: {tickFormat: Plot.formatMonth()},
y: {grid: true}
})
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more