vl
.markBar()
.data(df)
.encode(
vl.x().count("Type"),
vl.y().fieldN("Type").sort(vl.fieldQ("Type")),
vl.tooltip().count("Type")
)
.render({ renderer: "svg" }) // this option allows downloading SVGs as well as PNGs
vl
.markBar()
.data(df)
.encode(
vl.y().fieldN("group").axis({ title: null }),
vl.x().count("group").axis({ title: null }),
vl.tooltip().count("group")
)
.render({ renderer: "svg" })
vl
.markCircle({ opacity: 0.05, size: 100 })
.data(df)
.encode(
vl.y().fieldN("group").axis({ title: null }),
vl.x().fieldT("date").axis({ title: "2022" }),
vl.color().fieldN("Type").scale({ scheme: "turbo" }),
vl.tooltip().fieldN("Type")
)
.width(600)
.config({view: {stroke: null}}) // removes box around plot
.render({ renderer: "svg" })
vl
.markLine({ point: true, strokeWidth: 2, opacity: 0.35 })
.data(df)
.encode(
vl.y().count("group").scale({ type: "sqrt" }).axis({ title: null }),
vl.color().fieldN("group"),
vl.x().month("date").axis({ grid: false, title: null }),
vl.tooltip().fieldN("group")
)
.height(600)
.width(600)
.config({view: {stroke: null}})
.render({ renderer: "svg" })
vl
.markBar()
.data(df)
.encode(
vl.y().fieldN("group").axis({ grid: false, title: null }),
vl.color().count("group").scale({ type: "log", scheme: "greenblue" }),
vl.x().month("date").axis({ grid: false, title: null }),
vl.tooltip().count("group")
)
.width(400)
.render({ renderer: "svg" })
vl
.markBar({ color: "#555" })
.data(df)
.encode(
vl.y().count("group").axis({ grid: false, title: null }),
vl.x().month("date").axis({ grid: false, title: null }),
vl.tooltip().count("group"),
vl.column("group").header({ title: null })
)
.width(100)
.height(100)
.render({ renderer: "svg" })
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.
