The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Apr 8, 2022
28 forks
Importers
179 stars
Charting with Vega-Lite
Also listed in…
Product page
import { vl } from "@vega/vega-lite-api"
vl.markCircle() // Make a scatter chart
.data(cars) // Using the cars data (below)
.encode(
vl.x().fieldQ("Horsepower"), // For x, use the Horsepower field
vl.y().fieldQ("Miles_per_Gallon"), // For y, use the Miles_per_Gallon field
vl.tooltip().fieldN("Name") // For tooltips, show the Name field
)
.render() // Draw the chart
cars = FileAttachment("cars.json").json()
cars[0]
vl.markBar() // Make a bar chart
.data(cars) // With the cars data again
.encode(
vl.y().fieldN("Origin"), // y can come before x: different orders won't break anything
vl.x().count() // For x, count the number of records
)
.render() // Draw the chart
Inputs.table(cars, { width: 660 })
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.
