Data is more than just content. Content is more like the words you are reading now. They are put together to form a narrative and to tell a story.
Hopefully the story enables you to better understand the concept. Better than that, hopefully you fully understand the concepts through the words on the page.
Data is another form of content, just a lot more dry.
A Cricket Story
I’m a big cricket fan, so I’m going to use cricket as an example between data and the narrative.
The Data
The data is raw and without prejudice. It’s very black and white and you don’t get a feel for what it really means.
| Bowling | O | M | R | W | ER |
|---|---|---|---|---|---|
| J M Anderson | 10 | 1 | 57 | 0 | 5.70 |
| C R Woakes | 10 | 1 | 52 | 4 | 5.20 |
| C J Jordan | 10 | 0 | 73 | 0 | 7.30 |
| B A Stokes | 7 | 0 | 54 | 0 | 7.71 |
| J E Root | 3 | 0 | 14 | 0 | 4.67 |
| J C Tredwell | 10 | 1 | 42 | 2 | 4.20 |
The Narrative
The narrative tells the story about England and how they performed when bowling. It uses elements of the data to back up the narrative, but you can get the real picture of what happened that day.
England had been in pole position midway through the India innings, with Chris Woakes – who took 4-53 – and James Anderson enjoying a cloudy morning after Cook opted to bowl.
India were 26 for two after the 10-over powerplay and were still stumbling along, despite a patient Rohit Sharma fifty, until Raina and Dhoni began an onslaught England had no answers for.
“That Raina partnership with Dhoni took the game away from us and we probably reacted quite slowly to that,” Cook said.
“I don’t think it was a 160 wicket, but 30 extras just shows that we were sloppy with the ball.”
Chris Jordan was the chief culprit as England conceded 16 wides – with the Sussex man delivering 12 of them.
He was not alone in having an off day, although Woakes showed his aptitude with both the new ball and at the death.
“The bowlers will know that (they need to improve) and they’ll go away in the next couple of days,” Cook said.
Handling responsive data
Most data online will be displayed in the form of tables. Tables are a great way to display the content when you have enough screen space, however it can be tough to view and make sense of it as the viewport decreases.
There are a few options on how to handle large data tables.
Do nothing
This is an option but not what you should go with. Lets take a look at some other options.
Reflow the table using @media queries
This is a solution from Chris Coyier. It reformats each row into it’s own table so you can linearise it while still keeping an understanding of the data.
Table to pie chart
This technique was put together by Scott Jehl from Filament Group. On a large screen you get a full view of the table and data but as the viewport reduces it will display the data in a pie chart instead.
A great solution, however it does mean you’re technically providing different content to users at different viewports.
See the Pen Pie Chart to Table RWD Data by Justin Avery (@justincavery) on CodePen.
Fix first colulmn
Zurb came up with a solution that you can use on your existing tables by attaching the CSS and JS they provide. It will require you to also add the class of
.responsive
to your table.
/* Attach the Table CSS and Javascript */ <link rel="stylesheet" href="responsive-tables.css"> <script src="responsive-tables.js"</script>
