In New Zealand we split our schools into 10 groups called Socio-economic Deciles that each represent 10% of schools ranked by the relative poverty of the students family. That is, Decile 1 contains 10% of our schools where the poorest students attend up to Decile 10 that contains 10% of our schools where the wealthiest students attend.

New Zealand uses this measure to target funding to more needy schools and try and ensure that compulsory education is equal for all students, some of which may not be as privileged as others.

What I want to know is:

  • How effective is the decile strategy at equalling out education outcomes in New Zealand?
  • What are the differences of education outcomes between the 10 deciles?

I have tried to answer these questions by taking a dataset of how well students perform in different deciles and different subjects and created a small visualisation exploring their differences.

The Visualisation

I recently read an article on the New Zealand Herald website about the differences between internal and external examinations from NCEA (New Zealand’s school qualification system).

This article has a visualisation that explores this topic, and provides the means to compare the results.

After looking around a bit, I realised that it is using an accessible dataset located here, and that I can use it to answer some questions I have about the equality and differences in the decile system.

Here is my attempt at such a visualisation:

Note: These results may be biased because of an uneven distribution of students across the deciles. A post on the real distributions can be found here

In this visualisation I looked at three dimensions:

  1. Amount of students in each decile
  2. The outcomes of study measured by the grades Not Achieved, Achieved, Merit, and Excellence
  3. Some of the different subjects that are studied

Amount of Students

For this visualisation I only looked at results for the highest level of high school qualification (NCEA level 3) in the year 2012. In an ideal world the amount of students who get to NCEA level 3 should be the same for all deciles. However, I discovered it is drastically different, where there are nearly 5 times more students in decile 10 studying than in decile 1. This may be a slightly distorted number because more students are in decile 10 schools than decile 1 schools, but this is still quite a difference.

Outcomes

By looking at the students outcomes after studying, you can see that although there were more students studying in Decile 10 than Decile 9, less received a Not-Achieved grade.

Subjects

I grouped together Calculus and Statistics into Math; Physics, Biology and Chemistry into Science; and English as English. The least equal of these subjects was science, where more than 10 times as many students study science in decile 10 compared to decile 1.

Critiques of the Visualisation

I would have liked to spend more time on this visualisation but I have to stop somewhere. I would have liked to add:

  1. Take into consideration the distribution of students in each decile
  2. the ability for the user to select different years other than 2012, to see if there is a trend over time
  3. a way to examine the exact numbers so that the user can drill down into the actual figures
  4. a wider selection of subjects to be selected
  5. functionality to let the user to select different levels other than just NCEA level 3

It may be very difficult and time consuming to implement these while keeping the visualisation relatively clean from clutter. Cluttering a visualisation with controls is too easy, and it may only remove from the core message that I want to convey.

The Technology

This is my first attempt at creating a visualisation with complex animations. To accomplish this I used D3.js, Q Promises and Font-Awesome for icons.

The main reason for the use of Q promises over just JQuery promises was for the helper function delay. This allowed me to better pace the flow of the animations with much greater clarity. These technologies really came together and the overall definition of the visualisation looked like this: $('.play').on('click', -> $('.play').hide() step1().delay(500) .then(step2).delay(500) .then(step3).delay(500) .then(step4).delay(500) .then(step5).delay(500) .fail((err) -> console.log err)

Where each step looked like: step3 = -> p = show_message("Let's distribute them into NCEA Level 3") return p.then( -> all_subjects.get_deciles().sort_out_deciles())

One of my favourite code snippets from this is the show_message function: show_message = (message, delay = 2000) -> Q.fcall( -> $('.messages').html(message) ) .then(-> $('.messages').show('scale',100)).delay(delay) .then(-> $('.messages').hide('scale',100)) .then(-> $('.messages').html(''))

Using promises is a really elegant way to create these complex animations as you can change any step, and all following steps will adapt.

To further look at my (messy) code have a look at my portfolio.

In this project, I did not use D3.js for its ability to render great looking visualisations, but for the tools it provides like scales. I am finding I am hitting the limitations of SVG more and more, and rendering using CSS with rendered HTML provides a nicer way to layout items. But… if I ever needed to draw a line I will go back to SVG!

Learn More

To learn more about data visualisation you could read:

  1. Envisioning Information — Edward Tufte
  2. Visual Display Quantitative Information — Edward Tufte
  3. Interactive Data Visualization for the Web