viewof scatter_json_view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'},
mark: 'point',
encoding: {
x: {field: 'Horsepower', type: 'quantitative'},
y: {field: 'Miles_per_Gallon', type: 'quantitative'}
}
})
viewof scatter_api_view = vl.markPoint()
.data('https://vega.github.io/vega-datasets/data/cars.json')
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon')
).render()
viewof bar_json_view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
mark: 'bar',
data: {url: "https://vega.github.io/vega-datasets/data/movies.json"},
encoding: {
x: {field: "IMDB Rating", type: "quantitative", bin: true},
y: {aggregate: "count", type: "quantitative"}
}
})
viewof bar_api_view = vl.markBar()
.data("https://vega.github.io/vega-datasets/data/movies.json")
.encode(
vl.x().fieldQ('IMDB Rating').bin(true),
vl.y().count()
).render()
viewof view_title = embed(
{
width: 500,
height: 300,
data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'},
mark:
{type: "circle", tooltip: true},
encoding: {
x: {"field": "Displacement", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)"},
y: {"field": "Miles_per_Gallon", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
color: {"field":"Origin", "title":"Country of Origin"}
},
"title": { "text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor":"start"
}
})
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data('https://vega.github.io/vega-datasets/data/cars.json')
.width(500).height(300)
.encode(
vl.x().fieldQ('Displacement').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('Miles_per_Gallon').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('Origin').title("Country of Origin")
)
.title({text: "Fuel efficiency generally decreases with engine size",
subtitle: "Two seaters (sports cars) are an exception because of their light weight",
anchor: "start"})
.render()
letters = [{"a":"A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b":43}]
label_bar_json = embed (
{
"width": 300,
"height": 100,
"data": {
"values": letters
},
"encoding": {
"y": {"field": "a", "type": "nominal", "title": "letter"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}, "title":"frequency"}
},
"layer": [{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3
},
"encoding": {
"text": {"field": "b", "type": "quantitative"}
}
}]
}
)
label_bar_api = {
const bar = vl.markBar();
const text = vl.markText({align: "left", baseline: "middle", dx: 3})
.encode(
vl.text().fieldQ('b')
)
return vl.layer(bar, text)
.width(300).height(100)
.data(letters)
.encode(
vl.y().fieldN('a').title("letter"),
vl.x().fieldQ('b').scale({padding: 10}).title("frequency")
)
.render()
}
layer_mean_json = embed(
{
"width": 400,
"height": 200,
"data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
"layer": [
{
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
},
{
"mark": "rule",
"encoding": {
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
},
"color": {"value": "red"},
"size": {"value": 3}
}
}
]
}
)
layer_mean_api = {
const bar = vl.markBar()
.encode(
vl.x().fieldO('date').timeUnit('month'),
vl.y().fieldQ('precipitation').aggregate('mean')
);
const rule = vl.markRule({size: 3, color: "red"})
.encode(
vl.y().fieldQ('precipitation').aggregate('mean')
)
return vl.layer(bar, rule)
.width(400).height(200)
.data('https://vega.github.io/vega-lite/examples/data/seattle-weather.csv')
.render()
}
layer_histo_json = embed(
{
"width": 300,
"height": 200,
"data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
"layer": [{
"mark": "bar",
"encoding": {
"x": {"field": "IMDB Rating", "bin": true},
"y": {"aggregate": "count"}
}
},{
"mark": "rule",
"encoding": {
"x": {"aggregate": "mean", "field": "IMDB Rating"},
"color": {"value": "red"},
"size": {"value": 5}
}
}]
}
)
mean_histo_api = {
const bar = vl.markBar()
.encode(
vl.x().fieldQ('IMDB Rating').bin(true),
vl.y().aggregate('count')
);
const rule = vl.markRule({size: 10, color: "red"})
.encode(
vl.x().fieldQ('IMDB Rating').aggregate('mean')
)
return vl.layer(bar, rule)
.width(300).height(200)
.data('https://vega.github.io/vega-lite/examples/data/movies.json')
.render()
}
import {vl} from '@vega/vega-lite-api-v5'
embed = require("vega-embed@6")
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.
