I am a data visualization engineer and designer. I work at Atlassian on charts and other things.
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()
embed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 500,
height: 400,
data: { values: data },
mark: "bar",
encoding: {
x: {
timeUnit: "yearmonth",
field: "date",
axis: { domain: false, format: "%Y", tickSize: 0 }
},
y: {
field: "v1",
type: "quantitative",
title: "Count"
},
y2: {
field: "v2"
}
},
transform: [
{
stack: "count",
offset: "center",
as: ["v1", "v2"],
groupby: ["date"]
}
]
})
vl
.markArea()
.encode(
vl.x().fieldT("date").timeUnit("yearmonthdate"),
vl.y().sum("count").stack("center").axis(null),
vl.color().group("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()
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.
