<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>

    <title>A List Apart: Comments on: Accessible Data Visualization with Web Standards</title>
    <link>{url_title_path=articles/}</link>
    <description></description>
    <dc:language>en</dc:language>
    <dc:rights>Copyright 2012</dc:rights>
    <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    <admin:generatorAgent rdf:resource="http://expressionengine.com/" />




    <item>
      <title>Posted by: Blaise Kal</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#1</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#1</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Tim Wright</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#2</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#2</guid>         
	  
      <description><![CDATA[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]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Tim Wright</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#3</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#3</guid>         
	  
      <description><![CDATA[I'm not sure why I made my name the subject of that post... sorry about that]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Alexis Deveria</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#4</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#4</guid>         
	  
      <description><![CDATA[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. ]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Christoph Päper</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#5</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#5</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Sarven Capadisli</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#6</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#6</guid>         
	  
      <description><![CDATA[http://www.alistapart.com/d/accessibledata/example-barchart.html

is tabular data.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Jeffrey Zeldman</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#7</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#7</guid>         
	  
      <description><![CDATA[Sarven Capadisli said:

bq. example-barchart.html is tabular data.

Saren, good point, but from paragraph 6 of the article:

bq. 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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: John Cox</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#8</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#8</guid>         
	  
      <description><![CDATA[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. :)]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Sarven Capadisli</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#9</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#9</guid>         
	  
      <description><![CDATA[@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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Jin Y</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/#10</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#10</guid>         
	  
      <description><![CDATA["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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by:  Eric Meyer</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#11</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#11</guid>         
	  
      <description><![CDATA[bq. ...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.

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?]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Wilson Miner</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#12</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#12</guid>         
	  
      <description><![CDATA[Jin Y said...

bq. 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/.
]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Jin Y</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#13</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#13</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Sarven Capadisli</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#14</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#14</guid>         
	  
      <description><![CDATA[@Eric Meyer: 
http://www.csarven.ca/labs/html/horizontal_bar_chart.html

Notes:
* Tested only in Firefox
* 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)

:)]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Matt McClard</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#15</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#15</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Robin Hood</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#16</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#16</guid>         
	  
      <description><![CDATA[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?]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Stephen Down</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#17</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#17</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Wilson Miner</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#18</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#18</guid>         
	  
      <description><![CDATA[Robin Hood said...

bq. 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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Rich Cornish</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P10/#19</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#19</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Joshua Mace</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#20</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#20</guid>         
	  
      <description><![CDATA[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!]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Paul Springett</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#21</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#21</guid>         
	  
      <description><![CDATA["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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by:  Eric Meyer</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#22</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#22</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Mark Caron</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#23</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#23</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Joe Maddalone</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#24</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#24</guid>         
	  
      <description><![CDATA[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.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: bloggers mosiac</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#25</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#25</guid>         
	  
      <description><![CDATA[that was gr8 info ,thanks]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Sean Goff</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#26</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#26</guid>         
	  
      <description><![CDATA[I wonder if they can get that programed into my new self-destructing IM service from Bigstring.  Then all my needs will be met.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Max Rock</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#27</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#27</guid>         
	  
      <description><![CDATA[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]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Timothy Long</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#28</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#28</guid>         
	  
      <description><![CDATA[Beautifully displayed.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: Chris McKee</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P20/#29</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#29</guid>         
	  
      <description><![CDATA[Nice idea and so simple to implement in php.]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: John Kelling</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P30/#30</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#30</guid>         
	  
      <description><![CDATA[you can see it in PHP here:
http://www.chausstran.com/immobilien/stats.php?id=2]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>

    <item>
      <title>Posted by: jim lemon</title>
	  
	      <link>http://www.alistapart.com/comments/accessibledatavisualization/P30/#31</link>
      <guid>http://www.alistapart.com/comments/accessibledatavisualization/#31</guid>         
	  
      <description><![CDATA[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 ?]]></description>
      <dc:subject></dc:subject>
      <dc:date>2012-05-22T12:00:48+00:00</dc:date>
    </item>


    </channel>
</rss>
