Pluggable Visualisation of Moodle Datasets

Using Native Browser Technologies

Presented by Joby Harding

Catalyst IT

Software Developer at Catalyst IT Europe

Open Source Software Specialists and

Advocates

Moodle Partners

New Zealand, Australia

Moodle, Totara, Mahara, Koha, Drupal

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

What About that Title?

Data Visualisation – broad sense

Pluggable – easy integration / dynamic

Native Browser (Technologies!)

- Web Standards Based (non 3rd party)

- Client Side

Why Client Side?

Already (server-side) visualisation tools

Statistics graphs

Administration bias

Client side non-static, engaging

JavaScript-based

Animation / potential for interaction

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

(Images by Dmitry Baranovskiy)

www.raphaeljs.com

An exciting example...

….compatibility?

RaphaelJS www.raphaeljs.com

JavaScript library

Interface to drawing

using SVG

Cross-browser

support (IE6+)

Compatible with other

JavaScript libs

DOM manipulation

Wiki Contributors Node Map

www.mattryall.net

Interactive Analytics

www.raphaeljs.com

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

www.developer.mozilla.org

ProcessingJS

Sister project to

Processing

Renders Processing

'sketches' into canvas

Leverage Processing's

library of functions

Can be combined with JS

fizz.bloom.io – Social Networks

Any questions?

Joby Harding

Catalyst IT Europe

www.catalyst-eu.net

joby.harding@catalyst-eu.net

info@catalyst-eu.net