Widget Tricks - Age Pyramid with Vega-Lite

Create an age pyramid to present the repartition of the population in your area, with Vega-Lite.

Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation.

ods-vega-lite-chart widget, in combinaison with ods-adv-analysis to get the data, allows adding Vega-Lite charts into your pages.

To learn more about Vega-Lite charts in ODS pages, read the Vega-Lite presentation.

We consider the usage of ods-adv-analysis as prerequisites of this resource. Do not hesitate to have a look at the documention: ods-adv-analysis

Example with the city of Issy-les-Moulineaux, France

You first have to setup your ods-adv-analysis by entering the right fields names for the select and group-by parameters.

Then, the ods-vega-lite-chart is divided in 2 parts, one for each side (Male/Female usually). For each side, you have to fill in:

  • the filter: the gender informations (field and title)
  • the y axis: the age field
  • the x axis: the population informations (field and title)

You can also customize the color for both sides in the color property:

'color': 
    ...
    'scale': {
        'range': ['#006699','#ff5050'],
    ...
    },
    ...