This data visualisation represents the population numbers of the Netherlands in the years 1950, 1960, 1970, 1980, 1990, 2000, 2010, 2014 and 2015, as cleaned from cbs.nl.

The purpose of this data visualisation is to show the population differences of people younger than 20 years old over 6 decades in the Netherlands. The data has been sorted by year, but you can also view the data sorted by number of people, in which case you can see when the population was the highest.

The data has been cleaned from cbs.nl and the basic barchart was taken from the Bar Chart, created by Mike Bostock. The code has been altered by myself to look and work the way it does.

The following is a snippet from the cleaned data set:

1950JJ00,10026773,4998251,5028522,10026773,3742499,2951369,2562311,670995,99599,819,679,140,10026773,,,,,,,,,,,2535,245,2290,393,,309
1960JJ00,11417254,5686152,5731102,11417254,4331042,3098779,2968611,864423154399,882,714,168,11417254,,,,,,,,,,,3171,387,2784,356,,352

After cleaning, the dataset is formatted in the CSV format and displays the date (1950JJ00), the total population (10026773), the total population men (4998251), the total population women (5028522), the total population again, the total population of people younger than 20 years old (3742499), which I'm using, and a couple of other numbers related to the population which I won't be using.

The data 1950JJ00 translates to the year 1950. This is the case with all the years. All of the other data are the exact numbers.

The original data started with the following header:

SET            DECIMAL = DOT.
TITLE          "Bevolking; kerncijfers".
DATA LIST      RECORDS = 3
 /1            Key0         1 -    8 (A)
               Key1        10 -   17
               Key2        19 -   25
               Key3        27 -   33
               Key4        35 -   42
               Key5        44 -   50
               Key6        52 -   58
               Key7        60 -   66
               Key8        68 -   74
 /2            Key9         1 -    6
               Key10        8 -   11
               Key11       13 -   16
               Key12       18 -   21
               Key13       23 -   30
               Key14       32 -   39 (A)
               Key15       41 -   47 (A)
               Key16       49 -   52 (A)
               Key17       54 -   60 (A)
               Key18       62 -   68 (A)
               Key19       70 -   75 (A)
 /3            Key20        1 -    6 (A)
               Key21        8 -   13 (A)
               Key22       15 -   20 (A)
               Key23       22 -   27 (A)
               Key24       29 -   32
               Key25       34 -   37
               Key26       39 -   42
               Key27       44 -   47
               Key28       49 -   51 (A)
               Key29       53 -   55.

BEGIN DATA

Step 1:

After loading in the data, this was the first section that had to be removed from the dataset. I used the following code to remove this:

var header = doc.indexOf('BEGIN DATA');
var end = doc.indexOf('\n', header);
doc = doc.slice(end).trim();

Step 2:

The dataset also featured a footer section that had to be removed. This section came after the line END DATA. so I could remove this almost exactly the way I removed the header:

var footer = doc.indexOf('END DATA.');
doc = doc.substring(0, footer).trim();

Step 3:

After removing the header and footer I had to take care of all the unnecessary whitespace, periods and enters within the data. I did this by writing the following code:

doc = doc.replace(/ \n/g, '')
doc = doc.replace(/ +/g, ',');
doc = doc.replace(/\./g, '');

Step 4:

Lastly, the data needed to be formatted into the CSV format. I did this by writing the following code: var data = d3.csvParseRows(doc, map);

and the following function map:

function map(d) {
  return {
    year: Number(d[0].slice(0, 4)),
    populationTotal: Number(d[1]),
    population: Number(d[5])
  }
}

Now, the dataset has been cleaned.

You can interact with this bar chart by sorting the given data either by year (default, unchecked) or by population (checked). There is also a tooltip showing the exact numbers when you hover over a bar.

• d3.text d3.text('data.txt')
• d3.max y.domain([0, d3.max(data, population)]);
• d3.timeout var timeout = d3.timeout(change, 2000);
• d3.transition var transition = svg.transition();
• d3.ascending return d3.ascending(year(a), year(b));
• d3.scaleBand var x = d3.scaleBand().padding(0.2);
• scaleLinear var yFocus = d3.scaleLinear().range([heightFocus, 0]);

• Sorting the chart by year
• Sorting the chart by population
• Tooltip showing the exact population

Original Chart created by: Mike Bostock. GNU General Public License, version 3.

Tooltip created by: Sami Rubenfeld.

Dataset taken from: CBS.

© Max de Vries