Still steppin’

My latest visualization at Hoy Los Angeles involved stepping through force layouts with bubbles and was directly influenced by Jim Vallandingham and Claudia Núñez.

CMEPGVdVAAIC6wcVallandingham discussed “stepper graphics” at OpenVis Conf, and I’ve noticed more of them since I wrote about appreciating maps that walk users through stories. Claudia Núñez, my editor at Hoy and founder of Migrahack, had a special request for a visualization of sports data: use bubbles.

At first I balked at bubble viz because bar charts can be more effective, but Hoy sports staff wanted to explore Major League Soccer player salaries by nationality, and I felt more comfortable being creative with a sports dataset. A vision came to me as I tried to sleep one night, a vision with soccer balls representing player salaries organizing themselves according to different categories.

I turned to a 2011 OpenVis presentation by the very same Jim Vallandingham on d3’s force layout and got to work translating my vision as javascript code.

The skewed distribution of salaries made visualization tricky. Also more than half of MLS players were born in the United States, and I was surprised to discover so few players were born in Mexico. Working with sports editor Eduard Cauich, I included these quirks as steps in the interactive to help the user understand the salary data. The finished project applied this sequence of operations on svg circle elements:

  1. bounce the 25 highest salaries around force layout
  2. list circles in rows by salary, team and country
  3. plotting circles on a topojson map

I probably spent the most time fine-tuning my technique listing the circles in rows and had some funny slips along the way.

Screen Shot 2015-07-27 at 3.48.56 PM

I also went back and forth considering whether to plot the circles on the map as lists or using multiple force layouts clustered around map points. I chose the linear presentation in the end because my network implementation ran slowly on my phone.

comparisonI used an exponential scale to size the circles because the skewed distribution made a linear scale difficult to read. I also assigned colors in five categories based on what I determined to be significant breaks on the distribution. These were subjective decisions.