I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Plot.plot({
x: { type: "utc" },
marks: [
Plot.areaY(
data,
Plot.stackY(
{ offset: "center" },
Plot.groupX({ y: "sum" }, { y: "count", x: "date", fill: "steelblue" })
)
)
]
})
Plot.plot({
x: { type: "utc" },
marks: [
Plot.areaY(
data,
Plot.stackY(
{ offset: "center" },
Plot.binY(
{ y: "sum", thresholds: d3.utcHour },
{ y: "count", x: "date", fill: "steelblue" }
)
)
)
]
})
vl
.markArea()
.encode(
vl.x().fieldT("date").timeUnit("yearmonthdate"),
vl.y().sum("count").stack("center").axis(null),
vl.detail().fieldN("notAnAttribute")
)
.width(width * 0.8)
.data(data)
.title("Total Unemployment data")
.render()
And some other solutions proposed by Mike
Plot.plot({
x: { type: "utc" },
marks: [
Plot.areaY(
data,
Plot.groupX({ y: "sum" }, { y: "count", x: "date", offset: "center" })
)
]
})
Plot.plot({
x: { type: "utc" },
marks: [
Plot.areaY(data, { y: "count", x: "date", z: "series", offset: "center" })
]
})
import { vl } from "@vega/vega-lite-api-v5"
data = (await require("vega-datasets"))["unemployment-across-industries.json"]()
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.
