Visualisation libraries

The three families of libraries (low-level, declarative, mapping) and the mechanisms they share: the scale, the axis and the binding of data to marks.

28 cards
5 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
The numbers
Scenarios

A few cards from the deck

D3: what is it?
Show the answer
A low-level JavaScript library: it provides scales, axes and the binding of data to page elements, but no ready-made chart.
Anything is possible, but each chart is built by hand: it is the right choice for a custom chart, not for six standard charts.
What does this configuration draw?

```js
new Chart(ctx, {
type: 'bar',
data: {
labels: ['T1', 'T2', 'T3', 'T4'],
datasets: [{ label: 'Ventes', data: [12, 19, 8, 15] }]
}
});
`
- Four bars in a single series named Ventes
- Four series named T1 to T4, one bar each
- A single bar of height 54, the sum of the four sales
- A line joining four points of the Ventes series
Show the answer
Four bars in a single series named Ventes
type chooses the mark, labels gives one label per position on the axis, each element of datasets is a series whose data provides one value per label.
A scale turns a value of the … into a value of the ….
Show the answer
A scale turns a value of the domain into a value of the range.
The domain lives in the data world (euros, degrees), the range in the screen world (pixels, colours).
Chart.js: what is it?
Show the answer
A declarative library: you describe the chart in a configuration object (type, labels, series) and it draws it on a canvas.
type: 'bar' with labels and a series is enough for a bar chart: you save time, at the cost of drawing freedom.

Study this deck