This post is written as an example of what it might look like to tell a story using D3 that reacts as you scroll. This kind of effect can definitely be over-used, but it's great for stories when you're walking a reader through how you might have analyzed data, since it can visually clarify a process for someone even if they've never encountered statistics before.

(Yes, I'm aware most people know how averages work, this just made a good demo.)

If you're new to the world of statistics, one of the first concepts that's likely to be thrown around all the time is the concept of an average value. This may seem like a pretty straightforward thing to calculate or discuss, but there are actually a number of different things this can refer to.

The most common kinds of averages you'll encounter are the median and the arithmetic mean.

To demonstrate these, let's work on a bar chart of a random set of nine numbers:

These are generated on the fly each time this page loads. In this particular instance, they range from to .

Now, let's take a look at some averages. First up is the median.

The first recorded use of the median as a term was as early as the fourteenth century, but it really rose to promise as a maritime navigational tool when Edward Wright wrote about it in his book Certaine Errors in Navigation.

Put most simply, the median means the middle of the data. Let's calculate one.

First, we'll take our randomly generated numbers and sort them by size. (This will happen as you scroll.)

Next, let's choose the value of the middle column. It's our median. In this case, that's .

As the name implies (and as you can see), medians are the middle of the data set, but not necessarily the middle of the values associated with something. Medians are frequently used for navigation or when it's particularly important to have your average item be a member of the original data set.

But let's not leave the chart shaded and sorted! It's time to move on.

Next, let's talk about mean. The mean of a data set is typically what people are talking about when they refer to an "average" in a more general context. Usually, it's calculated by taking the sum of all items in a data set and then dividing by the number of items. Unlike median, this is unlikely to result in an "average" that is also a member of your data set.

The easiest way to visualize this is to imagine that we are taking parts of each bar in the chart above and distributing them equally until all the bars have the same height. That height is then the mean.

Let's try it now!

Hopefully, this little tutorial has given you a better idea of how averages might work. For more information, you might want to try the Wikipedia pages for median or mean.

And, of course, for more information on how to assemble scrolling-driven stories like this, stay tuned here!