The Hacker Within Swinburne

Visualisation using D3js Data-Driven Documents (Javascript library)

April 29, 2015

Where & When

Advanced Manufacturing and Design Centre - Room 206. Wednesday 29th April from 1-3pm.

Samara Neilson

Samara is Swinburne Research’s Data Coordinator and co-developer of the SR Analytics and ERA system for Swinburne Research. Both of these incorporate D3js.org data visualisations of information such as publication data, research grants and income etc.

Visualisation using D3js Data-Driven Documents

Samara will lead an introductory tutorial on using D3js.org for data visualisation. This will include a short into to Javascript. Hopefully by the end of the session everyone will have created two D3js visualisations.

About D3js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

The trickiest bit is getting your data in a format that works for D3js.org and learning a bit of Javascript. If you want to get started, Mike Bostock - the creator of D3js - has some examples you can work through. Samara suggests starting with bar charts.

Also take a look at this blog post on Manipulating data like a boss with d3, and this one on How Selections Work.

What we worked on

Samara put together a really great website for this session: http://evilangelpixie.github.io/d3js/. Incidentally this was created using GitHub, poole and Jekyll. We’ll show you how to do this next week. Samara started off by talking a little bit about the history of D3js and how D3 code is structured. Her tutorial also includes the basis of what you need to know to get started and where you’re likely to face hurdles. We then played with code for a D3js Bar Chart using CodePen; a browser based playground with which to experiment and helpfully separates the code into it’s three component elements, the HTML, the CSS and the JavaScript.

It was also really great to have Nathan Faggian participate from Microsoft. Nathan started out in academia (Computer Science) at Monash and has since worked at the Florey Neuroscience Institute and the Bureau of Meteorology. You can check out his career path on LinkedIn and follow him on Twitter: @nfaggian.

As usual there was a lot of lively discussion about various things. Links to new tools and blogs have been added to the list of resources.

Attended by

Share

Discuss

comments powered by Disqus