SVG Accessibility/School Graphs

From W3C Wiki
Jump to: navigation, search

The sort of thing that school kids might understand.

Basic Bar, Line and Pie charts

UC-3graphs

3graphs.svg on github

a horizontal bar chart and two pie charts

3 graphs. A horizontal bar chart and two pie charts. One of the Pie charts uses the same categories as the Y axis of the bar chart - genres of writing - but the values don't match. The other Pie chart uses a few US states for categories, and otherwise appears to be unrelated.

UC-Bar

bar.svg on github

bar chart
. A horizontal bar chart, with the Y axis in 4 blocks, each containing multiple colour-coded bars (with a legend identifying the meaning of the colours, and the x axis being numeric revenue figures).

UC-Area

area.svg on github

line/area graph
A line graph, with abstract axes - X axis is A to H, Y is numeric, and perhaps the area under the graph is significant. We should get a better example.

Multi-dimensional information

UC-ClusterBar

clusterBar.svg on github

A grouped bar chart

A grouped bar chart. The Y axis is numeric, describing revenue, the X-axis contains 4 clusters of 5 bars each. The clusters represent the source of orders (web, phone, etc) groups, the individual bars, colour coded and identified by a legend, represent different types of product.

Good Practice examples

Separation of different types of information
Visually the clusters are well-separated, which helps to interpret them "at a glance", unlike some other bar graph examples we have. Having the clusters run together makes it harder to identify when a given cluster begins and ends.

UC-ClusterBar3levels

clusterBar3levels.svg on github

a bar chart with multiple layers of information on the X axis

Another example of a bar chart with multiple layers of information. The Y axis is numeric, the X axis is divided first into male and female, in each part that is divided into yes and no, each of those is divided into web and phone, and each of those is divided into 2 types of product, with bars in 4 colours representing the two product groups differently for web/phone but repeating across the further divisions.