To visualize the difference between the marital status of men and women we can create a population pyramid. The population pyramid is a popular chart to show the distribution of a population by age and sex.
In this example, we will use data from the CBS. The CBS is the Dutch national statistical office. We took the data from https://opendata.cbs.nl/statline/#/CBS/nl/dataset/7461BEV/table and re-arranged the data to make it easier to use. The result can be downloaded here.
Import the data
- Open the DataPicta app
- Click the button next to Data for uploading data.
- Select the population-pyramid.tsv file you downloaded earlier.
- Name this dataset Population pyramid and click parse.
The data should now be visible in a table format. This dataset contains 840 records, evenly split between men and women. If you browse through the table, you will notice that the records for men contain negative population values. While negative values for population are not possible, they are used here as a visualization technique to create the population pyramid. The X-axis of the chart will display positive values on both the left and right sides of zero. Although this approach is mathematically unconventional, it effectively highlights the differences between the two groups—in this case, men and women.
Create the chart
- Click the button next to Mark to add the first mark.
- Select the Area mark.
- In the new panel choose Area X for the type, meaning that the area will be drawn on the X-axis.
- Select the Population pyramid dataset.
- On the x-axis, we want the Population field.
- On the y-axis, we want the Age field.
- On the categorical channel (z-axis), we want the Category field.
- And on the fill-color channel, we want the MaritalStatus field.
The categorical channel determines the stacking order of the areas and the fill-color channel determines the color of the areas.
Change the axes
Change the x-axis
As you can see the left side (men) has negative values for population. Lets change the x-axis to show positive values. We will add a simple formula for this.
- Click on the icon next to scales
- Pick the x-axis scale
Please note the Ticks Format, this is where you can change the format of the ticks. We use a formula to change the negative values to positive values.
- Type: return Math.abs(datum)
This formula is executed for each tick on the x-axis. The datum variable contains the value of the tick. We use the Math.abs function to get the absolute value of the tick, which is the positive value of the tick. All values on the x-axis show positive values now. Please note that we only changed the ticks, not the data.
We will also change the label to be more descriptive.
- Click on the Common tab
- Change the Label to ← men · population 2024 · women →.
- Change the Label anchor to Center.
Change the y-axis
For the y-axis we just want to add grid lines.
- Click on the icon next to scales
- Pick the y-axis scale
- Click Show grid
Highlight the axes lines
We will give the axes lines a darker color to make them more visible. To do that we will draw lines on top of the current axes lines. We will use the Rule mark type for this.
- Click the button next to Mark
- Select the Rule mark.
On the x-axis we usally select on of the data fields, but in this case we only want to draw a line at x = 0. Again we will use a formula for this.
- On the x-axis type: return 0, a line appears at x = 0.
- Click the Style tab and change the stroke color to a dark grey color.
Now do the same for the y-axis. We want to draw a line at y = 0.
- Click the icon next to scales
- Select the Rule scale
- Change the type to Rule Y
- On the y-axis type: return 0, a line appears at y = 0.
- Click the Style tab and change the stroke color to the same dark grey color.
Colors and legend
Now what do the different colors mean? We can add a legend to show the meaning of the colors.
- Click the button next to scales
- Select the Color scale
- Click Legend
You might want to change the colors too
- Click palette icon next to the color scale
- Select the Accent palette
Add emojis to indicate the male and female part of the chart
Did you know that modern browsers can display a lot of emojis by default? No need to use images. You can search for emojis on emojipedia. The emojis we will use are ♂️ and ♀️, you can just copy and paste them as normal text. To show the emojis we will use the Text mark, but before we do that we will create a new dataset that will be used to position the emojis in the coordinate system.
- Click the button next to Data
- Enter the following data in the table
text,age,population
♂️,90,-100000
♀️,90,100000
- Name this dataset Emojis and click parse.
Now lets add the emojis to the chart.
- Click the button next to Mark
- Select the Text mark
- Select the Emojis dataset
- On the x-axis we want the Population field
- On the y-axis we want the Age field
- On the text channel we want the Text field
- Click the Style tab
- Change the font size to 40 pixels
- Change the fill opacity to 80 percent
You did it! You created a population pyramid showing the distribution of marital status by age group.