Data and Visual Analytics — Data Visualisation for Web (D3)

6 min readFeb 12, 2023

This article serves as my personal notes for the course CSE 6242 Data and Visual Analytics taken at Georgia Tech University (GaTech) during Spring 2023.

This course will introduce you to broad classes of techniques and tools for analysing and visualising data at scale.

Its emphasis is on how to complement computation and visualisation to perform effective analysis. We will cover methods from each side, and hybrid ones that combine the best of both worlds.

The lesson is about Data Visualisation for Web (D3). You can find all lessons here.

Introduction

D3 is a popular way for creating visualisation for the web. Use D3 if your tool will benefit from interactivity.

D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

This is a great choice for web based graphics.

Prerequisite understandings summarised

D3 consist of many parts running in browser, such as HTML, JS, SVG and CSS etc.

Quick summary on JS — you should invest in understanding this in order to use D3. Javascript is a functional programming style.

SVG is a mathematical formula used to generate smoother looking graphics.
SVG is a markup.
Note graphics on SVG uses the origin as (0,0) at the top left of a browser — this is an unnatural co-ordinate system.
The SVG element is an overarching canvas.
If you want to style or position a group of elements then use the g element to provide the same style for the same object repeated in a group.

CSS can be used to select items and then assign any attributes to them.

How to use D3

When creating visualisations — you need to first import the D3 library.
Note we also created a div container with id = “vis”

2. Add SVG elements to the div container.

3. Now we can load data. JS will load data in parallel, so we will apply a callback.

4. Visualise the data using d3.

D3 transitions and dynamic data pattern

Enter, Update, Exit

This is a paradigm used in D3 to assign visual elements to data points. The pattern used is:

Select a group of elements (example circles)
Assign data to the group, based on when the data is loaded.
Enter: This will create a new element for each data point.
Update: Set attributes of the elements based on the data.
Exit: Remove elements that dont have any more data

In the below example assume we do not have any data. When we call .data for the first time what is happening?

In the Enter phase we see [1,2,3,4] is loaded = Enter adds new data points
In the Update phase we look at all the elements [1,2,3,4] = represents what is the state of the data = Update shows the state of the data after Enter or Exit
In the Exit phase we want to remove nothing therefore exit is a empty array = Exit shows the data we want to remove

Example of data loading and altering using D3

A typical program that implements Enter, Update, Exit Template.
We first create a group on element with id vis. We then apply the data with enter. There after make changes to update and end with a exit. remove()

Tip its better to use .group explicitly and not chain the .group

Data Key Functions

When .data is called in D3 the index of the data is assumed to the the key. This is not always the best way to reference your data.
You should analyse your data and select a relevant key and then set it by passing a function which sets the key into .data()

Example of setting an index on your data

Visual aspect /Element alteration

.attr()
This command allows you to change attributes on a element. The kinds of attributes you may be interested in are:

element height
element width
x, y
fill

.text()
This allows you to set the x and y values as well as styles of the text. The text anchor is how to place a text, start, middle or end.

.style()
This is used for styling properties. Similar to css style.
You can change a group of elements based on data points.

Classing using .classed
This is when we need to distinguish between different visual elements.

Functions

Scales is used to transform a range of input values into a range of output values. This can be used to scale a size of an element. Example the size of a circle.
Scales can be linear, ordinal etc.

Linear Scale

Linear scale define the range of input of the domain. A scale can be created based on the domain and range. and then an .xscale() can be applied.

Min/Max

.min(data) -> number
Get the minimum value from the data. We could pass function to select a specific attribute in data. Example

var min = d3.min(data.map(function(d){ return d.age;})

.max(data) -> number
Get the maximum value. You can also pass a function to get the max of a specific attribute in data.

.extent(data) -> [number, number]
Get the range of min and max from the data.

Ordinal Scales

Ordinal Scales will allow you to apply a colour to categorical data.

Visual Helper Functions — Axes

Besides scales which transform data — D3 also has visual helper functions; axes.
This allows you to scale, orient, ticks

Handling Dynamic Data

Dynamic data is common especially handling data that is updating real time.

E-U-E pattern

Using the E-U-E pattern we can create a redraw function and call it when the data is updated.
The below example shows new data entering redraw.

Transitions

This allows movement on visual elements and allow animations to be created. It can automatically interpolate new values.
The transition allows delay and specify dutation as shown below