There are a million and one use cases for JavaScript charts. One unique example we thought would be fun to create is a visual tool to help evaluate the fantasy football player stats and projections we usually see in tabular format on popular websites.

Our goal was to show how visualizing the lineup decision process can assist fans as they pursue fantasy league glory.

Overall data visualization process

The entire process is really a conversation about the stories, data, and visualizations that are important to fantasy football players. We are fantasy football beginners, so we didn’t dive into the most advanced stats.

Instead, we started with basic questions about what would be helpful to know. After formulating some initial questions, we considered some basic steps for creating a data visualization:

  • Audience: How do we frame our questions in a way that would be clear to a wide audience?

  • Data: What data would answer the questions? Where can we find it?

  • Information Hierarchy: Which pieces of information are the most important, or should be seen first to inform understanding of the rest of the dashboard?

  • Visual display: How can charts be selected for proper understanding and visual interest?

  • Interactivity: Can interactive features help answer questions and draw attention?
    These principles guided our efforts as we sketched the dashboard. After creating an initial sketch (with pencil and paper!) we collected feedback from fantasy football players.

 data visualization design process

Then we produced wireframes to ensure the charts we wanted to use would fit properly. The next step was building out the wireframe in ZingChart, and then entering data. Finally, we were ready to share our fantasy football dashboard with the world.

Audience: What data did we need?

We considered datasets users need to set their lineups. This is the data that ‘tells a story’ that users care about. But realistically, it was just the beginning of a conversation.

We derived our four charts after speaking with users and conducting research. They were arranged according to the priorities which would appeal most to people making lineup decisions.

data visualization story

We found a site listing the best resources. From those, we selected the ones that were a combination of most widely used and interesting data analysis: ESPN and Fantasy Sharks . These two were a good fit because ESPN hits the widest audience and Fantasy Sharks does deep analysis.

Information architecture: Hierarchy and simplicity

Fantasy football data is a measurement of a particular player or unit’s performance in comparison against a previous week or competing player. So when developing our top chart, we asked ourselves,”Why would we not use a bar chart?” It is the most easily relatable and familiar to the most people.

We decided to stick to the principles of telling a story to our audience: fantasy football players. No need for wild area charts or avant-garde tree or heat maps. The experts say, “We’re wired to see rectangular shapes.” Therefore, we used a bar chart to keep the format familiar and readable.

Chart #1: Projections by player position

chart 1 of the data visualization

We thought this chart should be placed at the top of a few reasons:

  • It provides an overview of the top players at each position

  • We designed it to encompass the most needs of our users

  • The stats are pretty general

Chart #2: More detail

chart 2 from the data visualization

Below the first chart, we delved deeper into the strength of schedule for top projected players by position. We are aware of the analysis that can be done by mathematical and data analysis wizards like Peter Brand show Billy Beane in Moneyball and wanted to show how simple a visualization of this more complex data can look.

Chart #3: Tables/grids

chart 3 from the data visualization

In the third chart area, we take an even more granular look at individual metrics.

Chart  #4: Social data

chart 4 in the data visualization

In our final chart, we provide a sort of “ask the audience” lifeline, a la “Who Wants to be a Millionaire?” After the user has done their analysis, they can validate their decision by seeing who everyone else chose.

Visual Design of the Data Visualization

After our wireframes were complete, the next step was to pick a palette that allows for visual differentiation between categories. We found inspiration in Minh Dao’s palette on Dribbble because it is a color that satisfies our data type.

color palette for data visualization

When it came to font selection, we chose Arial, because it is readable at a variety of sizes.

You might be wondering why we didn’t add clip art of footballs or team logos. That is because we made a conscious decision to adhere to one of the rules in presentation by Hubspot and Visage:

"Don't add chart junk. Unnecessary illustrations, drop shadows, and ornamentations distract from the data."

Dataviz interactivity and user experience

For us, the key to a great user experience with this dashboard was in the interactive features. While keeping it simple, we implemented:

Our project is intended to last for the duration of the football season and will evolve over time. So, using a JavaScript chart library that was robust and could scale through the evolution of the project was a no-brainer.

That way, we took time to design the dashboard, rather than build it.  But after it was built, using ZingChart had a distinct advantage for some styling and interactive features.

Tooltips provided a fast and intuitive way for the user to quickly get the information they need by moving their mouse over the bars of the chart.

And the subtle animation was added to help draw attention down the length of the dashboard.

Feedback and improvements

We gathered feedback from a variety of sources which ranged from comments on visual aesthetics to insight into functionality and analytical options. On various online platforms, we saw substantial interaction with the dashboard so we decided to keep improving it.

A lot of feedback came from Business Intelligence via Google +  and a Data Visualization group on LinkedIn. Based on these comments, we determined more players at each position should be listed, with more data on the position. Many people wanted the ability to drill down.

revisions for the data visualization

Creating the perfect interactive data visualization

So how can you make the best possible dataviz?

The short answer: Gather continuous user feedback and iterate!

The long answer: There are many steps.

  • We noticed a significant amount of mobile traffic, so we built the new dashboard specifically for a tablet.

  • We included buttons, as requested by fantasy football players, so they could see more players per position. This allows users more interactive control to access the specific information in which they are most interested.

  • We eliminated one graph that caused confusion, and replaced one with a data type that our football community said would be more helpful. The goal with these changes was to make the dashboard more simple to read and easy to understand.

The end result is our new dashboard:

mock up of ZingChart interactive fantasy football data visualization

View the full dash at:

Even though we’ve learned a lot, we are still not geniuses on the subject matter of fantasy football. But hopefully this exercise demonstrates that with a bit of research, some planning, and careful iteration, you can create useful interactive data visualizations for your team, even if you are not an expert on every niche topic within the organization.

What topics have you visualizing data? Share your project ideas with us in the comments section below.

Other Dashboard Resources:

comments powered by Disqus