Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer.
import { vl } from "@vega/vega-lite-api"
vl
.markPoint({shape: 'diamond'}) // Make a scatter chart
.data(cars) // Using the cars data (below)
.encode(
vl.tooltip().fieldN("Origin"), // For tooltips, show the Name field
vl.y().fieldQ("Miles_per_Gallon"), // For y, use the Miles_per_Gallon field
vl.x().fieldQ("Horsepower"), // For x, use the Horsepower 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
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.
