while i understand your article is to demonstrate the usage of css to create accessible basic charts, but i question the practicality of it. i almost feel like you’re doing it simply for the purpose of demostration.
I should have mentioned this in the article itself, but all the techniques I described are in use on EveryBlock, the local news project I’m currently working on. You can see an example the timeline and bar charts in action on this “overview of crimes in Chicago”:http://chicago.everyblock.com/crime/ and the sparklines on this “breakdown of crimes by neighborhood”:http://chicago.everyblock.com/crime/locations/neighborhoods/.
Copy & paste the code below to embed this comment.
Jin Y
Wilson, the charts look very nice on EveryBlock. However, to further my point from before, what would your approach be if a piechart/scatterchart is to be added to the site?
If from the project planning phase, it’s determined that the the only type of chart the site will ever shown is bar charts that can be done with the css techniques you presented, then that’s fine. (it could very well be the case with the project you are working on). however, for the sake of scalability and consistency, i use a designated charting software instead of css. i’m not dismissing the benefit of css charting, however i feel it’s not efficient to have one set of css charting code, while using a 3rd party software to deal with the others. just my two cents.
The visual/interaction is not a 1-1 replicate of the example that is used in this article but I think it is fairly close.
The whole row is not an anchor
I’m certain that the CSS can be cleaned up further and possibly have it even more closer to the example (I can’t invest more time into this at this time)
Loved the example, as a newcomer to standards and when and why you should use them this is a great idea. thanks for writing the article I can’t wait to try it out.
Copy & paste the code below to embed this comment.
Robin Hood
Who prints anymore? Well actually a lot of people still like to print charts out on real paper. These charts don’t print nicely at all…any ideas on how you would handle that?
Those ideas are absolute genius! This kind of article is exactly why I read ALA – real, practical ideas that I can put into practice :)
The first two charts – the bar chart and the timeline – are a fantastic idea. Using the markup of a table but representing it as a chart by CSS is much better than referencing an image and having to provide alt text or longdesc. My only concern is whether browsers or assistive technologies with inferior CSS capabilites will be able to make sense of it. I hope so!
I’m not so sure about the final example. This seems to be an incredibly complicated way to create a very basic chart. In this case, I think I would just create the charts as images.
These charts don’t print nicely at all”¦any ideas on how you would handle that?
The example styles are scoped to media=“screen” since I decided it was out of the scope of the article to get into print styles. If you just change the media attribute on these styles to “all” they actually print pretty well, as long as the user has background printing turned on in their browser. Since you can’t rely on that, I’d recommend setting a border on the bars in a separate print style to make sure the bar shows up.
Everyone seems to be favoring Draconian semantics and edge cases rather than practical solutions in appropriate situations. Nobody said this approach was going to scale for all cases, but it works well in a lot of them.
I love it. It’s the first design article on ALA that designers can use immediately and with visually pleasing results. Keep up the good work, Wilson.
I just noticed that the “Google Chart API”:http://code.google.com/apis/chart/#sparkline allows you to insert “Sparklines”:http://en.wikipedia.org/wiki/Sparklines easily… Yea Google!
“Flot”:http://code.google.com/p/flot/ – a “jQuery”:http://jquery.com plugin is a fantastically simple and beautiful option for rendering line graphs. The “examples”:http://people.iola.dk/olau/flot/examples provided give a good idea of how rich and powerful it can be too.
Copy & paste the code below to embed this comment.
Eric Meyer
Nicely done, but unfortunately it doesn’t meet the requirements set forth in the article—namely, having the whole “row” (or “data atom” or whatever) be clickable. You got close, but without either a good deal of JavaScript or a full working implementation of XHTML 2, I don’t think it’s possible to do with valid table markup.
It’s a shame we’re still having to make these kinds of compromises, but there it is.
This is nicely done. There are some other examples on the web of accessible diagrams and visual aids:
Eric Meyer’s Bar Graph: http://meyerweb.com/eric/css/edge/bargraph/demo-table.html
@ Blaise Kal
And my Venn Diagram (which could be used for a pie chart as well) that I posted back in Sept. of 2007:
http://www.heyokadesign.com/news.asp?post=more-accessible-venn-diagram
Something to think about, however, is that in certain situations the use of the ‘dreaded table’ can have more meaning.
Despite the issue of whether data belongs in a table or not I think this is a great example especially for developers. I deal with very large data sets and markup of this nature gives clients exactly what they want rather than a giant table to endlessly scroll through.
Copy & paste the code below to embed this comment.
Max Rock
If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure. My new venture http://www.shadoz.com/css-template-07.htm
It’s updated daily with web log- statistics about visits to my eponymous site. The use of the term “log” is a pun, because the scale is log-arithmic, and it is about a “log”.
Barcharts and sparklines are selected from a two-dimensional index grid, by time and by rank of number of hits, to what page or image – and from what IP address. What comes out is a classic Wiebel distribution with a long tail. Hover over any barchart and get a tooltip with all the juicy data. I find it all very interesting – and enjoyable.
Thanks for the excellent writing, great article, and it really helped. I just decided to make all links hover differently and changing one line of CSS, the entire site behaves better, including the barcharts and sparklines in the weblog page.
Keep up the good work, let’s have more – a whole-enchilada CSS-driven minimalist data-graphing tool. Or did you already and I missed it?
Have you seen http://interface.fh-potsdam.de/infodesignpatterns/patterns.php ?
31 Reader Comments
Back to the ArticleEric Meyer
I’m curious: how would you mark up and style a table of data where the bars and such need to be interactive, as in clickable links?
Wilson Miner
Jin Y said…
I should have mentioned this in the article itself, but all the techniques I described are in use on EveryBlock, the local news project I’m currently working on. You can see an example the timeline and bar charts in action on this “overview of crimes in Chicago”:http://chicago.everyblock.com/crime/ and the sparklines on this “breakdown of crimes by neighborhood”:http://chicago.everyblock.com/crime/locations/neighborhoods/.
Jin Y
Wilson, the charts look very nice on EveryBlock. However, to further my point from before, what would your approach be if a piechart/scatterchart is to be added to the site?
If from the project planning phase, it’s determined that the the only type of chart the site will ever shown is bar charts that can be done with the css techniques you presented, then that’s fine. (it could very well be the case with the project you are working on). however, for the sake of scalability and consistency, i use a designated charting software instead of css. i’m not dismissing the benefit of css charting, however i feel it’s not efficient to have one set of css charting code, while using a 3rd party software to deal with the others. just my two cents.
Sarven Capadisli
@Eric Meyer:
http://www.csarven.ca/labs/html/horizontal_bar_chart.html
Notes:
:)
Matt McClard
Loved the example, as a newcomer to standards and when and why you should use them this is a great idea. thanks for writing the article I can’t wait to try it out.
Robin Hood
Who prints anymore? Well actually a lot of people still like to print charts out on real paper. These charts don’t print nicely at all…any ideas on how you would handle that?
Stephen Down
Those ideas are absolute genius! This kind of article is exactly why I read ALA – real, practical ideas that I can put into practice :)
The first two charts – the bar chart and the timeline – are a fantastic idea. Using the markup of a table but representing it as a chart by CSS is much better than referencing an image and having to provide alt text or longdesc. My only concern is whether browsers or assistive technologies with inferior CSS capabilites will be able to make sense of it. I hope so!
I’m not so sure about the final example. This seems to be an incredibly complicated way to create a very basic chart. In this case, I think I would just create the charts as images.
Wilson Miner
Robin Hood said…
The example styles are scoped to media=“screen” since I decided it was out of the scope of the article to get into print styles. If you just change the media attribute on these styles to “all” they actually print pretty well, as long as the user has background printing turned on in their browser. Since you can’t rely on that, I’d recommend setting a border on the bars in a separate print style to make sure the bar shows up.
Rich Cornish
Everyone seems to be favoring Draconian semantics and edge cases rather than practical solutions in appropriate situations. Nobody said this approach was going to scale for all cases, but it works well in a lot of them.
I love it. It’s the first design article on ALA that designers can use immediately and with visually pleasing results. Keep up the good work, Wilson.
Joshua Mace
I just noticed that the “Google Chart API”:http://code.google.com/apis/chart/#sparkline allows you to insert “Sparklines”:http://en.wikipedia.org/wiki/Sparklines easily… Yea Google!
Paul Springett
“Flot”:http://code.google.com/p/flot/ – a “jQuery”:http://jquery.com plugin is a fantastically simple and beautiful option for rendering line graphs. The “examples”:http://people.iola.dk/olau/flot/examples provided give a good idea of how rich and powerful it can be too.
Eric Meyer
Nicely done, but unfortunately it doesn’t meet the requirements set forth in the article—namely, having the whole “row” (or “data atom” or whatever) be clickable. You got close, but without either a good deal of JavaScript or a full working implementation of XHTML 2, I don’t think it’s possible to do with valid table markup.
It’s a shame we’re still having to make these kinds of compromises, but there it is.
Mark Caron
This is nicely done. There are some other examples on the web of accessible diagrams and visual aids:
Eric Meyer’s Bar Graph: http://meyerweb.com/eric/css/edge/bargraph/demo-table.html
@ Blaise Kal
And my Venn Diagram (which could be used for a pie chart as well) that I posted back in Sept. of 2007:
http://www.heyokadesign.com/news.asp?post=more-accessible-venn-diagram
Something to think about, however, is that in certain situations the use of the ‘dreaded table’ can have more meaning.
Joe Maddalone
Despite the issue of whether data belongs in a table or not I think this is a great example especially for developers. I deal with very large data sets and markup of this nature gives clients exactly what they want rather than a giant table to endlessly scroll through.
bloggers mosiac
that was gr8 info ,thanks
Sean Goff
I wonder if they can get that programed into my new self-destructing IM service from Bigstring. Then all my needs will be met.
Max Rock
If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure. My new venture http://www.shadoz.com/css-template-07.htm
Timothy Long
Beautifully displayed.
Chris McKee
Nice idea and so simple to implement in php.
John Kelling
you can see it in PHP here:
http://www.chausstran.com/immobilien/stats.php?id=2
jim lemon
please see
http://www.jjlg.com/weblog/
It’s updated daily with web log- statistics about visits to my eponymous site. The use of the term “log” is a pun, because the scale is log-arithmic, and it is about a “log”.
Barcharts and sparklines are selected from a two-dimensional index grid, by time and by rank of number of hits, to what page or image – and from what IP address. What comes out is a classic Wiebel distribution with a long tail. Hover over any barchart and get a tooltip with all the juicy data. I find it all very interesting – and enjoyable.
Thanks for the excellent writing, great article, and it really helped. I just decided to make all links hover differently and changing one line of CSS, the entire site behaves better, including the barcharts and sparklines in the weblog page.
Keep up the good work, let’s have more – a whole-enchilada CSS-driven minimalist data-graphing tool. Or did you already and I missed it?
Have you seen http://interface.fh-potsdam.de/infodesignpatterns/patterns.php ?