D3 for Information Visualisation and Design

Design Lab, University of Sydney

Sarkar, S. and Hussein, D.A., 2017, D3 Tutorials for Information Visualisation Design Studio, University of Sydney.
Email: somwrita.sarkar@sydney.edu.au, dhus4848@uni.sydney.edu.au

D3 is a JavaScript library based on web standards that provides the wonderful capacity to "bind" or "join" data to HTML page elements. This is why it is called D3, as in, Data-Driven-Documents. We think of D3 primarily as a visualisation tool. But, a more primary way of understanding this would be to see that it gives us the ability to tie in our data to DOM (Document Object Model) elements. Thus, the data now has the power to "drive" or "manipulate" the structure of your HTML document. We can use D3 for not only data visualisation, but also UX visualisation. Here is an UX visualisation example.

The primary resources that were used to develop these tutorials are:

A principal aim behind developing these tutorials is to help bring together the coding and development aspects with design studio content, so that students of design may find themselves enabled to translate and iterate between design development, ideation, wireframing, mock-ups and prototyping on the one hand, and developing parallel code development skills and realising their designs through code on the other. This is the first iteration, but we hope that in the coming years we will be able to build on these tutorials and studio plans to achieve this successfully!

OK, let's get started!