vegalite({
width: 750,
height: 600,
padding: {
left: 50,
top: 25,
right: 50,
bottom: 0
},
data: {
values: df
},
transform: [
{
filter: {
selection: "slider"
}
}
],
layer: [
{
mark: {
type: "text",
fontSize: 180,
fontWeight: "bold",
color: "#d9d9d9"
},
encoding: {
text: {
field: "year",
type: "nominal",
aggregate: "min"
}
}
},
{
transform: [
{
filter: {
selection: "rule"
}
}
],
mark: {
type: "rule",
strokeDash: [2, 2]
},
encoding: {
x: {
field: "gdpPerCap",
type: "quantitative",
scale: {
type: "log",
base: 2
}
},
y: {
field: "lifeExp",
type: "quantitative",
scale: {
domain: [40, 90]
}
}
}
},
{
transform: [
{
filter: {
selection: "rule"
}
}
],
mark: {
type: "rule",
strokeDash: [2, 2]
},
encoding: {
x2: {
value: 0
},
x: {
field: "gdpPerCap",
type: "quantitative",
scale: {
type: "log",
base: 2
}
},
y: {
field: "lifeExp",
type: "quantitative",
scale: {
domain: [40, 90]
}
}
}
},
{
selection: {
slider: {
type: "single",
fields: ["year"],
init: {
year: 2009
},
bind: {
year: {
input: "range",
name: "select year ",
min: 2009,
max: 2017,
step: 1
}
}
},
country: {
type: "single",
fields: ["continent"],
on: "mouseover",
bind: "legend"
},
rule: {
type: "single",
fields: ["country"],
on: "mouseover",
empty: "none"
}
},
mark: "circle",
encoding: {
x: {
title: "GDP per Capita, $",
field: "gdpPerCap",
type: "quantitative",
scale: {
type: "log",
base: 2
},
axis: {
format: ".1s"
}
},
y: {
title: "Life Expectancy, Years",
field: "lifeExp",
type: "quantitative",
scale: {
domain: [40, 90]
},
axis: {
tickCount: 10
}
},
size: {
title: "Population",
field: "pop",
type: "quantitative",
scale: {
range: [10, 3500]
},
legend: {
orient: "right",
clipHeight: 15,
format: ".1s",
values: [1000000, 10000000, 100000000, 500000000, 1000000000],
padding: 5,
symbolFillColor: "#d9d9d9",
symbolStrokeColor: "#d9d9d9"
}
},
color: {
title: "Continent",
field: "continent",
type: "nominal",
scale: {
range: ["#00d5e9", "#7feb00", "#ff5872", "#ffe700"]
},
legend: {
orient: "right",
padding: 5
}
},
opacity: {
condition: {
selection: "country",
value: 0.85
},
value: 0.3
},
tooltip: [
{
field: "country",
title: "Country",
type: "nominal"
},
{
field: "gdpPerCap",
title: "GDP per capita, $",
type: "quantitative",
format: ".3s"
},
{
field: "lifeExp",
title: "Life expectancy",
type: "quantitative",
format: ".3r"
},
{
field: "pop",
title: "Population",
type: "quantitative",
format: ".2s"
}
]
}
}
],
config: {
font: "Ubuntu Mono",
view: {
stroke: null
},
axis: {
domain: false,
ticks: false,
labelPadding: 10,
titleFontSize: 14,
labelFontSize: 14,
titleAnchor: "end",
titlePadding: -40,
titleColor: "#81858C",
labelColor: "#81858C",
gridDash: [2, 2],
gridWidth: 2
},
legend: {
titleFontSize: 14,
titleColor: "#81858C",
labelFontSize: 14
}
}
})
html`
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet">
<style>
canvas {
margin: auto;
}
label {
padding-left: 75px;
padding-bottom: 50px;
color: #81858C;
}
.vega-bind {
font-family: "Ubuntu Mono"
}
input[type="range"] {
width: 600px;
line-height: 3.5;
}
</style>
`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
vegalite = require("@observablehq/vega-lite")
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.
