Brunel 2.0 Preview

We’ve been quiet on this site for a little while; few examples as we’ve been working on new features for our upcoming 2.0 release in August. Here’s the current version of the release notes, showing what new features will be added:


2.0 Release Notes

Accessibility

Brunel is now accessible. By specifying the accessibility flag in BuilderOptions
(also by using -accessibility as n option for the command-line tools), then Brunel generates
SVG with Aria roles and labels so as to allow aria compliant screen readers to read the
content of items. The content is currently in English only. Veuillez nous excuser.

Brunel adds region roles to major areas, such as elements (in a multi-element chart),
charts (in a multi-chart visualization), axes and legends. This should allow the user to use
a compliant navigation system to navigate through the major blocks and arrive at the one you
desire rapidly.

The system has been tested with Apple’s Voice Over technology, but we are actively looking
for feedback on this feature, particularly how we can improve it to make it more useful for
all people, rather than merely compliant.

High-contrast views can be mostly achieved by use of a custom-designed style sheet. This is
not an area we have addressed in this release.

Axes

Gridlines

Gridlines have been brought back in Brunel, and additional syntax added for them.
Previously gridlines were generated by default, but were styled to be invisible.
Also, they didn’t work well …

The new way to request gridlines is to use a grid modifier on an axes() command
to request them, for example:

x(summer) y(winter) axes(x:grid, y:grid)
x(summer) y(winter) axes(x:grid:50, y:grid)
x(Summer) y(Population:log) axes(x, y:grid)

Standard CSS styling applies to the grid lines; you can set it in the style sheet you use,
or define it either for both sets of gridlines, or individually:

x(Summer) y(Population) axes(x:grid, y:grid) style('.grid {stroke:green}')
x(Summer) y(Population) axes(x:grid, y:grid) style('.grid{opacity:1}
   .grid.y {stroke-dasharray:5,5} .grid.x {stroke-width:40px; opacity:0.2}')

Alignment

label-location is now supported on styles for axis title locations, and can be used to place the
axes titles relative to the axis. We have also improved support for large title fonts.
Below is an example of this in operation:

x(Region) y(dem_rep) transpose tooltip(#all)
style('.axis .title { fill:red; label-location:right; font-size:60px }')

Padding and mark sizes

We now support padding in the CSS for text elements associated with axes and legends.
padding, padding-left, padding-right, padding-top and padding-bottom are all supported,
with standard units EXCEPT that we do not support percentage padding.

Here is an example of the use with axes:

bar x(Winter) y(#count) sort(#count) tooltip(#all) bin(Winter)
style('.axis .title {fill:red;label-location:left; padding-left:1in}
    .tick{fill:blue;padding:10;padding-right:50px}')

We also now use the css size for the tick mark (.tick line) to determmine its size.

The following Brunel is long and ugly, but shows all the styles in action:

x(winter) y(summer) style('.axis.y .tick text{fill:red;padding-right:10px}')
title('Ugly Style test')
style('.axis.x .tick text{fill:blue;font-size:1cm; padding:2mm} .axis .tick line{size:-5mm} ')
style('.axis .title {label-location:left;font-size:20px}')
style('.axis .title {label-location:left;font-size:20px;font-style:italic;padding-left:1in}')
style('.header {fill:red;font-size:40px;padding-bottom:50px;label-location:right}')

Styles

Elements that have been selected now have the css class ‘selection’ defined for them.
This allows you to use style definitions for custom display of selected elements, as
in the below:

point x(Longitude) y(Latitude) color(region) size(population:1000%)
style('.selected {opacity:0.5; stroke-opacity:1; stroke-width:2; stroke-dasharray:2 2}
.element {opacity:0.2}') interaction(select:mouseover)

Labels for elements that are selected also have the selected class defined, so you
can modify selected labels’ appearances using styles. In this version, we only
support one position modifier — vertical-align. If this value is set to a pixel value
(such as 20px or -30px) it will move the text the indicated amount AFTER placement

Here is a long sample with a lot of styling going on for text:

data('sample:whiskey.csv') bar x(category) y(#count) transpose
size(#selection:[20%, 80%]) sort(#count:ascending) label(category) axes(y)
style('.label.selected {fill:yellow; text-shadow:0px 0px 4px black; vertical-align:18px; text-transform:uppercase}')
style('label-location:outside-top-right; text-align:end; padding:1px')
interaction(select:mouseover)

Another modification was done to how we hand overlapping data labels; previously they were
removed from the display, but now they are given the class overlap which our default
style sheet hides, but you can modify to treat any way you want. For example:

data('sample:whiskey.csv') point x(Age) y(Price) label(category:5)
style('.overlap {visibility:visible; text-shadow:none; opacity:0.2}')

Axis ranges

The initial range of a numeric field can be set by defining a range for the x or y
command, much like a transform. Examples are:

point x(Longitude:[-100, -80]) y(Latitude:[35, 45])

Guides

We have added a new feature to allow an element to define a guide. This is described more fully in
the complete documentation, but here is an example showing its use:

x(winter) y(summer) + guide(y:40+x, y:70, y:'70+10*sin(x)')
style('.guide1{stroke:red} .guide3 {stroke-dasharray:none}')

Interactions

A new animate command has been added that provides an interactive control to animate a visualization over
the values of a continuous field. As part of this, labels on continuous filters have improved (particularly for date fields).

The interaction(select) command and also the new callback event command interaction(call:func)
can now take an event name parameter snap that allows interactivity to be fired when the
mouse is near a data item on screen

interaction(call:func) has been added; the ability to call bak to a javascript function to handle
events in special ways. A new page in the documentation describes the API.

interaction(panzoom) can now take options x, y, xy, auto as well as none which allow
detailed control of how panning and zooming operate

Notebooks

R Notebooks (IRkernel) no longer require use of a web service. Simply install Brunel Visualization directly into R and enjoy.

Minor fixes

  • Wrapped text in Firefox browsers has been improved to compensate for the difference in
    how FF calculates text height.