Chart Library Research Outcomes
The recommended path forward is as follows:
- Use the well-established open source D3 data-driven SVG visualization library as the starting point of the work.
- Create appropriate Infusion-based components for the chart types we wish to implement, along with appropriate helper functions for working with D3 under Infusion's paradigm.
- Move forward with the building of the demonstration example (pie chart authoring) with this approach.
The rationale for this is:
- While it had been hoped that a higher-level charting library might be found to abstract away some of the complexity of drawing and working with HTML charts, feelings after initial exploration and research are follows:
- D3's own paradigms for managing data and visualizations are not that difficult to work with, once some initial leaps of understanding are made
- Higher-level frameworks, whether based on D3 or not, mostly present canned charts, and much of what we want to achieve (sonification integration and maximum accessibility) would require working at a lower level or writing our own extensions anyway
- The overall complexity of integration with Infusion will be reduced by incorporating a single lower level framework
- While the immediate issue at hand is the creation of charts, longer-term the problem domain seems to be that of building maximally accessible web visualizations. The sooner we increase our understanding of this problem domain and begin building these features into Infusion, the better (while, obviously, also solving the issue at hand)
Some comments on this approach in light of the criteria below:
- License: fully open license, non-contagious: https://github.com/mbostock/d3/blob/master/LICENSE
- Support and community: mature, well-established community; many people currently working with D3, including building their own libraries atop it
- Documentation: extensive documentation and examples available both on D3 wiki itself (https://github.com/mbostock/d3/wiki) and on wider web.
- Accessibility: sufficiently flexible to allow us to build maximum accessibility for SVG-based charts into our components
- Technical criteria:
- SVG vs. Canvas:
- On the whole, SVG seems to be favourable for building accessible infographics, especially for our major criteria of keyboard-only access to individual elements
- tabindex and focusable for elements is officially supported in the SVG spec, works well in Chrome and Safari, and is the subject of an outstanding Firefox bug we have inquired into
- Tests: extensive test suite: https://github.com/mbostock/d3/tree/master/test
- Build scripts:https://github.com/mbostock/d3/tree/master/src - aspects could be isolated if desired
- Size: 55k minified & gzipped
- Browser support: dependent on browser's support for SVG: http://caniuse.com/#feat=svg
- Hooks into chart behaviour: D3 itself does not have built-in charts, but provides extensive helper functionality and data binding for easing the building of custom charts
- Extensibility of charts: see above comment
- Performance: largely dependent on browser's SVG performance; conventional wisdom seems to be SVG performance degrades relative to Canvas above 10,000 nodes, but we don't expect to be dealing with anywhere near that many for the authoring tool
Criteria
- License
- Support and community
- How reactive / active?
- Forums, places to ask questions
- Active development
- How many people actually work on core?
- Documentation
- Accessible criteria
- Alternate representations
- Navigating aspects of chart with keyboard only
- Screen reader behaviour
- Technical criteria
- Configurability & flexibility
- Separation of concerns
- chart data is JSON
- chart configuration and behaviour are JS
- chart appearance is CSS)
- SVG vs. Canvas
- Tests! Do they have them?
- Build scripts - can we isolate aspects of the library?
- Size of library
- Supported browsers
- Should there be a difference in browser targets between authoring vs embedding?
- Hooks into chart behaviour?
- Extensibility of charts - can we easily derive new types of charts with different behaviour?
- Performance
Specific Features We'd Like to Support for Round One (pie chart) - spike explorations
- Via designs at https://www.dropbox.com/s/j8s86ix9wgxrsqt/CA%20Tool%20%5BVersion%205%5D.pdf?dl=0
- Dynamically update chart based on data entry in other areas
- Textures / high contrast
- Highlight slices & other interactive behaviours with aspects of chart
- Including keyboard access to aspects of chart
- Add legends
- Expose user options (turn off animations, etc)
- High configurability of chart behaviour and appearance
- Separation between slices
- Isolation of slices
- Placement of labels, size of labels, presence of labels
- Via discussions
- Edit in chart
- Interact with chart in a selector/scrubber manner
Possibilities
D3-based
Other
Background Reading
D3 library
D3 & jQuery interoperability
Using D3 for canvas drawing
SVG accessibility