I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
May 4, 2022
2 forks
1 star
vl
.markArea()
.encode(
vl.x().fieldT("date").timeUnit("yearmonthdate"),
vl.y().sum("count").stack("center").axis(null)
)
.width(width * 0.8)
.data(data)
.title("Total Unemployment data")
.render()
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()
vl
.markArea()
.encode(
vl.x().fieldT("date").timeUnit("yearmonthdate"),
vl.y().sum("count").stack("center").axis(null),
vl.color().fieldN("series").scale({ scheme: "category20b" })
)
.width(width * 0.8)
.data(data)
.title("Total Unemployment data")
.render()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 300,
height: 200,
data: { values: data },
mark: "area",
encoding: {
x: {
timeUnit: "yearmonth",
field: "date",
axis: { domain: false, format: "%Y", tickSize: 0 }
},
y: {
aggregate: "sum",
field: "count",
axis: null,
stack: "center"
},
color: { field: "series", scale: { scheme: "category20b" } }
}
})
import { vl } from "@vega/vega-lite-api-v5"
embed = require("vega-embed")
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.
