Public
Edited
May 7, 2024
import {vl} from "@vega/vega-lite-api-v5";
import {uniqueValid} from "@uwdata/data-utilities";
data = FileAttachment("us-est00int-02-2-5.csv").csv({typed: true});
Year = uniqueValid(data, d => d.Year)
{
const selectYear = vl.selectPoint('Select')
.fields('Year')
.init({Year: Year[0]})
.bind(vl.menu(Year).name('Year Selector'));
const scatterPlot = vl.markCircle({size: 100, opacity: 0.8})
.data(data)
.params(selectYear)
.encode(
vl.x().fieldN('Category').title('Age Group').sort({field: 'Age', order: 'ascending'}).axis({labelAngle: 300}),
vl.y().fieldQ('Pop').title('Population'),
vl.color().fieldQ('Age').scale({scheme: 'viridis', reverse: true}),
vl.shape().if(selectYear, vl.value('circle')).value('square'),
vl.tooltip([vl.fieldQ('Pop'), vl.fieldN('Category')]),
vl.opacity().if(selectYear, vl.value(0.9)).value(0.1)
)
.width(1000)
.height(800)
.autosize({type: 'fit', contains: 'padding'})
.config({axis: {labelFontSize: 14, titleFontSize: 16}});
return scatterPlot.render();
}
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.
