Skip to main content

The Making of the Weighted Pivot Scatter Plot

May 2017

I recently published a story that tried to answer the question: what city is the microbrew capital of the US? One of the graphics in the story allows the user to adjust some parameters to change the rankings, and see how the data can be manipulated to yield different results. It looks like this:

Example of the weighted pivot scatter plot in action

The idea for this chart started when Matt sent me the latest Upshot article that explored school systems and home prices. I was still in the process of figuring out how I wanted to display the rankings of all cities, and he suggested something similar.

Screenshot of The Upshot chart
Screenshot of The Upshot chart

Although the mental model of higher on the chart equaling worse (higher home price, worse school) is counterintuitive, I still found the chart effective. It was helpful to have a single focal point to anchor the reader, and the lines enabled you to spatially compare the nodes.

For my chart, I started with two dimensions: a score for quality, and one for quantity. This was easy to whip up since it was a traditional scatter plot. Unlike the NYT example, I had no anchor point for comparison. The encoding for “better” relied upon size and color, which was dynamic based on user input. Try it out below.

view code

This worked. But for me, it didn’t do a good job at communicating what was going on behind the scenes of the weighting. I decided to try a spatial encoding to further emphasize the weighting factors. The most obvious way was to make axes proportional to their weight. So if our chart was 100x100, and the “quality” was weighted at 60%, it would be 60x40. The more a circle was towards the top-right corner, the higher its rank.

view code

This worked, too. But there were two problems: the chart kept changing size (a bit awkward looking), and the “more towards the top-right means better” concept might be less intuitive to the layperson. I started looking at other graphics for inspiration and remembered Adam Pearce’s rotated scatter plot, used to better align the chart trend with your level gaze.

Screenshot of Adam Pearce’s rotated scatter plot
Screenshot of Adam Pearce’s rotated scatter plot

The final step was to implement a combination of the visually proportional axes with the rotated chart. Hopefully this would achieve maximum spatial encoding, algorithm transparency, understanding, and awesomeness.

For this to work, I had to dig into some mild trigonometry. I first needed to find the length of the hypotenuse (the line from bottom-left to top-right) in order to scale the axes as they changed. This would keep the chart dimensions consistent. I then needed to calculate the angle of the triangle to rotate the chart, thus keeping the hypotenuse oriented vertically.

I applied these transformations to the chart and voila (read: many frustrating hours later), the weighted pivot scatter plot was alive.

view code

Was the extra level of encoding necessary? Maybe not, but it came with one unexpected and undeniable side effect: it was fun. Watching the chart pivot and transition in response to your input is playful. I feel that it made the chart more engaging. It drew the reader in, much like a gorgeous presentation, which in turn made them more like to explore the data. Despite being a fairly short story, it got upwards of 10 minutes on page per user. While I’m not an analytics junkie, to me that says something about the power of interactivity.

Check out more pro tips from our team.