Henry Lau

Digital Science Communicator

Running a population model in the browser

02 Aug 2019

Over a year ago, I started work on a project looking at our ageing population and specifically one measure called the Old Age Dependency Ratio (OADR). This measure compares the number of people who are above the retirement age to people of working age (16 to retirement age).

Although this measure has its limitations because people are delaying joining the workforce because of education and working past their retirement age, it is still useful when comparing internationally and still gives an indication of the financial implications of our population when considering pensions and health care for example.

We wanted to explain a bit more about what factors were involved in how this OADR ratio changed in the future and some variables have more of an effect than others.

We wanted an easier way for people to understand demography and modelling population in the future without having to understand all the technical details and calculations.

We also want to dispel the misconception people may have had about migration and the magnitude of the effect it would have on the population.

Finally, we wanted to use an interface that brought elements of gamification to engage people.

At the end of June, this project was finally published - How would you support our ageing population.

The Excel beginning

My starting point was an excel model that colleagues in the office had built that use the National Population Projection variants. This excel sheet calculated the population given some numbers about fertility, migration and mortality.

By using different variations you could see what your choices did to the population. This spreadsheet did give you a lot of combinations to play about with and there was a custom option where you could enter your own numbers but you had to enter something for every age and every year. And the results it gave was a table of the population at each age over each year. This isn’t really something that’s intuitive, easy to interpret or could run in straight in the browser.

Building it for the browser

Once I got my head round the calculations in the excel sheet (using a lot of Trace dependents). I had to then think about what people would change, and trying to get this down to one input for each variable. I decided to fix a target amount 25 years down the line for the three inputs (mortality, migration and fertility), with some linear interpolation along the way. I scaled the single year of age numbers by an amount to match the interpolated target for each year. I did this in Excel and showed this to the business area for them to approve my thinking.

Mortality was the difficult one. There are cohort effects which travelling through age groups. Also using something like life expectancy at birth, while familiar to people, is not sensitive to changes at the higher ages. And it’s these higher ages where we are interested in. In the end we settled on displaying the life expectancies associated with 5 mortality variants and the slider snaps to these values.

Once they were happy with the process, I recreated the calculations in the browser. In Excel, it’s hard to see the order of things as it just appears to run all at once, but in JavaScript it’s much more linear. Turns out demography is actually quite simple, just doing a lot of adding and subtracting for people migrating in or being born and dying. And looping over the years into the future.

The interface

We wanted a simple way to interact with the controls and I found d3-simple-slider, a library for making sliders. Initially we had 4 sliders going horizontally but this took up quite a lot of space so we went for 4 vertical ones which looked like a mixing desk.

Sketch of design

The sliders took a bit of extra styling and messing around with the library so it’s ended up quite customised but I’m pleased with the result. For mobile, we show one horizontal slider at a time and store the results in hidden inputs.

We used tooltips to add in extra information where something might have been misinterpreted.

Displaying the results

The population models reruns every time you change any of the sliders or inputs and updates the results you see on the page. Keeping the results in view was important so you could see your changes happening in front of your eyes.

Other examples we’d seen include an FT example where you had to decide how you’d spend the BBC licensing fees between the stations and channels.

We also wanted to give feedback about what people’s choices were in respect to today’s numbers and what it would mean for them. This is done in a couple of ways, there’s the text box that spells out what the numbers are but also lines on the sliders to indicate 2017 levels.

Technical achievements

It’s the first d3.v5 project we’ve done in the team. I decided to do this because v5 uses promises so you have more control when code block executes. This avoided doing calculations without the numbers from the previous step.

I’ve learnt a lot more about how to use bootstrap-grid properly. Bluebird.js to compatibility promises for IE. Tippy.js for tooltips.

What people did

We used Google Tag Manager to find out how people were using the tool and what they were inputting.

We looked at the OADR in 2042 people were getting from their chosen inputs. The biggest peak is from loading the interactive and people making small changes. The periodic jumps are from people changing the pension year. What’s interesting to note is the secondary peak around 300. This is because people are trying to match the 2016 level of OADR. We put feedback into the results box and it’s clear this element of gamification is helping.

We can also see that people like round numbers as well as the ends of the scales. Here’s what users selected for migration with peaks on the hundred thousands.

And here’s fertility. The peak around 1.75 is when the model loads. There’s big peak around the round numbers (1,2,3) and the ends of the scales.

Feedback

We are still collecting feedback about the tool but here two choice picks that show that we are meeting the aims of the project.

During the project, we found out there was another project looking at an alternative measure to the OADR. We decided to align the projects and this took a bit of extra time and effort and changed the way the article turned out as we referenced each other. We also felt it diminished the impact we could have had with the media.

Overall, I’m happy with how the project turned out. People are using the tool and taking the messages away that we wanted them to leave with. Now with a working population model that projects into the future we can use it for more projects. If you’ve got any good ideas, let me know.

Related Posts