1 Untitled

I’d like to see how you’d solve a pie-chart ;-)

Question: why not ordered list for the charts sorted by value? And have you considered using definition lists? I think a definition list would show the relation between data and value, where your spans have no semantics.

posted at 12:11 pm on April 08, 2008 by Blaise Kal

2 Tim

Unless the values are in a specific order (like chronological or ranking), the unordered list is accurate. When I’m explaining that to someone I always ask them “If I scramble the order of these list items, does it make a difference?”.

I made a PHP based graph (styling a UL) similar to this a little while ago: http://www.csskarma.com/lab called “dynamic CSS graph and table”.

I like this technique; It takes a lot of the multidimensional table attributes like ‘axis’ and matching ‘headers’ to ID’s out of the equation, and should leave you with some cleaner code to deal with.

my2cents

posted at 12:54 pm on April 08, 2008 by Tim Wright

3 Re:

I’m not sure why I made my name the subject of that post… sorry about that

posted at 12:57 pm on April 08, 2008 by Tim Wright

4 Canvas/SVG?

At the risk of sounding whiny, I think it would have been nice to mention using canvas and SVG as alternative methods for data visualization (instead of just Flash).

Several libraries already exist for this purpose, and although they may not all provide full cross-browser support, I would personally prefer to use them over Flash.

posted at 01:32 pm on April 08, 2008 by Alexis Deveria

5 Meter

This reminds me a bit of HTML5’s ‘meter’ element: http://www.whatwg.org/specs/web-apps/current-work/#the-meter

I dont like the markup, though: every ‘span’ is one ‘span’ too much. If only ‘display: block’ for the table elements worked reliably across browsers.

posted at 01:43 pm on April 08, 2008 by Christoph Päper

6 Poor markup

http://www.alistapart.com/d/accessibledata/example-barchart.html

is tabular data.

posted at 01:49 pm on April 08, 2008 by Sarven Capadisli

8 Pie Charts

I built a javascript pie chart some years ago. Nice to see it is still being used:

http://qsuper.qld.gov.au/public/members/member_services/calculators/tools/investment_choice.asp

It degrades nicely as it simply disappears. :)

posted at 02:01 pm on April 08, 2008 by John Cox

9 Faulty approach

@Jeffrey Zeldman:

I disagree. First of all, the nature of that content as a whole is best fit for tabular data. Whether one wishes to navigate through that information or not is independent.

The main problem that I see here is dumping the content in chunks; building a navigation first and then adding new markup to fit into the existing markup.

This approach is wrong in my opinion because the content need not be placed in pieces.

Look at the full content you want to place in a document and then find the most suitable HTML elements to encapsulate that data.

posted at 02:22 pm on April 08, 2008 by Sarven Capadisli

10 nice, but...

“Obviously, these charts are simple, and these techniques aren’t the best option in every situation. When you need semantically rich markup—when you have a large set of data or a lot of categories to compare, nothing beats a table. For fancy visualizations like scatterplots and 3D pie charts, you might choose some kind of server-side tool to generate images. For extra interactivity and animation, Flash is probably the way to go.”

i enjoyed this entry. finally a ALA article without philosophical fluffs in a while.

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. as you said above, for more complex charts (piecharts, interaction, etc) it may require an official charting method, may it be server side or client side.

in my experience building web apps, or public sites, complex charts, or interaction is always required. so it’s hard to do charts in pure css alone. and building a set of code for css only, and another for more complex charts is just not efficient. so i most likely will end up doing charts the non css way, at least for now.

posted at 05:03 pm on April 08, 2008 by Jin Y