Average Temperature x City ft. Material Design

Workout Wednesday – Week 28

This weeks Workout Wednesday challenge focussed on Material Design style guide for data visualization. Google has many design guides based on their material design concept, but none related to data visualization until just recently.

The data can be found here – Click here

Requirements

• Dashboard size 1000×800
• All elements should be in a vertical container, except for the filter
• Provide 150px padding on all sides of the vertical container
• Make sure values display the degrees symbol as a suffix
• Axis should display marks every 20 degrees, and should provide context to the reader at the top most mark
• Add a reference line for the current month, that will update automatically as the year goes on
• Add a circle over the point in the lines that represents the current month’s average temp
• Add a label for the hottest city, in the current month, for all of the cities in the view
• If you filter out Phoenix, the label should move to Salt Lake City
• Add a simple color legend that updates as the filter changes
• Turn off tooltips – not necessary for the challenge

Here is my attempt at this dashboard –

Advertisement