data = (await require('vega-datasets'))['gapminder.json']()
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data_2000 = data.filter((d) => d.year === 2000)
data_2000c1 = data_2000.filter((d) => d.cluster === 1)
data_US = data.filter((d) => d.country == "United States")
five_countries = new Set([
"United States",
"France",
"Austria",
"Brazil",
"Germany"
])
data_5countries = data.filter((d) => five_countries.has(d.country))
embed = require("vega-embed@6")
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: "point",
encoding: {
x: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
y: {field: "life_expect", type: "quantitative", scale: {zero: true}, title: "Life Expectancy"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point", tooltip: true},
encoding: {
x: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
y: {field: "life_expect", type: "quantitative", scale: {zero: true}, title: "Life Expectancy"},
color: {field: "cluster", type: "nominal", title: "Cluster"},
size: {field: "pop", type: "quantitative", title: "Pop"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point", color: "blue", tooltip: true},
encoding: {
x: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
y: {field: "life_expect", type: "quantitative", scale: {zero: true}, title: "Life Expectancy"},
size: {field: "pop", type: "quantitative", title: "Pop"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point", tooltip: true},
encoding: {
x: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
y: {field: "life_expect", type: "quantitative", scale: {zero: true}, title: "Life Expectancy"},
shape: {field: "cluster", type: "nominal", title: "Cluster"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 250,
data: {values: data_US},
mark: "line",
encoding: {
x: {field: "year", type: "ordinal", title: "Year"},
y: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 250,
data: {values: data_5countries},
mark: "line",
encoding: {
x: {field: "year", type: "ordinal", title: "Year"},
y: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
color: {field: "country", type: "nominal", title: "Country"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 250,
data: {values: data_5countries},
mark: "area",
encoding: {
x: {field: "year", type: "ordinal", title: "Year"},
y: {field: "fertility", type: "quantitative", scale: {zero: true}, title: "Fertility"},
color: {field: "country", type: "nominal", title: "Country"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000c1},
mark: "bar",
encoding: {
x: {field: "country", type: "nominal", title: "Country"},
y: {field: "pop", type: "quantitative", scale: {zero: true}, title: "Pop"},
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 400,
width: 400,
data: {values: data_2000c1},
mark: "bar",
encoding: {
y: {field: "country", type: "nominal", title: "Country"},
x: {field: "pop", type: "quantitative", scale: {zero: true}, title: "Pop"},
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 400,
width: 400,
data: {values: data_2000c1},
mark: "bar",
encoding: {
y: {field: "country", type: "nominal", title: "Country", sort: "-x"},
x: {field: "pop", type: "quantitative", scale: {zero: true}, title: "Pop"},
}
})
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.
