SVG Accessibility/Brunel Visualization Language

From W3C Wiki

Brunel Visualization Language

Brunel Visualization Language (Brunel) is an open source project that creates interactive charts. Brunel Visualization Language is a high level language that allows develops to create complex charts quickly, intuitively with a single line of commands. A developer can modify an example Brunel chart and have it running in their web application in a few minutes. Brunel currently works on the web and in Jupyter (iPython) notebooks. There is an IBM bluemix service for Brunel.

The Brunel project provides working Brunel visualizations as a gallery of samples that you can modify and click a button to get a HTML snippet for the chart you are working with. You can paste that snippet in a web page and have a live interactive Brunel visualization. The GitHub project uses d3 for rendering SVG. In the future other renderers may be supported. Brunel is available on GitHub.

If Brunel becomes widely accepted, it may impact how we want to configure graphics accessibility since developers using Brunel don't have the ability to influence markup of the produced SVG.

Availability of Brunel Visualization Language

Brunel Visualization Language is available on GitHub. And can be used on the web and in Jupyter (iPython) notebooks.

Writing a visualization in Brunel

Brunel syntax is concise. Developers only use commands. Below are a few chart definitions from the Brunel gallery and tutorial.

A scatterplot
x(winter) y(summer)
A pie chart with legend
bar color(region) y(#count) polar stack
A heatmap with tooltips
data('http://willsfamily.org/files/vis/data/whiskey.csv') treemap x(country) y(category) color(country) size(#count) sort(#count) label(category) tooltip(#all)
Minard's famous visualization of Napoleon's march to Moscow
This visualization has two vertically aligned charts that share the x axis (longitude). The upper chart has a path element where the width of the path represents the number of French troops, the color of the path shows direction (forward, retreat), the path is split and cities are labeled along the path. The lower chart has temperature on the y axis, and a line chart with labels of dates and temperatures.
data('http://willsfamily.org/files/vis/data/minard-troops.csv') path x(long) y(lat) color(direction) size(survivors:0:1250) split(group) axes(none) legends(none) at(-10, 0, 112, 80) style('stroke:none; fill-opacity:1') + data('http://willsfamily.org/files/vis/data/minard-cities.csv') text x(long) y(lat) label(city) style('fill:black;font-family:Times; font-size:12pt') | data('http://willsfamily.org/files/vis/data/minard-temp.csv') line x(long) y(temp) at(0, 60, 110, 100) style('stroke:green') + data('http://willsfamily.org/files/vis/data/minard-temp.csv') text x(long) y(temp) label(temp, '°C ', month, ' ', day) style('font-family: Times; font-style:italic; fill:black')

Including a Brunel visualization in a web page

The Brunel project provides edit capabilities and a snippet tool. A developer can edit a visualization, create a snippet for the visualization and paste the snippet in their web page.

Here is the snippet for the heatmap.
<iframe style= 'margin: 0; margin-top: 40px;width: 1000px; height: 800px; padding: 0px; overflow: hidden' frameborder='0' seamless='seamless' src=http://brunel.mybluemix.net/brunel/interpret/d3?brunel_src=data('http%3A%2F%2Fwillsfamily.org%2Ffiles%2Fvis%2Fdata%2Fwhiskey.csv')%20treemap%20x(country)%20y(category)%20color(country)%20size(%23count)%20sort(%23count)%20label(category)%20tooltip(%23all)&width=980&height=775></iframe>
The picture below shows a screenshot of the Minard visualization (Napoleon's march to Moscow) with the snip tool and edit area.

Accessibility of Brunel Visualizations

The Brunel Visualization Language provides a high level language for developers to create interactive visualizations quickly and easily. Brunel does not provide a way for developers to add accessibility. Accessibility for Brunel charts will have to be baked in.

Commands

Brunel Visualization Language uses commands to create charts and specify interactivity. However, commands do not provide a way for a developer to supply markup or pass through information.

Language Design

Brunel Visualization Language provides a high level language consisting of commands. One or more commands define a visualization. Commands follow the concepts in the Grammar of Graphics. Here are some sample commands.

transpose
x(summer)
label(winter, summer)

Because commands align with the Grammar of Graphics, it may be possible to automatically generate chart descriptions from the Brunel and data. Fred's taxonomy is based on the Grammar of Graphics and maps well to Brunel and may be easier to get populated in the output SVG, than alternative taxonomies.

Interactivity

Brunel has default interactivity and commands to add interactivity. However, interactivity is currently mouse only. Selection and filter commands can affect a secondary chart where by selecting a data item in one chart can cause the second chart to change. For instance, selecting a bar in a bar chart causes a scatter plot to only include (show) data from the selected bar.

Markup

Developers using Brunel Visualization have no ability to markup a generated visualization.

Style

The style command allows a developer to specify SVG CSS style information. It uses !important to override defaults. This can prevent a users high contrast stylesheets from providing desired accommodations like large fonts.

Stylesheets

Users should be able to switch stylesheets. This may be beneficial to low vision and colorblind users.