population = d3.json("https://vega.github.io/vega-lite/examples/data/population.json")
barley = d3.json("https://vega.github.io/vega-lite/examples/data/barley.json")
cars = d3.json("https://vega.github.io/vega-lite/examples/data/cars.json")
stocks = d3.csv("https://vega.github.io/vega-lite/examples/data/stocks.csv")
viewof view_bar = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "A trellis bar chart showing the US population distribution of age groups and gender in 2000.",
"data": { "values": population},
"transform": [
{"filter": "datum.year == 2000"},
{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"}
],
"width": {"step": 17},
"mark": {type: "bar", tooltip: true},
"encoding": {
"column": {"field": "gender"},
"y": {
"aggregate": "sum", "field": "people",
"title": "population"
},
"x": {"field": "age"},
"color": {
"field": "gender",
"scale": {"range": ["#675193", "#ca8861"]}
}
}
})
vl.markBar({tooltip: true})
.data(population)
.transform(
vl.filter('datum.year == 2000'),
vl.calculate('datum.sex == 2 ? "Female" : "Male"').as('gender')
)
.width({step: 17})
.height(200)
.encode(
vl.column().fieldN('gender'),
vl.y().fieldQ('people').aggregate('sum').title('population'),
vl.x().fieldO('age'),
vl.color().fieldN('gender').scale({range: ['#675193', '#ca8861']}),
)
.render()
viewof view_stacked = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": barley},
"mark": {type: "bar", tooltip: true},
"encoding": {
"column": {"field": "year"},
"x": {"field": "yield", "type": "quantitative", "aggregate": "sum"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
})
vl.markBar({tooltip: true})
.data(barley)
.encode(
vl.column().fieldO('year'),
vl.x().fieldQ('yield').aggregate('sum'),
vl.y().fieldN('variety'),
vl.color().fieldN('site')
)
.width(200)
.render()
viewof view_histo = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": cars},
"mark": {type: "bar", tooltip: true},
"encoding": {
"x": {
"bin": {"maxbins": 15},
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"column": {"field": "Origin"}
}
})
vl.markBar({tooltip: true})
.data(cars)
.encode(
vl.x().fieldQ('Horsepower').bin({maxbins: 15}),
vl.y().count(),
vl.column().fieldN('Origin')
)
.height(200).width(200)
.render()
viewof view_area = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "Stock prices of four large companies as a small multiples of area charts.",
"transform": [{"filter": "datum.symbol !== 'GOOG'"}],
"width": 300,
"height": 40,
"data": {"values": stocks},
"mark": {type: "area", tooltip: true},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "Time",
"axis": {"grid": false}
},
"y": {
"field": "price",
"type": "quantitative",
"title": "Price",
"axis": {"grid": false}
},
"color": {
"field": "symbol",
"type": "nominal",
"legend": null
},
"row": {
"field": "symbol",
"type": "nominal",
"title": "Symbol"
}
}
})
vl.markArea({tooltip: true})
.transform(vl.filter('datum.symbol !== "GOOG"'))
.width(300).height(40)
.data(stocks)
.encode(
vl.x().fieldT('date').title('Time').axis({grid: false}),
vl.y().fieldQ('price').title('Price').axis({grid: false}),
vl.color().fieldN('symbol').legend(null),
vl.row().fieldN('symbol').title('Symbol')
)
.render()
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.
