Public
Edited
May 8, 2023
Insert cell
Insert cell
data = (await require('vega-datasets@2'))
Insert cell
barley = data['barley.json']()
Insert cell
viewof table = Inputs.table(barley)
Insert cell
import {vegalite} from "@jonfroehlich/vega-lite-utilities"
Insert cell
vegalite({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/barley.json"},
"title": "Barley Yield comparison between 1932 and 1931",
"transform": [
{"pivot": "year", "value": "yield", "groupby": ["variety", "site"]},
{"fold": ["1931", "1932"], "as": ["year", "yield"]},
{"calculate": "toNumber(datum.year)", "as": "year"},
{"calculate": "datum['1932'] - datum['1931']", "as": "delta"}
],
"mark": "trail",
"encoding": {
"x": {"field": "year", "title": null},
"y": {"field": "variety", "title": "Variety"},
"size": {
"field": "yield",
"type": "quantitative",
"scale": {"range": [0, 12]},
"legend": {"values": [20, 60]},
"title": "Barley Yield (bushels/acre)"
},
"tooltip": [{"field": "year", "type": "quantitative"}, {"field": "yield"}],
"color": {
"field": "delta",
"type": "quantitative",
"scale": {"domainMid": 0},
"title": "Yield Delta (%)"
},
"column": {"field": "site", "title": "Site"}
},
"view": {"stroke": null},
"config": {"legend": {"orient": "bottom", "direction": "horizontal"}}
})
Insert cell

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.
Learn more