2b:null 2c:["$","title",null,{"children":"Canada's Language Diversity | Micole | Observable"}] 31:T508,## Analytic Scope Canada is renowned for its multicultural society, which has created a diverse language landscape. Our project seeks to investigate how language is distributed across Canada and how immigration patterns impact the country's linguistic diversity. Specifically, we aim to explore the impact of immigration on a region's cultural characteristics, and identify the factors that influence language distribution, including immigration, education, and community culture. To achieve these goals, we use language data from the 2011 Canada-wide Census to 2021 Canada Census. By analyzing this data, we hope to gain insights into the demographic characteristics of different regions, including the number and origin of immigrants, the distribution of different languages, and other relevant variables. We will use a variety of analytical methods to explore the data, including statistical analysis and geospatial mapping. Our aim is to create interactive visualizations that enable users to explore the data and identify common cultural communities at both the provincial and municipal levels. Ultimately, we hope our project will provide a comprehensive understanding of the complex relationship between immigration, language distribution, and cultural characteristics in Canada.32:Td19,{ const brush = vl.selectInterval().encodings('x').resolve('intersect'); const click = vl.selectPoint().encodings('color'); const detailChart2011 = vl.markSquare() .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["YEAR"] == "2011" ') ) .encode( vl.x().fieldN('GEOGRAPHYNAME').title("2011"), vl.y().fieldQ("TOTAL").title('Percentage of non-official language'), vl.color().fieldN('CHARACTERISTIC'), vl.size().fieldQ('TOTAL'), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).height(300) .width(100) const detailChart2016 = vl.markSquare() .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["YEAR"] == "2016" ') ) .encode( vl.x().fieldN('GEOGRAPHYNAME').title("2016"), vl.y().fieldQ("TOTAL").title('Percentage of non-official language'), vl.color().fieldN('CHARACTERISTIC'), vl.size().fieldQ('TOTAL'), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).height(300) .width(100) const detailChart2021 = vl.markSquare() .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["YEAR"] == "2021" ') ) .encode( vl.x().fieldN('GEOGRAPHYNAME').title("2021"), vl.y().fieldQ("TOTAL").title('Percentage of non-official language'), vl.color().fieldN('CHARACTERISTIC'), vl.size().fieldQ('TOTAL'), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).height(300) .width(100) const BCclickChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" ')) .params(click) .encode( vl.y().fieldQ('TOTAL').title(null), vl.x().fieldN('YEAR').title("British Columbia"), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) .height(150) const ONclickChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" ')) .params(click) .encode( vl.y().fieldQ('TOTAL').title(null), vl.x().fieldN('YEAR').title("Ontario"), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) .height(150) const QCclickChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" ')) .params(click) .encode( vl.y().fieldQ('TOTAL').title(null), vl.x().fieldN('YEAR').title("Quebec"), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) .height(150) return vl.vconcat(vl.hconcat(detailChart2011,detailChart2016,detailChart2021), vl.hconcat(BCclickChart, ONclickChart, QCclickChart )) .render() }33:T62b,This code generates a visualization of the percentage of the Canadian population that speaks a non-official language, broken down by geographic region and language characteristic. The visualization consists of two parts: a set of three square mark charts, each showing the percentage of non-official language speakers for a given year (2011, 2016, and 2021); and a set of three line charts, each showing how the percentage of non-official language speakers in three Canadian provinces (British Columbia, Ontario, and Quebec) has changed over time. For the square mark charts (detailChart2011, detailChart2016, detailChart2021) **Encoding**: - *GEOGRAPHYNAME* is the x-axis and represents nominal data. - *TOTAL* is the y-axis and represents quantitative data; it determines the size of the square. - *CHARACTERISTIC* represents different non-official languages and is nominal data; it determines the color of the squares. For the line charts (BCclickChart, ONclickChart, QCclickChart) **Encoding**: - *YEAR* represents the year and is nominal data (since only 2011, 2016, and 2021 are available); it is displayed on the x-axis. - *TOTAL* represents quantitative data and is displayed on the y-axis. - *CHARACTERISTIC* is represented by points that explain the total for each characteristic, and lines that show the increase or decrease of the total between years. When a user clicks on a point in any of the clickCharts, the corresponding detailChart displays the total for the specific language, allowing the user to compare between British Columbia, Ontario, and Quebec.34:T997,{ const brush = vl.selectInterval().encodings('x').resolve('intersect'); const click = vl.selectPoint().encodings('color'); const BCclickChart2011 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" '), vl.filter('datum["YEAR"] == "2011" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2011'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const BCclickChart2016 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" '), vl.filter('datum["YEAR"] == "2016" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2016'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const BCclickChart2021 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" '), vl.filter('datum["YEAR"] == "2021" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2021'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const BCbrushTimeChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["GEOGRAPHYNAME"] == "British Columbia" ') ) .params(brush) .encode( vl.y().fieldQ('TOTAL').title('British Columbia'), vl.x().fieldN('YEAR').title(null), vl.color().fieldN("CHARACTERISTIC"), vl.size().field('TOTAL').aggregate("mean"), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ) .width(600) .height(300) return vl.vconcat(BCbrushTimeChart, vl.hconcat(BCclickChart2011,BCclickChart2016,BCclickChart2021)) .render() }35:T96a,{ const brush = vl.selectInterval().encodings('x').resolve('intersect'); const click = vl.selectPoint().encodings('color'); const ONclickChart2011 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" '), vl.filter('datum["YEAR"] == "2011" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2011'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const ONclickChart2016 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" '), vl.filter('datum["YEAR"] == "2016" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2016'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const ONclickChart2021 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" '), vl.filter('datum["YEAR"] == "2021" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2021'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const ONbrushTimeChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["GEOGRAPHYNAME"] == "Ontario" ') ) .params(brush) .encode( vl.y().fieldQ('TOTAL').title('Ontario'), vl.x().fieldN('YEAR').title(null), vl.color().fieldN("CHARACTERISTIC"), vl.size().field('TOTAL').aggregate("mean"), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ) .width(600) .height(300) return vl.vconcat(ONbrushTimeChart, vl.hconcat(ONclickChart2011,ONclickChart2016,ONclickChart2021)) .render() }36:T965,{ const brush = vl.selectInterval().encodings('x').resolve('intersect'); const click = vl.selectPoint().encodings('color'); const QCclickChart2011 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" '), vl.filter('datum["YEAR"] == "2011" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2011'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const QCclickChart2016 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" '), vl.filter('datum["YEAR"] == "2016" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2016'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const QCclickChart2021 = vl.markBar() .data(MotherTongue) .transform( vl.filter(brush), vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" '), vl.filter('datum["YEAR"] == "2021" ')) .params(click) .encode( vl.y().fieldN('CHARACTERISTIC').title(null), vl.x().fieldQ('TOTAL').title('2021'), vl.color().value('lightgray').if(click, vl.color().fieldN('CHARACTERISTIC')), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ).width(200) const QCbrushTimeChart = vl.markLine({'point': true}) .data(MotherTongue) .transform( vl.filter(click), vl.filter('datum["GEOGRAPHYNAME"] == "Quebec" ') ) .params(brush) .encode( vl.y().fieldQ('TOTAL').title('Quebec'), vl.x().fieldN('YEAR').title(null), vl.color().fieldN("CHARACTERISTIC"), vl.size().field('TOTAL').aggregate("mean"), vl.tooltip([ {field: 'CHARACTERISTIC'}, {field: 'TOTAL'}, {field: 'GEOGRAPHYNAME'} ]) ) .width(600) .height(300) return vl.vconcat(QCbrushTimeChart, vl.hconcat(QCclickChart2011,QCclickChart2016,QCclickChart2021)) .render() }37:T4ba,The detail charts for British Columbia, Ontario, and Quebec each have the same format of code. Therefore, the explanation will be provided once. While the graphs above were for comparison between regions, the graphs below provide a more detailed look at language by region. Through the first brushTimeChart, users can see changes in language over time. The three bar graphs below show the total number of languages spoken in each region over time. The brushTimeChart includes a brush that allows users to compare data for specific years. If a user selects only the data for 2011 in the line graph use brush drag, for example, only the bar graphs for 2011 will appear below. If data for 2011 and 2016 are selected in line graph, only the bar graphs for those two years will appear. The bar graphs below are clickable, allowing users to select specific languages and view their data and changes over time. BrushTimeChart **Encoding**: - *TOTAL*: quantitative data, y-axis (size of point) - *CHARACTERISTIC*: nominal data, color - *YEAR*: nominal data, x-axis clickChart2011, clickChart2016, clickChart2021 **Encoding**: - *CHARACTERISTIC*: nominal data, y-axis, color - *TOTAL*: quantitative data, x-axis38:T685,viewof canadaMap = { let height = 400; let container = DOM.element('div', {style: `width:${width}px;height:${height}px`}); yield container; let map = L.map(container, { maxZoom: 10, minZoom: 3 }); let baseLayer = L.tileLayer(cartoDark,{ attribution: cartoAttr, opacity: 1 }) .addTo(map); //click to show population change -> link to line graph //change line graph to relate to ethnic groups? //invisible top layer -> clicks //bottom and mid layers -> colors // let minVisibility = L.geoJson(provinceJson, { // style, // fillOpacity: 0.25 // }).addTo(map) let provinceLayer = L.geoJson(provinceJson, { style, onEachFeature: areaClick }) .bindTooltip(function(d) { return d.feature.properties.prov_name_en + '
Pop change (%): ' + d.feature.properties.pop_perc + '
Pop (thousands): ' + d.feature.properties.pop_thou }) .addTo(map); var legend = L.control({position: 'bottomright'}); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], labels = ['-2 - -1', '-1 - 0', '1 - 0', '0 - 1', '1 - 2', '2 - 3', '3 - 4', '4 - 5', '5 - 6', '6 - 7', '7 - 8', '8 - 9', '9 - 10', '10+']; for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); map.on("mousedown", () => (mutable nSel = null)); map.fitBounds(provinceLayer.getBounds()); }39:T15c2,{ const click = vl.selectPoint().encodings('color').on("click").bind("legend").toggle(true); const popCount = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population (in thousands)"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(click) .encode( vl.x().fieldN("YEAR(S)").axis({ labelAngle: -45 }), vl.y().fieldQ("TOTAL").title("Population (in thousands)"), vl.color().fieldN("GEOGRAPHY NAME").scale({domain: provinceCategories, range: provinceColors}).title('Province'), vl.opacity().if(click, vl.value(1)).value(0.075), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Total (in thousands)'} ]) ) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) .width(0.4*width) const popChange = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population - % change"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .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.075), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Population % change'} ]) ) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) .width(0.4*width) 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({field: 'GEOGRAPHY NAME', oneOf: mapSel}) // 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.x().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'}, // {field: 'percentOfTotal', title: 'Percent', format: '.2f'} ]) ) .width(0.4*width) // .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) const knownLanguages = vl.markBar() .data(languageCategories) .transform( vl.filter('datum["TOPIC"] == "Mother tongue"'), vl.filter('datum["TYPE"] != "Total"'), vl.filter(click), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldQ("TOTAL").stack('normalize').title("Knowledge of non-official languages"), vl.color().fieldN("TYPE").scale({range: languageColors}).title('Non-official Language Category').legend({gridAlign: 'all'}), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) .width(0.4*width) // .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) const languageDistribution = vl.markBar() .data(languageNoOverall) .transform( vl.filter('datum.TOTAL >= ' + languagesSlider), vl.filter(click), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }).title("Language"), vl.y().fieldQ('TOTAL').title("Number of speakers"), vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}).legend(null), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) const ethnicity = vl.markBar() .data(provinceEthnicities) .transform( vl.filter('datum.TOTAL >= ' + ethnicitySlider), vl.filter(click), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }), vl.y().fieldQ('TOTAL').title("Ethnicity population count"), vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}).legend(null), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) // return popCount.render() return vl.vconcat( vl.hconcat(popCount, popChange).spacing(32), vl.vconcat( vl.hconcat(officialLanguages, knownLanguages).spacing(32).resolve({scale: {"color": "independent"}}).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}}), vl.vconcat(languageDistribution, ethnicity) ).resolve({scale: {"color": "independent"}}).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}})//, legend: {orient: "right", layout: {right: {anchor: 'middle'}}}}) ).resolve({scale: {"color": "independent"}}).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}}) .render() }3a:T129a,This visualization aims to find overall language patterns across the Canadian provinces. Unless otherwise stated, data represents 2021 census data. Through the Leaflet map, users can click on a province to focus the corresponding population and language charts on that province. To remove this selection, users click somewhere on the map outside of a province. A color lightness scale is used to indicate the province's percent change in population.
- This can be used to gain further insight into current vs past population patterns. The population line charts give an overview of the population counts across the years (left chart), and the population % change over the years (right chart). When the map is clicked, both of these charts will focus on the specified province and the scale of the chart will also adapt to fit the range of the province's data. On the other hand, when a point in the line chart or a province in the legend is clicked, both of the charts will filter to focus on that province while maintaining the other province lines at reduced opacity.
- This allows users to compare multiple provinces by shift clicking multiple features. Additionally, selecting provinces will filter the corresponding language charts. The language charts display various language data from the census, including official language knowledge (left chart), non-official language knowledge (middle chart), and a breakdown of specific languages (right chart).
The official language chart is a normalized stacked bar chart that shows approximately what percentage of people speak one, both, or none of Canada's official languages.
The non-official language knowledge chart shows a relative percentage of the different languages (not including English/French), defined by their broad language family, and is also a normalized stacked bar chart.
The specific language chart shows all of the languages spoken, regardless of their language family. It is a stacked bar chart where each bar represents a language and a province (which is encoded to color). Furthermore, languages can be filtered by how many speakers there are using a slider below the chart.
- These can be used to see language patterns within a province. The ethnicity bar chart functions similarly to the specific language chart. It is also filtered through clicking on the map or clicking on a line in the population charts.
- This chart can be used in conjunction with the specific language chart to see correlations between ethnicity populations and non-official languages spoken. All together, we can begin to explore the data to find answers to our questions. For example, if we select BC and Quebec in the population line charts and show languages with over 55,000 speakers, we can see that Mandarin and Spanish both have more than 55,000 speakers in both provinces. At the same time, BC also has Punjabi, Cantonese, Tagalog, and Korean, whereas Quebec has Arabic and Italian. Additionally, looking at the ethnicity population count, we can see that a large majority of Quebec residents are of Canadian and French backgrounds, whereas a larger proportion of BC residents come from English and Scottish backgrounds. Ethnic population counts can also be filtered through a slider.
- We can begin to use this to find correlations with the ethnic backgrounds of the residents in these provinces.
Map Visualization
**Encoding**: - ***Pop % change***: quantitative data, color - ***Pop count (thousands)***: quantitative data, tooltip - ***GeoJSON***: geometry displayed on map - ***GEOGRAPHIC NAME***: nominal data, tooltip
Population Line Charts
**Encoding**: - ***YEAR(S)***: temporal data, x-axis - *(CHARACTERISTIC) **Population % change***: quantitative data, y-axis, or - *(CHARACTERISTIC) **Population in thousands***: quantitative data, y-axis - ***GEOGRAPHIC NAME***: nominal data, color
Language Bar Charts
**Encoding**: - *(Official/non-official lang. charts) **TOTAL***: quantitative data, x-axis area, tooltip - *(Specific lang.) **TOTAL***: quantitative data, y-axis area, tooltip - *(Specific lang.) **Number of speakers***: nominal data, x-axis, tooltip - *TYPE*: discrete color schemes, tooltips - - *(Official lang. chart) **Official language type***: nominal data, color (saturated scheme) - - *(Non-official lang. chart) **Non-official language category***: nominal data, color (desaturated scheme) - - *(Specific lang.) **GEOGRAPHIC NAME***: nominal data, color (vega-lite category10)
Ethnicity Bar Chart
**Encoding**: - *(TOTAL) **Population count***: quantitative data, y-axis area - *(TYPE) **Language***: nominal data, x-axis - ***GEOGRAPHIC NAME***: nominal data, color (vega-lite category10)3b:T95c,These reference from a4 - a4 (https://observablehq.com/d/89773c99db885067) Most code reference from IAT355 Tutorials Solution 1. (https://observablehq.com/@iat355/03s-features?collection=@iat355/iat-355-tutorials-solution) 2. (https://observablehq.com/@iat355/04s-vis?collection=@iat355/iat-355-tutorials-solution) 3. (https://observablehq.com/@iat355/05s-views?collection=@iat355/iat-355-tutorials-solution) vega-lite-api reference: - (https://vega.github.io/vega-lite-api/api/) vega tern reference: - (https://vega.github.io/vega-lite/docs/predicate.html#field-predicate) Extra study in this link. I did not copy and paste from here but checked examples for my assignment so I put this reference: - (https://observablehq.com/@uwdata/introduction-to-vega-lite) - (https://observablehq.com/@vega/vega-lite-api-v5) Filter using datum[]=="" reference: - (https://talk.observablehq.com/t/how-to-filter-in-vega-lite/3190) - create array reference:(https://observablehq.com/@mbostock/creating-arrays) - https://talk.observablehq.com/t/embedding-vega-lite-charts-that-have-width-value-set-to-container-leads-to-null-width-until-window-is-resized/6120/4 - https://leafletjs.com/reference.html#interactive-layer - https://nominatim.openstreetmap.org/ui/search.html - https://nominatim.openstreetmap.org/ui/search.html?q=british+columbia - https://data.opendatasoft.com/explore/dataset/georef-canada-province%40public/export/?disjunctive.prov_name_en&refine.prov_name_en=Alberta&refine.prov_name_en=British+Columbia&refine.prov_name_en=Manitoba&refine.prov_name_en=New+Brunswick&refine.prov_name_en=Newfoundland+and+Labrador&refine.prov_name_en=Nova+Scotia&refine.prov_name_en=Ontario&refine.prov_name_en=Prince+Edward+Island&refine.prov_name_en=Quebec&refine.prov_name_en=Saskatchewan&refine.year=2021 - https://observablehq.com/@saneef/geojson-from-openstreetmap - https://vega.github.io/vega/docs/scales/ - https://observablehq.com/@manzt/calculate-percent-of-total-in-vega-lite - https://talk.observablehq.com/t/vega-lite-axis-and-tooltip-values-how-to-format-number/6029/2 - https://observablehq.com/@dlaliberte/vega-top-level-width-height-padding-autosize-options - https://www12.statcan.gc.ca/census-recensement/2021/dp-pd/prof/index.cfm?Lang=E - https://www12.statcan.gc.ca/census-recensement/2016/dp-pd/prof/index.cfm?Lang=E - https://vega.github.io/vega-tooltip/vega-lite-examples.html3c:T170b,nonlanguageGroups = [ ["Algonquian languages", "Blackfoot", "Cree-Innu languages", "Atikamekw", "Cree languages", "Ililimowin (Moose Cree)", "Inu Ayimun (Southern East Cree)", "Iyiyiw-Ayimiwin (Northern East Cree)", "Nehinawewin (Swampy Cree)", "Nehiyawewin (Plains Cree)", "Nihithawiwin (Woods Cree)", "Cree, n.o.s.", "Innu (Montagnais)", "Naskapi", "Eastern Algonquian languages", "Mi'kmaq", "Wolastoqewi (Malecite)", "Ojibway-Potawatomi languages", "Anicinabemowin (Algonquin)", "Oji-Cree", "Ojibway languages", "Anishinaabemowin (Chippewa)", "Daawaamwin (Odawa)", "Saulteau (Western Ojibway)", "Ojibway, n.o.s.", "Algonquian languages, n.i.e.", "Athabaskan languages", "Northern Athabaskan languages", "Dakelh (Carrier)", "Dane-zaa (Beaver)", "Dene, n.o.s.", "Gwich'in", "Slavey-Hare languages", "Deh Gah Ghotie Zhatie (South Slavey)", "Satuotine Yati (North Slavey)", "Slavey, n.o.s.", "Tahltan languages", "Kaska (Nahani)", "Tahltan", "Tlicho (Dogrib)", "Tse'khene (Sekani)", "Tsilhqot'in (Chilcotin)", "Tsuu T'ina (Sarsi)", "Tutchone languages", "Northern Tutchone", "Southern Tutchone", "Tutchone, n.o.s.", "Wetsuwet'en-Babine", "Tlingit", "Athabaskan languages, n.i.e.", "Haida", "Inuktut (Inuit) languages", "Inuinnaqtun (Inuvialuktun)", "Inuinnaqtun", "Inuvialuktun", "Inuktitut", "Inuktut (Inuit) languages, n.i.e.", "Iroquoian languages", "Cayuga", "Mohawk", "Oneida", "Iroquoian languages, n.i.e.", "Ktunaxa (Kutenai)", "Michif", "Salish languages", "Halkomelem", "Lillooet", "Ntlakapamux (Thompson)", "Secwepemctsin (Shuswap)", "Squamish", "Straits", "Syilx (Okanagan)", "Salish languages, n.i.e.", "Siouan languages", "Assiniboine", "Dakota", "Stoney", "Siouan languages, n.i.e.", "Tsimshian languages", "Gitxsan (Gitksan)", "Nisga'a", "Tsimshian", "Wakashan languages", "Haisla", "Heiltsuk", "Kwak'wala (Kwakiutl)", "Nuu-chah-nulth (Nootka)", "Wakashan languages, n.i.e.", "Indigenous languages, n.i.e.", "Indigenous languages, n.o.s."], ["Afro-Asiatic languages", "Berber languages", "Kabyle", "Tamazight", "Berber languages, n.i.e.", "Chadic languages", "Hausa", "Mina", "Coptic", "Cushitic languages", "Bilen", "Oromo", "Somali", "Cushitic languages, n.i.e.", "Semitic languages", "Amharic", "Arabic", "Aramaic languages", "Assyrian Neo-Aramaic", "Chaldean Neo-Aramaic", "Aramaic, n.o.s.", "Harari", "Hebrew", "Maltese", "Tigrigna", "Semitic languages, n.i.e."], ["Austro-Asiatic languages", "Khmer (Cambodian)", "Vietnamese", "Austro-Asiatic languages, n.i.e"], ["Austronesian languages", "Bikol", "Bisaya, n.o.s.", "Cebuano", "Fijian", "Hiligaynon", "Ilocano", "Indonesian", "Kankanaey", "Kinaray-a", "Malagasy languages", "Merina", "Malagasy, n.o.s.", "Malay", "Pampangan (Kapampangan, Pampango)", "Pangasinan", "Tagalog (Pilipino, Filipino)", "Waray-Waray", "Austronesian languages, n.i.e."], ["Creole languages", "Haitian Creole", "Jamaican English Creole", "Krio", "Morisyen", "Sango", "Creole, n.o.s.", "Creole languages, n.i.e."], ["Dravidian languages", "Kannada", "Malayalam", "Tamil", "Telugu", "Tulu", "Dravidian languages, n.i.e."], "Georgian", "Hmong-Mien languages", ["Indo-European languages", "Albanian", "Armenian", "Balto-Slavic languages", "Baltic languages", "Latvian", "Lithuanian", "Slavic languages", "Belarusian", "Bulgarian", "Czech", "Macedonian", "Polish", "Russian", "Rusyn", "Serbo-Croatian", "Bosnian", "Croatian", "Serbian", "Serbo-Croatian, n.i.e.", "Slovak", "Slovene (Slovenian)", "Ukrainian", "Slavic languages, n.i.e.", "Celtic languages", "Irish", "Scottish Gaelic", "Welsh", "Celtic languages, n.i.e.", "Germanic languages", "Frisian", "High German languages", "German", "Pennsylvania German", "Swiss German", "Yiddish", "Low Saxon-Low Franconian languages", "Afrikaans", "Dutch", "Low German, n.o.s.", "Low Saxon", "Plautdietsch", "Vlaams (Flemish)", "Scandinavian languages", "Danish", "Icelandic", "Norwegian", "Swedish", "Germanic languages, n.i.e.", "Greek", "Indo-Iranian languages", "Indo-Aryan languages", "Assamese", "Bengali", "Gujarati", "Hindi", "Kacchi", "Kashmiri", "Konkani", "Marathi", "Nepali", "Oriya languages", "Odia", "Oriya, n.o.s.", "Punjabi (Panjabi)", "Rohingya", "Sindhi", "Sinhala (Sinhalese)", "Urdu", "Indo-Aryan languages, n.i.e.", "Iranian languages", "Baluchi", "Kurdish", "Parsi", "Pashto", "Persian languages", "Dari", "Iranian Persian", "Persian (Farsi), n.o.s.", "Iranian languages, n.i.e.", "Indo-Iranian languages, n.i.e.", "Italic (Romance) languages", "Catalan", "Italian", "Portuguese", "Romanian", "Spanish", "Italic (Romance) languages, n.i.e.", "Indo-European languages, n.i.e."], "Japanese", "Korean", "Mongolian", ["Niger-Congo languages", "Akan (Twi)", "Bamanankan", "Edo", "Éwé", "Fulah (Pular, Pulaar, Fulfulde)", "Ga", "Ganda", "Gikuyu", "Igbo", "Kinyarwanda (Rwanda)", "Lingala", "Luba-Kasai", "Mòoré", "Mwani", "Ndebele", "Rundi (Kirundi)", "Shona", "Soninke", "Sotho-Tswana languages", "Swahili", "Wojenaka", "Wolof", "Yoruba", "Niger-Congo languages, n.i.e."], ["Nilo-Saharan languages", "Dinka", "Nuer", "Nilo-Saharan languages, n.i.e.", "African, n.o.s."], ["Sign languages", "American Sign Language", "Quebec Sign Language", "Sign languages, n.i.e."], ["Sino-Tibetan languages", "Chinese languages", "Hakka", "Mandarin", "Min Dong", "Min Nan (Chaochow, Teochow, Fukien, Taiwanese)", "Wu (Shanghainese)", "Yue (Cantonese)", "Chinese, n.o.s.", "Chinese languages, n.i.e.", "Tibeto-Burman languages", "Burmese", "Kuki-Chin languages", "Karenic languages", "S'gaw Karen", "Karenic languages, n.i.e.", "Tibetan", "Tibeto-Burman languages, n.i.e.", "Sino-Tibetan languages, n.i.e."], ["Tai-Kadai languages", "Lao", "Thai", "Tai-Kadai languages, n.i.e."], ["Turkic languages", "Azerbaijani", "Kazakh", "Turkish", "Uyghur", "Uzbek", "Turkic languages, n.i.e."], ["Uralic languages", "Estonian", "Finnish", "Hungarian"], "Other languages, n.i.e." ]3d:T7b0,viewof populationLines = { const popCount = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population (in thousands)"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(globalClick) .encode( vl.x().fieldN("YEAR(S)").axis({ labelAngle: -45 }), vl.y().fieldQ("TOTAL").title("Population (in thousands)"), vl.color().fieldN("GEOGRAPHY NAME").scale({domain: provinceCategories, range: provinceColors}).title('Province'), vl.opacity().if(globalClick, vl.value(1)).value(0.1), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Total (in thousands)'} ]) ) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) .width(0.4*width) const popChange = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population - % change"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(globalClick) .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(globalClick, vl.value(1)).value(0.1), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Population % change'} ]) ) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) .width(0.4*width) return vl.hconcat(popCount, popChange).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}}).render(); }3e:T7fc,viewof languageBars = { const officialLanguages = vl.markBar() .data(allData) .transform( vl.filter('datum["TOPIC"] == "Knowledge of official languages"'), vl.filter('datum["TYPE"] != "Total"'), vl.filter(Object.getPrototypeOf(globalClick).data), // vl.filter({field: 'GEOGRAPHY NAME', equal: globalClick.encodings.toString()}), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) // 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.x().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'} ]) ) .width(0.4*width) // .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) const knownLanguages = vl.markBar() .data(languageCategories) .transform( vl.filter('datum["TOPIC"] == "Mother tongue"'), vl.filter('datum["TYPE"] != "Total"'), vl.filter(globalClick.data), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldQ("TOTAL").stack('normalize').title("Knowledge of non-official languages"), vl.color().fieldN("TYPE").scale({range: languageColors}).title('Non-official Language Category').legend({gridAlign: 'all'}), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) .width(0.4*width) return vl.hconcat(officialLanguages, knownLanguages).resolve({scale: {"color": "independent"}}).config({legend: {orient: 'bottom', columns: 4, layout: {bottom: {anchor: 'middle'}}}}).render(); }3f:T8f9,{ const officialLanguages = vl.markBar() .data(allData) .transform( vl.filter('datum["TOPIC"] == "Knowledge of official languages"'), vl.filter('datum["TYPE"] != "Total"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) // vl.filter(popClick) // 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.x().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'} ]) ).width(350) const knownLanguages = vl.markBar() .data(languageCategories) .transform( vl.filter('datum["TOPIC"] == "Mother tongue"'), vl.filter('datum["TYPE"] != "Total"'), // vl.filter(popClick) ) .encode( vl.x().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'} ]) ).width(350) const languageDistribution = vl.markBar() .params( vl.param('Speakers').value(20000).bind(vl.slider(1, 200000, 10)), vl.param('Lang').value('datum[TYPE]'), vl.param('Group1').value(nonlanguageGroups[0]), ) .data(languageNoOverall) .transform( // vl.filter('datum.TOTAL >= Number'), // vl.filter(click) vl.filter('datum.TOTAL >= ' + languagesSlider), ) .encode( vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }), vl.y().fieldQ('TOTAL'), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) return vl.vconcat(vl.hconcat(officialLanguages, knownLanguages).resolve({scale: {"color": "independent"}}), languageDistribution).render(); }40:T72b,{ // const width = DOM.element('div', {container}); const popClick = vl.selectPoint().encodings('color').on("click").bind("legend").toggle(true); const popCount = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population (in thousands)"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(popClick) .encode( vl.x().fieldN("YEAR(S)").axis({ labelAngle: -45 }), vl.y().fieldQ("TOTAL").title("Population (in thousands)"), vl.color().fieldN("GEOGRAPHY NAME").scale({domain: provinceCategories, range: provinceColors}).title('Province'), vl.opacity().if(popClick, vl.value(1)).value(0.1), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Total (in thousands)'} ]) ) .width(0.35*width) const popChange = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population - % change"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(popClick) .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(popClick, vl.value(1)).value(0.1), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Population % change'} ]) ) .width(0.4*width) return vl.hconcat(popCount, popChange).render() }41:T107b,{ const click = vl.selectPoint().encodings('color').on("click").bind("legend").toggle(true); const popCount = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population (in thousands)"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .params(click) .encode( vl.x().fieldN("YEAR(S)").axis({ labelAngle: -45 }), vl.y().fieldQ("TOTAL").title("Population (in thousands)"), vl.color().fieldN("GEOGRAPHY NAME").scale({domain: provinceCategories, range: provinceColors}).title('Province'), vl.opacity().if(click, vl.value(1)).value(0.1), vl.tooltip([ {field: 'GEOGRAPHY NAME', title: 'Province'}, {field: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Total (in thousands)'} ]) ) .width(0.35*width) const popChange = vl.markLine({'point': true}) .data(allData) .transform( vl.filter('datum["CHARACTERISTIC"] == "Population - % change"'), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .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: 'YEAR(S)', title: 'Year'}, // {field: 'CHARACTERISTIC'}, {field: 'TOTAL', title: 'Population % change'} ]) ) .width(0.4*width) 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({field: 'GEOGRAPHY NAME', oneOf: mapSel}) // 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), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .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').legend({gridAlign: 'all'}), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) const languageDistribution = vl.markBar() .data(languageNoOverall) .transform( vl.filter('datum.TOTAL >= ' + languagesSlider), vl.filter(click), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }).title("Language"), vl.y().fieldQ('TOTAL').title("Number of speakers"), vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}).legend(null), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) return vl.vconcat( vl.hconcat(popCount, popChange), vl.hconcat( officialLanguages, vl.hconcat(knownLanguages, languageDistribution).resolve({scale: {"color": "independent"}}) ).resolve({scale: {"color": "independent"}}) ).resolve({scale: {"color": "independent"}}) .render() }42:T7d9,{ 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({field: 'GEOGRAPHY NAME', oneOf: mapSel}) // 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.x().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'} ]) ) .width(0.25*width) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) const knownLanguages = vl.markBar() .data(languageCategories) .transform( vl.filter('datum["TOPIC"] == "Mother tongue"'), vl.filter('datum["TYPE"] != "Total"'), // vl.filter(click), vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel}) ) .encode( vl.x().fieldQ("TOTAL").stack('normalize').title("Knowledge of non-official languages"), vl.color().fieldN("TYPE").scale({range: languageColors}).title('Non-official Language Category').legend({gridAlign: 'all'}), vl.tooltip([ {field: 'GEOGRAPHY NAME'}, {field: 'TYPE'}, {field: 'TOTAL'} ]) ) .width(0.3*width) .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}}) return vl.vconcat(officialLanguages, knownLanguages).resolve({scale: {"color": "independent"}}).config({legend: {orient: 'bottom', columns: 3, layout: {bottom: {anchor: 'middle'}}}}).render() // return officialLanguages.render() }43:[{"id":"a3e9ce6ae3e9fa6e012af47af21ae7b1acea03b4a6ff8d0f38468edba3d5ae51b4dc973c27e6f9bee9c804583c4c8af2ae85644e56e5ac6aef185af62ffd22a2","href":"https://static.observableusercontent.com/files/a3e9ce6ae3e9fa6e012af47af21ae7b1acea03b4a6ff8d0f38468edba3d5ae51b4dc973c27e6f9bee9c804583c4c8af2ae85644e56e5ac6aef185af62ffd22a2","name":"NonOfficialMotherTongue-2.csv","type":"text/csv","lastModified":1680580591360.341,"size":3120},{"id":"072f39ec4f0d1f76e828f79070bb6d37f57bc1a85992d5b2ae5782d7b927d60fa249837bec517e2ed8352bd02a35656647fe1776cdecf132fba3536a57fc05bc","href":"https://static.observableusercontent.com/files/072f39ec4f0d1f76e828f79070bb6d37f57bc1a85992d5b2ae5782d7b927d60fa249837bec517e2ed8352bd02a35656647fe1776cdecf132fba3536a57fc05bc","name":"provincialGeoData.geojson","type":"application/geo+json","lastModified":1680580867179.528,"size":275067}] 2f:{"id":"08ef7bafe9691de5","slug":null,"title":"Canada's Language Diversity","thumbnail":"3deed75a65f167913554215784a95b122029f0c55d90f635905bdb1080fcd728","access_level":"public","create_time":"$D2023-04-04T03:52:16.166Z","update_time":"$D2023-04-05T07:12:30.710Z","view_time":null,"first_public_time":"$D2023-04-04T03:52:16.166Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c82cd4ee74fcb22f","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":"starter_2024"},"version":824,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4dd9c05b2974e20b","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":null}],"members":[{"type":"individual","id":"4dd9c05b2974e20b","login":"wstl","name":"Micole","avatar_url":"https://avatars-next.observableusercontent.com/d7629f2847ab0acb13a5cc5a3509ac2605148fb251714ce070c6dff2946548b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Canada's Language Diversity","cells":[{"id":0,"value":"# Canada's Language Diversity\n#### IAT 355 - Introduction to Visual Analytics\n#### SFU Spring 2023\n#### Assignment 5\n- Sooa Mo - 301448491\n- Micole Lai - 301424117","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"## Non-official language across British Columbia, Ontario, and Quebec\n#### by Sooa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"## British Columbia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"## Ontario","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"## Quebec","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"## Population affects on language and ethnicity\n#### by Micole","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"

${viewof languagesSlider}

${viewof ethnicitySlider}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"### References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"### Datasets and Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"Only the necessary data were selected and grouped in 2011, 2016, and 2021 census data. In particular, data from BC, ON, and QC states are collected and are references to the figures in that data:\n\nCombined\n\n- 2011 (https://www12.statcan.gc.ca/census-recensement/2011/dp-pd/vc-rv/index.cfm?Lang=ENG&VIEW=D&GEOCODE=935&TOPIC_ID=4)\n- 2016 (https://www12.statcan.gc.ca/census-recensement/2016/dp-pd/dv-vd/lang/index-eng.cfm#chrt-dt-tbl)\n- 2021 (https://www12.statcan.gc.ca/census-recensement/2021/dp-pd/dv-vd/language-langue/index-en.html)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"allData = \nd3.csv(\"https://gist.githubusercontent.com/mwstl/db5a8bf79a2f8519c80f381e312e82b3/raw/c9ab3d225d9d71582a35aef069d83d18c934d45c/all_Fix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"provinceTotals = allData.filter(function(d) {\n if (d.CHARACTERISTIC == 'Population (in thousands)' || d.CHARACTERISTIC == 'Population - % change') {\n return d;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"provinceCategories = [\"British Columbia\", \"Alberta\", \"Manitoba\", \"New Brunswick\", \"Newfoundland and Labrador\", \"Nova Scotia\", \"Ontario\", \"Prince Edward Island\", \"Quebec\", \"Saskatchewan\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"provinceColors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#778899']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"officialColors = ['DarkOrchid', 'DodgerBlue', 'FireBrick', 'Gold']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"languageCategories = allData.filter(function(d) {\n let selection = [\" Indigenous languages\", \" Afro-Asiatic languages\", \" Austro-Asiatic languages\", \" Austronesian languages\", \" Creole languages\", \" Dravidian languages\", \" Hmong-Mien languages\", \" Indo-European languages\", \" Celtic languages\", \" Germanic languages\", \" Scandinavian languages\", \" Indo-Iranian languages\", \" Italic (Romance) languages\", \" Niger-Congo languages\", \" Nilo-Saharan languages\", \" Sign languages\", \" Sino-Tibetan languages\", \" Tai-Kadai languages\", \" Turkic languages\", \" Uralic languages\"];\n \n if (d.TOPIC == \"Mother tongue\") {\n return selection.includes(d.TYPE); \n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"languageBroadCategories = [\"Indigenous languages\", \"Afro-Asiatic languages\", \"Austro-Asiatic languages\", \"Austronesian languages\", \"Creole languages\", \"Dravidian languages\", \"Hmong-Mien languages\", \"Indo-European languages\", \"Celtic languages\", \"Germanic languages\", \"Scandinavian languages\", \"Indo-Iranian languages\", \"Italic (Romance) languages\", \"Niger-Congo languages\", \"Nilo-Saharan languages\", \"Sign languages\", \"Sino-Tibetan languages\", \"Tai-Kadai languages\", \"Turkic languages\", \"Uralic languages\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"provinceEthnicities = allData.filter(function(d) {\n if (d.TOPIC == 'Ethnic or cultural origin' && d.TOTAL > 100 && !d.TYPE.includes(\"Total\")) {\n return d;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"languageColors = ['#8dd3c7', '#f0e68c', '#bebada', '#fb8072', '#80b1d3', '#ff8c00', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f', '#add8e6', '#db7093', '#cd853f', '#4169e1', '#2e8b57', '#6a5acd', '#d8bfd8', '#d3d3d3']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"languageNoOverall = allData.filter(function(d){\n const substring = \"language\"\n if (d.TOPIC == \"Mother tongue\" && !d.TYPE.includes(substring) && d.TYPE != \"Total\" && !d.TYPE.includes(\"responses\") && !d.TYPE.includes(\"English\") && !d.TYPE.includes(\"French\") && d.TOTAL >= 1) {\n return d; \n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"MotherTongue = FileAttachment(\"NonOfficialMotherTongue-2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"years = uniqueValid(MotherTongue, d => d.YEAR)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"geography = uniqueValid(MotherTongue, d=>d.GEOGRAPHYNAME)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"d3 = require(\"https://d3js.org/d3.v5.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"VegaLite = require('vega-lite@2.0.0-beta.2/build/vega-lite.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"import {uniqueValid} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"### Map Functionality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"This is the CSS defining the legend\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"provinceJson = FileAttachment(\"provincialGeoData.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function populationChangeCol(d) {\n return d > 1.5 ? '#053061' :\n d > 1.25 ? '#2166ac' :\n d > 1.0 ? '#4393c3' :\n d > 0.75 ? '#92c5de' :\n d > 0.5 ? '#d1e5f0' :\n d > 0.25 ? '#f7f7f7' :\n d > 0 ? '#fddbc7' :\n d > -0.25 ? '#f4a582' :\n d > -0.5 ? '#d6604d' :\n d > -0.75 ? '#b2182b' :\n '#67001f';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"function style(feature) {\n return {\n fillColor: getPopChangeCol2(feature.properties.pop_perc),\n weight: 2,\n opacity: .5,\n color: 'white',\n fillOpacity: 1,\n // fillOpacity: feature.properties.prov_name_en[0] == nSel ? 1 : 0.75 ,\n onEachFeature: areaClick\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"whenClicked = (event) => {\n mutable nSel = event.target.feature.properties.prov_name_en[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"function areaClick(feature, layer) {\n layer.on({\n click:whenClicked\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"function getPopChangeCol(d) {\n return d > 10 ? '#1e65ff' :\n d > 9 ? '#4970ff' :\n d > 8 ? '#7886ff' :\n d > 7 ? '#a3a5ff' :\n d > 6 ? '#c1bfff' :\n d > 5 ? '#ceccff' :\n d > 4 ? '#dbd8ff' :\n d > 3 ? '#e5e3ff' :\n d > 2 ? '#eeedff' :\n d > 1 ? '#f7f6ff' :\n '#fefeff'; //11\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"function getPopChangeCol1(d) {\n return d > 10 ? '#e0420d' :\n d > 9 ? '#e55525' :\n d > 8 ? '#ec784e' :\n d > 7 ? '#f19f80' :\n d > 6 ? '#f1bca5' :\n d > 5 ? '#efc8b6' :\n d > 4 ? '#edd2c4' :\n d > 3 ? '#ebdbd1' :\n d > 2 ? '#e9e3dc' :\n d > 1 ? '#e6e9e5' :\n '#e4f0ee'; //11\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"function getPopChangeCol2(d) {\n return d > 10 ? '#0d74db' :\n d > 9 ? '#3c7fdd' :\n d > 8 ? '#6995e1' :\n d > 7 ? '#96b5e5' :\n d > 6 ? '#b4cee8' :\n d > 5 ? '#bfd8e9' :\n d > 4 ? '#c9e2ea' :\n d > 3 ? '#d2ebeb' :\n d > 2 ? '#dcf4ec' :\n d > 1 ? '#e6feed' :\n d > 0 ? '#f8fff7' :\n '#ffffff'; //11\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"cartoAttr = '© OpenStreetMap, © CARTO'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"cartoLight = \t'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"cartoDark = \t'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function styleSel(feature) {\n return {\n fillColor: getPopChangeCol2(feature.properties.pop_perc),\n weight: 2,\n opacity: .5,\n color: 'white',\n fillOpacity: 0.5,\n // fillOpacity: feature.properties.prov_name_en[0] == nSel ? 1 : 0.75 ,\n onEachFeature: areaClick\n };\n}\n//population change array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"function styleMin(feature) {\n return {\n // fillColor: getPopChangeCol2(feature.properties.pop_perc),\n fillColor: 'white',\n weight: 2,\n opacity: 1,\n color: 'white',\n fillOpacity: 1\n // fillOpacity: feature.properties.prov_name_en[0] == nSel ? 1 : 0.75 ,\n // onEachFeature: areaClick\n };\n}\n//population change array","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"function selFeature(feature) {\n return feature.properties.prov_name_en[0] == nSel ? 1 : 0.75\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"mutable nSel = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"mutable nSels = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"mapSel = {\n if (nSel == null) {\n return mapProvinces;\n } else {\n return [nSel];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"mapSels = {\n if (nSel == null) {\n mutable nSels.length = 0;\n return mapProvinces;\n } else {\n if (nSels.indexOf(nSel) == -1) \n mutable nSels.push(nSel);\n return nSels;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"mapProvinces = {\n let n = provinceJson.features.length;\n let newSel = [];\n for (let i = 0; i < n; i++) {\n newSel[i] = provinceJson.features[i].properties.prov_name_en[0];\n }\n return (newSel);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof languagesSlider = Inputs.range([1, 200000], {step: 1, label: \"Number of speakers\", value: 12500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"viewof ethnicitySlider = Inputs.range([1, 300000], {step: 1, label: \"Ethnic population\", value: 85000})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"

\n### Playground\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"

${viewof populationLines}

${viewof languageBars}

${viewof languageDistributionBars}

${viewof ethnicityBars}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":676,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"viewof ethnicityBars = {\n const ethnicity = vl.markBar()\n .data(provinceEthnicities)\n .transform(\n vl.filter('datum.TOTAL >= ' + ethnicitySlider),\n // vl.filter(click),\n vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel})\n )\n .encode(\n vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }),\n vl.y().fieldQ('TOTAL'),\n vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}).legend(null),\n vl.tooltip([\n {field: 'GEOGRAPHY NAME'},\n {field: 'TYPE'},\n {field: 'TOTAL'}\n ])\n )\n\n return ethnicity.render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"viewof languageDistributionBars = {\n const languageDistribution = vl.markBar()\n .data(languageNoOverall)\n .transform(\n vl.filter('datum.TOTAL >= ' + languagesSlider),\n // vl.filter(click),\n vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel})\n )\n .encode(\n vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }).title(\"Language\"),\n vl.y().fieldQ('TOTAL').title(\"Number of speakers\"),\n vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}).legend(null),\n vl.tooltip([\n {field: 'GEOGRAPHY NAME'},\n {field: 'TYPE'},\n {field: 'TOTAL'}\n ])\n )\n\n return languageDistribution.render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"globalClick = vl.selectPoint().encodings('color').on(\"click\").bind(\"legend\").toggle(true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// click = vl.selectPoint().encodings('color').on(\"click\").bind(\"legend\").toggle(true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"langCategoryCol('Mandarin')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function langCategoryCol(language) {\n let langIdx = null;\n let idx = 0;\n // let col = \"#192bc2\";\n // const cols = languageColors;\n \n for (; idx < languageBroadCategories.length; idx++) {\n //Check if language matches one of the categories\n if (nonlanguageGroups[idx].indexOf(language) !== -1) {\n langIdx = idx;\n return languageColors[idx]\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"{\n const ethnicity = vl.markBar()\n .data(provinceEthnicities)\n .transform(\n vl.filter('datum.TOTAL >= ' + ethnicitySlider),\n // vl.filter(click),\n vl.filter({field: 'GEOGRAPHY NAME', oneOf: mapSel})\n )\n .encode(\n vl.x().fieldN('TYPE').sort('-y').axis({ labelAngle: -45 }),\n vl.y().fieldQ('TOTAL'),\n vl.color().fieldN('GEOGRAPHY NAME').scale({domain: provinceCategories, range: provinceColors}),//.legend(null),\n vl.tooltip([\n {field: 'GEOGRAPHY NAME'},\n {field: 'TYPE'},\n {field: 'TOTAL'}\n ])\n )\n .config({legend: {orient: 'bottom', layout: {bottom: {anchor: 'middle'}}}})\n \n return ethnicity.render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W43","stdlib":"1","titling":"auto"}} 30:"$2f:body"