Joby Harding presented on pluggable visualization of Moodle datasets using native browser technologies. He discussed visualization tools like RaphaelJS and HTML5 Canvas that allow creating interactive client-side visualizations using scalable vector graphics and JavaScript. These tools enable engaging visualizations for Moodle data without requiring third-party plugins. Harding provided examples of network graphs and social media visualizations created with these technologies.

1. Pluggable Visualisation of Moodle Datasets
Using Native Browser Technologies
Presented by Joby Harding

2. Catalyst IT
 Software Developer at Catalyst IT Europe
 Open Source Software Specialists and
Advocates
 Moodle Partners
 New Zealand, Australia
 Moodle, Totara, Mahara, Koha, Drupal

3. About me
In a previous life...
 Newspaper industry 'Page Layout Technician'
 Freelance design / illustration
 Youth workshop facilitation / Informal learning
More recently...
 SANM Web Development
- User centred / interaction design
 7K Installation / Paris 8

7. What About that Title?
 Data Visualisation – broad sense
 Pluggable – easy integration / dynamic
 Native Browser (Technologies!)
- Web Standards Based (non 3rd party)
- Client Side

8. Why Client Side?
Already (server-side) visualisation tools
 Statistics graphs
 Administration bias
Client side non-static, engaging
 JavaScript-based
 Animation / potential for interaction

9. SVG
 Scalable Vector Graphics
 Way of describing
geometry mathematically
 Can be scaled without
losing resolution
 XML based
 Some animation
 W3C specification
Images by Dmitry Baranovskiy www.raphaeljs.com

10. An exciting example...
….compatibility?

11. RaphaelJS www.raphaeljs.com
 JavaScript library
 Interface to drawing
using SVG
 Cross-browser
support (IE6+)
 Compatible with other
JavaScript libs
 DOM manipulation

13. Wiki Contributors Node Map
www.mattryall.net

14. Interactive Analytics
www.raphaeljs.com

15. HTML5 Canvas
 Part of the forthcoming
HTML5 standard
 Element which provides
JS drawing context
 Pixel-coordinate based
 Animation / interactivity
not 'included'
www.developer.mozilla.org

16. www.developer.mozilla.org

17. ProcessingJS
 Sister project to
Processing
 Renders Processing
'sketches' into canvas
 Leverage Processing's
library of functions
 Can be combined with JS

19. fizz.bloom.io – Social Networks

22. Any questions?
Joby Harding
Catalyst IT Europe
www.catalyst-eu.net
joby.harding@catalyst-eu.net
info@catalyst-eu.net