Public
Edited
Apr 16, 2023
viewof nonOfficialMotherLine = {
const brush = vl.selectInterval().encodings('x').resolve('intersect');
const click = vl.selectPoint().encodings('color');
const nonOfficialMotherBC = vl.markLine({'point': true})
.data(MotherTongue)
.transform(
vl.filter(click),
vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" ')
)
.params(brush)
.encode(
vl.y().fieldQ('TOTAL').title(null).scale({domain: [0, 380000]}),
vl.x().fieldN('YEAR').title("British Columbia"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors})),
vl.size().field('TOTAL').aggregate("mean"),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
const nonMotherChangeBC = vl.markBar({'point': true})
.data(MotherTongue)
.transform(
vl.filter(brush),
vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" ')
)
.params(click)
.encode(
vl.y().fieldN('GEOGRAPHYNAME').title(null),
vl.x().fieldQ('TOTAL').stack('normalize').title("Non-official Mother Tongue Percentage"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors}).legend({gridAlign: 'all'})),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
const nonOfficialMotherON = vl.markLine({'point': true})
.data(MotherTongue)
.transform(
vl.filter(click),
vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" ')
)
.params(brush)
.encode(
vl.y().fieldQ('TOTAL').title(null).scale({domain: [0, 380000]}),
vl.x().fieldN('YEAR').title("Ontario"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors})),
vl.size().field('TOTAL').aggregate("mean"),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
const nonMotherChangeON = vl.markBar({'point': true})
.data(MotherTongue)
.transform(
vl.filter(brush),
vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" ')
)
.params(click)
.encode(
vl.y().fieldN('GEOGRAPHYNAME').title(null),
vl.x().fieldQ('TOTAL').stack('normalize').title("Non-official Mother Tongue Percentage"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors}).legend({gridAlign: 'all'})),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
const nonOfficialMotherQC = vl.markLine({'point': true})
.data(MotherTongue)
.transform(
vl.filter(click),
vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" ')
)
.params(brush)
.encode(
vl.y().fieldQ('TOTAL').title(null).scale({domain: [0, 380000]}),
vl.x().fieldN('YEAR').title("Quebec"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors})),
vl.size().field('TOTAL').aggregate("mean"),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
const nonMotherChangeQC = vl.markBar({'point': true})
.data(MotherTongue)
.transform(
vl.filter(brush),
vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" ')
)
.params(click)
.encode(
vl.y().fieldN('GEOGRAPHYNAME').title(null),
vl.x().fieldQ('TOTAL').stack('normalize').title("Non-official Mother Tongue Percentage"),
vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC').scale({domain: topNonOffLanguage, range: topNonOffColors}).legend({gridAlign: 'all'})),
vl.tooltip([
{field: 'CHARACTERISTIC'},
{field: 'TOTAL'},
{field: 'YEAR'},
{field: 'GEOGRAPHYNAME'}
])
)
.width(.30*width)
return vl.hconcat(vl.vconcat(nonOfficialMotherBC, nonMotherChangeBC), vl.vconcat(nonOfficialMotherON, nonMotherChangeON), vl.vconcat(nonOfficialMotherQC, nonMotherChangeQC)).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}}).render();
}
viewof provinceShowType = radio({options:geography, value:"British Columbia"})
//https://observablehq.com/@adevlin/line-plots-with-radio-buttons
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.
