import { vl } from "@vega/vega-lite-api"
vl.markPoint({shape: 'diamond'}) // Make a scatter chart
.data(cars) // Using the cars data (below)
.encode(
vl.y().fieldQ("Acceleration"), // For x, use the Horsepower field
vl.x().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.x().average("Miles_per_Gallon") // 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.
