{
const regionSelection = vl.selectPoint('Filter')
.fields('Region')
.init({Region: 'Europe'})
.bind({Region: vl.menu(regions)});
const axisOptions = [
{value: 'Population_Millions', label: 'Population (Millions)'},
{value: 'OBS_VALUE', label: 'GHG Emissions'}
];
const hoverSelection = vl.selectPoint();
return vl.markCircle({point: true, tooltip: true})
.title('Environmental and Economic Indicators by Country')
.data(data)
.transform(
vl.filter(regionSelection)
)
.params(
regionSelection,
hoverSelection,
vl.selectInterval().bind('scales')
)
.encode(
vl.x().fieldQ('Population_Millions').title('Population (Millions)'),
vl.y().fieldQ('OBS_VALUE').title('GHG Emissions'),
vl.size().fieldQ('GDP_Billions_USD').title('GDP (Billions USD)').scale({range: [50, 500]}),
vl.color().fieldN('Country').title('Country'),
vl.opacity().if(hoverSelection, vl.value(0.9)).value(0.3),
vl.tooltip([
vl.fieldN('Country'),
vl.fieldQ('OBS_VALUE'),
vl.fieldQ('Population_Millions'),
vl.fieldQ('GDP_Billions_USD'),
vl.fieldN('Region')
])
)
.width(700)
.height(500)
.render();
}
data = FileAttachment("data.csv").csv({typed: true})
regions = [...new Set(data.map(d => d.Region))].filter(Boolean).sort()
import {vl} from "@vega/vega-lite-api-v5"
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.
