import {vl} from '@vega/vega-lite-api-v5'
{
const click = vl.selectPoint().encodings('color');
const populationProvinces = vl.markLine({'point': true})
.data(allData)
.transform(
vl.filter('datum["CHARACTERISTIC"] == "Population - % change"')
)
.params(click)
.encode(
vl.x().fieldN("YEAR(S)").axis({ labelAngle: -45 }),
vl.y().fieldQ("TOTAL").title("Population - % change"),
vl.color().fieldN("GEOGRAPHY NAME").scale({range: provinceColors}).title('Province'),
vl.opacity().if(click, vl.value(1)).value(0.1),
vl.tooltip([
{field: 'GEOGRAPHY NAME', title: 'Province'},
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'}
])
)
.width(700)
// .autosize('fit-x')
const officialLanguages = vl.markBar()
.data(allData)
.transform(
vl.filter('datum["TOPIC"] == "Knowledge of official languages"'),
vl.filter('datum["TYPE"] != "Total"'),
vl.filter(click)
// vl.filter('datum["GEOGRAPHY NAME"] == "Quebec"'),
// vl.window({op: 'sum', field: 'TOTAL', as: 'totalSum'}),
// vl.calculate('datum.TOTAL/datum.totalSum * 100').as('percentOfTotal')
)
.encode(
vl.y().fieldQ("TOTAL").stack('normalize').title("Knowledge of official languages"),
vl.color().fieldN("TYPE").scale({range: officialColors}).title('Official Language Type'),
vl.tooltip([
{field: 'GEOGRAPHY NAME', title: 'Province'},
{field: 'TYPE', title: 'Type'},
{field: 'TOTAL', title: 'Number of speakers'},
// {field: 'percentOfTotal', title: 'Percent', format: '.2f'}
])
)
const knownLanguages = vl.markBar()
.data(languageCategories)
.transform(
vl.filter('datum["TOPIC"] == "Mother tongue"'),
vl.filter('datum["TYPE"] != "Total"'),
vl.filter(click)
)
.encode(
vl.y().fieldQ("TOTAL").stack('normalize').title("Knowledge of non-official languages"),
vl.color().fieldN("TYPE").scale({range: languageColors}).title('Non-official Language Category'),
vl.tooltip([
{field: 'GEOGRAPHY NAME'},
{field: 'TYPE'},
{field: 'TOTAL'}
])
)
const languageDistribution = vl.markBar()
.data(languageNoOverall)
.transform(
//figure out way to show only top 10
// vl.aggregate({op: "sum", field: 'TOTAL', as: 'totals_sum'}).groupby('TYPE'),
// vl.filter('datum.totals_sum >= ' + languagesSlider),
vl.filter('datum.TOTAL >= ' + languagesSlider),
vl.filter(click)
)
.encode(
vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }),
vl.y().fieldQ('TOTAL'),
// vl.color().fieldN('TYPE').scale({domain: nonlanguageGroups, range: languageColors}),
vl.tooltip([
{field: 'GEOGRAPHY NAME'},
{field: 'TYPE'},
{field: 'TOTAL'}
])
)
// return officialLanguages.render()
return vl.vconcat(
populationProvinces,
vl.hconcat(
officialLanguages,
vl.hconcat(knownLanguages, languageDistribution).resolve({scale: {"color": "independent"}})
).resolve({scale: {"color": "independent"}})
).resolve({scale: {"color": "independent"}})
.render()
}
VegaLite = require('vega-embed@5')
// import {vl} from '@vega/vega-lite-api'
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.
