This is it. This is where all of the UX tidbits I've been dropping throughout the chapter and all the functional programming ideas you've been learning come together; let's make a simple explanatory graphic that uses interaction to walk the viewer through some data.

The first step to any visualization involving user interactivity is to plan exactly what you want the visualization to do, how you want your viewers to interact with it, and what you want to say about the data. What is the data's story and what's the best way to tell it?

In the prison population dataset, we have the numerical product of over a century of incarceration in a western country. There are many ways we can look at this data. We can look at how the prison population has risen versus overall population growth, or we can look at how the prison population has risen or fallen in relation to known historical events. Often, you'll need more than one chart; for instance, when I used this data in a project for The Times, the piece had no less than five charts and one map, with the reader being walked through each graphic in sequence. When planning complex sequential interactions like this, it helps to write down these things in either bullet point or paragraph form, possibly even drawing a flow chart, before you start writing any code. The real work is often done long before the first line of JavaScript is ever written.

In this particular instance, because we have a century of data, we will look at a few notable historical points. The graphic will have five states, which will be navigated through a series of five buttons:

• Initial view: Years 1900 to 2015. This provides a general overview of how the prison population has risen over time.
• Zoom 1900 to 1930: Highlight 1914-1918. This text will explain that population rose due to the end of World War I.
• Zoom 1930 to 1960: Highlight 1939-1945. This text will explain why population rose after World War II.
• Zoom 1960 to 1990: Discusses the rise of consumer society and its impact on crime.
• Zoom 1990 to 2015: Highlight 1993 and explains the sharp rise after the murder of James Bulger was used by politicians to increase penalties.

We're keeping the user interface deliberately simple, but remember that simple is often better, particularly when building for an audience on mobile (sliders are much harder to use on touch devices than buttons, for instance).