Highlighting data viz best practices around the web

Thursday, March 16, 2017

Hours Worked vs. Productivity in OECD Countries

SourceThe Guardian
AuthorNick Evershed


Best Practices:
  • Clean design
  • Minimal use of color
  • Super fast interactivity
  • Nice use of little lines to connect the countries to the dots
  • Light grid lines that guide the eye, yet aren't distracting
  • Nice axis labels
  • Really like the option to edit the chart
  • Trend line helps guide the eye and summarize the data
Recommended Enhancements:
  • Needs a more engaging title. What question is this answering? What's the takeaway?
  • Make to OECD average a different color
  • Needs better tooltips
  • What's the reason for labeling the countries that are labeled?
  • Make the view square. Scatterplots tend to work better when they're square.

Thursday, March 9, 2017

Top Brewery Road Trip

SourceFlowing Data
AuthorNathan Yau


Best Practices:
  • The ultimate beer lover's road trip! What's not to like?
  • Minimalist map; stripping nearly everything out of the map makes the route pop
  • Love the addition of the line thickness to show how many breweries are nearby. After all, you'd get awfully thirsty on a trip like this.
  • Makes me feel like I could start anywhere
  • The yellow circles to mark the breweries really makes them stand out on the black lines. 
  • Using open circles instead of filled circles. This helps the viz breathe.
  • Great use of whitespace
  • Everything is super crisp and easy to read
Recommended Enhancements:
  • Make it interactive so I can hover over areas for more information
  • How long would this trip take? Seems like duration would be a good addition.
  • Link to the data source is missing. It's mentioned in the article, but would be good to include in the standalone image too.

Thursday, March 2, 2017

Washington D.C. Metro Scorecard

SourceTableau Public
AuthorLindsey Poulter


Best Practices:
  • Awesome scorecard example
  • Super clean and easy to read
  • Including the values on the bars aids in comprehension yet doesn't distract
  • Including a reference line and labeling it for the goal
  • Color-coding the bars by above/below the goal makes problems easy to spot
  • Good color choices
  • Terrific organization, everything is in the perfect spot
  • Including light dotted borders to section the scorecard
  • Nice section labels in grey boxes
  • Nice titles for each metric and subtitles where necessary
  • Really good labeling on the color legend
  • Filtering is out of the way, yet easily accessible
  • Timelines are consistent across all of the metrics
  • Including a dot on the end of each line and color-coding it
  • Including the goal line on the line charts
  • Great context on every chart
  • Included a link to the data source
Recommended Enhancements:
  • I can't think of a single thing I would change or improve. Might this be the "perfect" dashboard?

Thursday, February 23, 2017

Surrey County Residents Survey

Best Practices:
  • Excellent display of survey data
  • Nice inclusion of how the net satisfaction score (NSS) was calculated
  • Sparklines show the overall trend for each question
  • Good use of color for the stacked bars
  • Nice padding on the ends of the stacked bars to allow room for the NSS circles
  • Background color matches the Surrey logo
  • Neatly organized overall
  • Nice interactivity and filtering
Recommended Enhancements:
  • More clearly indicate that the bars and NSS represent the latest data
  • Include a dot on the ends of each sparkline and indicate whether it's better or worse than the previous quarter
  • Would a green background on the charts work better than the white? It might be less distracting.
  • Include all of the response types in each tooltip along with the NSS

Thursday, February 16, 2017

Migration within the UK

SourceTableau Public
AuthorRob Radburn


Best Practices:
  • Great example of long-form storytelling!
  • Excellent narratives that add context to the visualisations
  • Good use of color for movement in and out of local authorities
  • Fascinating sociology case study shown displayed visually
  • Great use of a hex map
  • Really like using a map as a legend
  • Nice use of a ? icon for more information and to show the data sources
Recommended Enhancements:
  • Would be nice to be able to highlight a single local authority throughout by clicking on any of the maps
  • Label the map that is used as the legend directly. That would make the map bigger and removed the big legend.

Thursday, February 9, 2017

Power to the People: A Quick Look at UK Electricity Usage Patterns


Best Practices:
  • Love the title!
  • Nice annotations
  • Simple design that's easy to understand
  • Black background works well
  • Really nice heatmap; great color choices
  • Nice chart titles that tell you what's happening therefore aiding understanding
  • Nice option to custom the heatmap
  • Line chart makes the seasonality really evident
  • Axes on the line charts help with framing
  • Not including gridlines
  • Great tooltips on the line charts
Recommended Enhancements:
  • The blue text on the black background makes my eyes strain a bit, but I'm getting old. Maybe it's just me.
  • Add tooltips to the heatmap

Thursday, February 2, 2017

Commuting Habits in London





Best Practices:
  • Great minimalist design
  • Excellent additional information in the tooltips
  • Beautiful hex maps of London; first time I’d seen these for London
  • Terrific use of icons for interactivity
  • Nicely placed instructions in the sub-title
  • Great font and color that matches the TFL
  • Incredible insight can be gained from it. For example:
    • You can easily see that most tube riders are north of the Thames while most train riders are south of the river.
    • The primary taxi riders live in the posh sections of the city: Westminster, Kensington and Chelsea.
    • Car commuters primarily live on the outskirts of London.
Recommended Enhancements:
  • Use a different shape in the tooltips to make them look more like bar charts than squares
  • Include a note about the timeframe that was used to create the viz

Thursday, January 26, 2017

Has the Snow Finally Stopped?

Source: FiveThirtyEight
Author: Harry Enten


Best Practices:

  • Really interesting design. I love the dot on top of the bar range.
  • Sorting by earliest to latest
  • The legend is really good at explaining how to read the visualisation. This is especially useful when it’s a chart type that isn’t common.
  • Nice clean view; mostly all bits of ink have a purpose
  • Clearly identified the data source
  • Minimal use of color
  • Bold lines to divide the months
  • Nice annotation that explains why two of the cities have their median way at the left end of the range
  • Good subtitle

Recommended Enhancements:

  • The title is misleading. It gives you the impression that winter ends in this range, which simply isn’t true. This is merely when the last snowfall occurred.
  • The gridlines between the months are unnecessary and misleading. This makes it look like there are four weeks in every month when that’s not the case.
  • The months should be spaced by the number of days in each month to make the bar ranges more accurate.
  • Are the horizontal gridlines for each city necessary? I’d have to see the chart without them. They do help connect the city with the bars, but are they unnecessary clutter?

Thursday, January 19, 2017

The Extreme Variance in U.S. Population Distribution

Source: dadaviz
Author: dadaviz


Best Practices:

  • Terrific storytelling; I love how the story gets more and more extreme as you scroll through the maps
  • Simple use of colors that work well together, yet contrast each other
  • Using the text in the header to act as a color legend
  • Adding numbers for context and for comparison
  • Gives a great overview for just how people live in just a few counties, especially the last map that compares Los Angeles County to entire States
  • Minimalist maps put the focus on the data
  • Leaving the titles off; they aren’t needed

Recommended Enhancements:

  • Cite the data source


Thursday, January 12, 2017

The State of U.S. Jobs: 1976-2016

Source: The Daily Viz
Author: Matt Stiles


Best Practices:

  • Great example of small multiple line charts
  • Neatly organized
  • Alphabetical sort makes it easy to find a State
  • Comparing to the national unemployment rate provides much better context for each State
  • Shading each chart a light red to indicate a problem
  • Dots on the end that are labeled
  • Nice annotation on the first chart that helps explain how to read all of the charts
  • Only including the y-axis on the first chart in each row
  • Light gridlines help frame each chart
  • Consistent scales across all charts
  • Labelling the x-axis by decade
  • Clear note, credits and source at the end

Recommended Enhancements:

  • Include a + next to the positive values both on the axis and on the label
  • Color the dot on the end red for positive or negative) for additional context

Thursday, January 5, 2017

Europeans Greatly Overestimate Muslim Population

Source: The Guardian
Author: Pamela Duncan


Best Practices:

  • Clear title that tells the story of the chart
  • Good legend placement so you know what the colors mean before you read the chart
  • Alphabetical sort makes it easy to look up a country
  • Making the focus color orange allows it stand out from the others and drive home the message
  • Color is only used where necessary
  • Light grey bars in the background help the Gantt bars stand out

Recommended Enhancements:

  • Include the difference between perception and reality next to each country name for more context
  • Only including “selected countries” might be misleading; Did they cherry pick these countries to fit the story?
  • Allow sort options for Reality, Perception and Difference

Friday, December 16, 2016

Urban and Rural America Are Becoming Increasingly Polarized

Source: Washington Post
Author: Lazaro Gamio


Best Practices:

  • Incredible story telling
  • Great labelling
  • Vertical timeline works really well because it shows the sway better than horizontal would
  • Great annotations
  • Great example for showing massive amounts of data in a small space
  • Excellent analytical work (scroll down in the article for even more)
  • Nice minimal use of color

Recommended Enhancements:

  • Include the -20% D line on the first chart for consistency
  • Change the -20% D to +20% R; it was tough for me to wrap my head around this for some reason. I think making it more clear that it was a move to Republican would be make it more intuitive.

Tuesday, November 29, 2016

How Many Times Teams Have Been to the World Series

Source: Business Insider
AuthorSkye Gould


Best Practices:

  • Nice unit chart display
  • Including the numbers next to the dots aids understanding
  • Red/green work well since they can be looked at separately
  • Nice headers
  • Good footnotes for sources and additional information
  • Overall a very clean visualisation
  • Nice spacing


Recommended Enhancements
:

  • Could use a more engaging title
  • Title feel squished; it needs some breathing room
  • Add an option to sort the chart by appearances, wins or losses
  • Highlighting the Cubs and Indians makes sense in context of the rest of the story, but if all you saw was the chart, you wouldn’t know why they are highlighted
  • Sort order of the chart doesn’t match the title of the article

Monday, November 28, 2016

London Tube Heartbeat

Source: TubeHeartbeat.com
Author: HERE


Best Practices:
  • Great use of tube map colours
  • Very engaging
  • Nice filtering and customisation options
  • Nice legends
  • Good summary stats
  • Nice interaction when you click on a station
  • Tells a nice story when you watch the annotation

Recommended Enhancements
:
  • Would like annotations when I click on a station or line
  • Include option to include/exclude any combination of lines
  • A “map your route” option would be interesting

Thursday, October 6, 2016

Supreme Court Tenure by Justice

Source: Tableau Public
Author: Adam McCann

Best Practices:

  • Engaging
  • Beautiful design
  • Excellent interactivity that displays the name/summary of each Justice
  • Great use of colour
  • Simple filtering
  • Nice summary at the top
  • Clear explanations; this is very handy for a non-typical visualisation type
  • Nice scale labelling
  • Wide/short layout works well
  • Black background makes the data pop


Recommended Enhancements
:

  • None

Decrypting ABV and IBU: Choose your favourite beer!

Source: The Viz Connoisseur
Author: Simona Loffredo

Best Practices:

  • Overall excellent design
  • Lovely title that clearly tells me what it’s about
  • Including the definitions of ABV and IBU was a good idea for those that don’t know about them
  • Great idea to include the food recommendations for each quadrant
  • Nice filtering for the scatterplot
  • Good tooltips
  • Good colour and font choices


Recommended Enhancements
:

  • Have the filters in the top chart also updated the bottom chart
  • Make a mobile version so it can be used like an app at a pub

Tuesday, October 4, 2016

Mapping the Spread of Obesity

Source: Flowing Data
Author: Nathan Yau


Best Practices:

  • Great example of small multiples
  • Excellent interactivity
  • Great legend to show which states are where in the tiled map
  • Good use of color; the green and purple contrast well
  • Shows regional trends really well
  • Clearly shows how the entire United States is now overweight on average


Recommended Enhancements
:

  • Doesn’t fit in a single screen (at least no on my MacBook Pro), making it more difficult than necessary to see all maps at once
  • The color legend implies that overweight starts at 20%, when by the CDC’s definition 25% body mass index is the start of the overweight range

Friday, August 26, 2016

The Olympic Sports That Have Come and Gone

Source: FiveThirtyEight
Author: Allison McCann


Best Practices:

  • Very well organised
  • Easy to understand
  • Good use of color; they’re synonymous with the Olympics
  • Nice labelling
  • Good use of annotations


Recommended Enhancements
:

  • The design highlights the sports that have gone away. It might make more sense to switch these around so that these sports fade away with a light grey.
  • It’s too hard to see the reinstated sports. Maybe include another color for these.

Thursday, August 11, 2016

Ichiro: All 3000 MLB Hits

Source: Twitter
Author: MLB Stat of the Day

Best Practices
:
  • Nice use of images
  • Good use of color to distinguish the types of hits
  • Using a spray chart clearly shows how Ichiro could hit the ball to any part of the park
  • Using a dot for each hit and a different color for each hit type shows all of his power was to rightfield
  • A baseball field as a background helps add context (some problem though)
  • Including the distance markers to aid in understanding

Recommended Enhancements
:
  • How many yellow dots are behind those purple dots? We can’t tell because there’s no transparency.
  • While using a baseball field as a background is cute, no two fields are the same. So, this image shows doubles beyond the field and home runs inside the park.
  • The field is on a weird angle. It would be better if home plate was in the 6 o’clock position.
  • His 3000th hit is really hard to find. If the author wants to highlight it, then they should make it more prominent.

Wednesday, June 29, 2016

The “Aisle" U.S. Senators Work Across Has Grown Into a Canyon

Source: Tableau Public
Author: Hamid Hajebian


Best Practices:

  • Eye-catching design
  • Appropriate use of color for each political party
  • Design makes the purpose of the chart obvious
  • Good idea to include the lines across to accentuate the gap
  • Really like the use of the line width for the % of bills passed; clearly show how the parties don’t work together
  • Coloring the lines by the Senate majority strength shows the shift between parties in power nicely
  • Nice organization from oldest to most recent
  • Coloring the Presidents by their party is a nice touch and aids in understanding
  • Even though the lines are vertical, you can still see how much more conservative the Republican party has become
  • Center line provides balance
  • Excellent title that drives the point home
  • Good idea to include the Info button for more detail
  • Works well as a static viz and an interactive viz
  • Great tooltips


Recommended Enhancements
:

  • The scatter plot doesn’t add much value and feels like it was added because there was space on the side. 
  • If the scatter plot is removed, then the callouts for the meaning of the lines could be moved into that space so that the reader understands what they mean sooner.

Thursday, June 23, 2016

Human Development Index

Source: Russell Spangler
Author: Russell Spangler


Best Practices
:

  • Small multiples layout
  • Alphabetical sort makes it easy to find a country
  • Big number for the year with a nice control under it
  • Good use of icons for more information
  • Excellent explanations
  • Historical view on the upper right gives great context
  • Using the historical view as the color legend makes it easy to follow the color throughout
  • Nice color choices
  • Great use of reference lines in the bar chart for context
  • Love the inclusion of the actual numbers and the overall index for each country
  • Including the icons for any indices that changed is a great touch
  • Making a very complex data set look simple takes a LOT of skill

Recommended Enhancements:

  • Would a line chart make the trends easier to understand for the country view on the upper right?
  • Add a bit more spacing between the rows so the countries are separated vertically a bit more (very nitpicky)

Tuesday, June 21, 2016

National Autism Indicators Report

Source: Evergreen Data
Author: Stephanie Evergreen


Best Practices
:

  • Simple color usage
  • Excellent layout
  • Perfect use case for slope graphs
  • Headline gives a great summary
  • Consistent scaling
  • Great labelling everywhere
  • Including the axis ticks only on the left side nicely reduces clutter
  • Nice inclusion of the actual numbers

Recommended Enhancements:

  • Needs a title
  • Should the charts be sorted somehow? I don’t see any logic to the sorting. I would have chosen to sort by one the metrics.

London Marathon: How Many Runners Achieve the Dream of a Negative Split?

Source: Financial Times
Author: John Burn-Murdoch

Best Practices:

  • Great use of color
  • Consistent design for each year and gender
  • Great axis labelling and descriptions
  • First chart has more descriptions than the others to make it easier to understand the entire viz
  • Well organised from newest to oldest
  • Layout makes the viz easy to consume
  • Comparisons are easy
  • Viz does a great job of answering the question in the title
  • Great use of reference lines
  • Fading out the runners that aren’t part of the story

Recommended Enhancements:

  • Subtitle is really long
  • Make the scales the same size, i.e., have the same number of hours on each axis, so that the 45 degree line is the same time for the first and second halves of the race

Friday, April 22, 2016

Women are Underrepresented in State Legislatures

Source: Behance
Author: Sonja Kuijpers


Best Practices
:

  • Great use of a trellis layout
  • Great use of color
  • Outstanding legend and directions
  • Nice summary at the top
  • Nice method for calling out the best and the worst states
  • Great labelling
  • The shading between the lines aid in understanding the gap
  • Good example of using a slope graph to compare two measures AND two dimensions
  • Very crisp looking
  • Clean design
  • Impactful

Recommended Enhancements:

  • Maybe make it a bit more compact by reducing the space between the states

Tuesday, April 12, 2016

Historical US Presidential Elections

Source: Tableau Public
Author: Jacob Olsufka

Click the image for the interactive version


Best Practices:

  • Perfect use of color to represent the different political parties
  • Consistent use of colors
  • Option to choose different map types
  • Beautiful hex map 
  • Great use of images for the candidates; the subtle color borders are a nice touch
  • Nice stacked bar chart of the electorate by state
  • Good idea to include the reference lines on the bar charts
  • Good idea to make the bar charts diverging from the center
  • Nice selector for the election year
  • Nice labeling on the bar charts
  • Including the detail description between the candidates really adds to the story
  • Good placement of the color legend
  • Including the check mark for the winner


Recommended Enhancements
:

  • The shift from the previous election doesn’t work well for me. I think it’s a combination of using an arrow and the fading colors. A simple Gannt bar might work better.
  • What does the line in the middle of the previous election section mean?
  • Remove the line that cuts through all of the circles at the top
  • Change the circle selectors at the top to a heatmap style (filled rectangles)
  • It’s hard to tell what the map is colored by. Is it colored by the % of electoral votes or the % of the popular vote?

About Me

Categories