Exploring the Average/Mean - a D3 Visualization

This is a short note on an interactive visualization I have been playing with for exploring the average/mean. It is intended for folks who may be very new to statistics. It is embedded below from this site on googledrive.

Even the "Simplest" Projects Offer Something to Learn

Mathematically, there's not much to this, I guess.

However, I (re)learned several things about d3 I hadn't messed with in a while - mainly to do with its slick animation capabilities for handling when data is updated. And the impact of this animation, coupled with the default easing functions, is way out of whack with how much animation there may actually be.

There were a number of conscious decisions here with respect to how the user is allowed to interact with it.

First, there are no text inputs - you can only change things by dragging one of the bars or clicking one of the buttons. Numeric input is an edge case bear, imo, especially on a tablet.

Second, there is a bottom area underneath the bars that allows the user to drag a value down to zero and back up from zero. This is done via small svg rect's that have their css "pointer-events" set to none, so that mouse/touch events pass down to the full rect beneath it.

An Equation, but No MathJax

I wanted to make sure and include the actual equation being used for calculating the average, filled in with the particular values active at the moment. I started down the path of incorporating MathJax for this, but decided that it might not update fast enough, and setting up a pre-rendered template did not seem straightforward (although it might be). So, I just boxed an equation together with some tables. If you mouse over one of the bars, or drag it to change its value, the corresponding entry in the equation is highlighted and updated.

Performance on Tablets

I have tried this on both a Nexus 7 and an iPad. Both seem ok in the (perhaps odd) "Auto Run" mode for this app.

On the Nexus 7, the dragging and subsequent updating on the Nexus is actually usable, although there is some jank with the window sizing sometimes.

On the iPad, the latency in the dragging is irritating. I don't know if there are further optimizations that would work there, short of not updating everything on every drag event d3 is telling me about.

Responsive Design - Getting Better

The visualization is redrawn when the screen is resized, and it seems to work pretty well on the desktop.

Scaling of visualization
with window size

The re-rendering is keying off of the width and height of the enclosing div. Another approach that I believe should work is to make use of the svg viewBox attribute. However, I've yet to get this to work well consistently. There are many different svg/html/css parameters controlling what is drawn, and how they interact can be surprising and almost maddening to work the kinks out of.

I have noticed quirks with the rendering on tablets - I wonder if there are blips in sizing events that result in erratic size information.

Does this Provide any Insight for Newcomers?

I really don't know if this may be useful for someone somewhere trying to get a better feel for the average/mean. I had originally planned to be able to show how one extreme value could "unreasonably sway" the mean, highlighting how its use as a measure of central tendency can be suspect. The results with the small range here were disappointing. I might be missing an easy angle, though.

I do think that there is tremendous potential in education and general insight given the relative ease of creating interactive d3 visualizations underpinned by mathematics/computation limited only by your imagination.

Art, education, mathematics, statistics. I continue to be impressed with javascript.