data = (await require('vega-datasets'))['gapminder.json']()
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))
data_2000_5countries = data_5countries.filter((d) => d.year === 2000)
import { vl } from "@vega/vega-lite-api-v5"
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: {type: "point"},
encoding: {
x: {field: "fertility", type: "quantitative"},
y: {field: "life_expect", type: "quantitative"},
color: {field: "cluster", type: "nominal"},
size: {field: "pop", type: "quantitative"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal"},
size: {field: "pop", type: "quantitative"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {
grid: false,
tickSize: 20,
tickWidth: 5,
labelAngle: 45,
labelColor: "blue",
labelFontSize: 20}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal"},
size: {field: "pop", type: "quantitative"}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal", scale: {scheme: "set1"}},
size: {field: "pop", type: "quantitative"}
}})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal", scale: {scheme: "set1"}},
size: {field: "pop", type: "quantitative"}
}})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "point", filled: true},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal", scale: {scheme: "set1"}},
size: {field: "pop", type: "quantitative"}
}})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle", stroke: "black"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal", scale: {scheme: "set1"}},
size: {field: "pop", type: "quantitative"}
}})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle", stroke: "black", strokeWidth: 3},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal", scale: {scheme: "set1", fillOpacity: 0.5}},
size: {field: "pop", type: "quantitative"}
}})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}},
color: {field: "cluster", type: "nominal"},
size: {field: "pop", type: "quantitative", scale: {range: [0, 1200]}}
}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}, title: "Fertility (children per woman)"},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}, title: "Life Expectancy (years)"},
color: {field: "cluster", type: "nominal", title: "Cluster"},
size: {field: "pop", type: "quantitative", scale: {range: [0, 1200]}, title: "Pop"}
},
title: {text: "Countries with higher fertility tend to have lower life expectancy"}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 400,
data: {values: data_2000},
mark: {type: "circle"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}, title: "Fertility (children per woman)"},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}, title: "Life Expectancy (years)"},
color: {field: "cluster", type: "nominal", title: "Cluster"},
size: {field: "pop", type: "quantitative", scale: {range: [0, 1200]}, title: "Pop"}
},
title: {text: "Countries with higher fertility tend to have lower life expectancy",
subtitle: "source: gapminder.json"}
})
embed(
{
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
height: 300,
width: 600,
data: {values: data_2000},
mark: {type: "circle"},
encoding: {
x: {field: "fertility", type: "quantitative", axis: {grid: false}, title: "Fertility (children per woman)"},
y: {field: "life_expect", type: "quantitative", axis: {grid: false}, title: "Life Expectancy (years)"},
color: {field: "cluster", type: "nominal", title: "Cluster"},
size: {field: "pop", type: "quantitative", scale: {range: [0, 1200]}, title: "Pop"}
},
title: {text: "Countries with higher fertility tend to have lower life expectancy",
subtitle: "source: gapminder.json"}
})
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.
