D3

Question 1

D3

Answer 1

= Data-Driven Documents

A library that provides a mechanism for connecting arbitrary data to documents (DOM elements), allowing the appearance and behaviour of the documents. to be driven by the data.

VISUALISATION is provided by HTML, CSS, or SVG, D3 focuses on the DATA. It is actually a collection of integrated JS tools for manipulating data structures necessary to create data visualisations.

Question 2

How does D3 work?

Answer 2

DATA drives documents that display D3 visualisations. By ADDING, CHANGING, or REMOVING data, you directly affect the way your chart appears on the screen.

Question 3

Typical D3 Script

Answer 3

1. selects HTML or SVG elements
2. binds them to individual data items
3. removes, updates, or appends graphical elements automatically, when necessary.
   * individual data items can be accessed in callbacks in the methods that set values for styles, attributes, and transforms.

Question 4

D3’s actual data visualisation part

Answer 4

Contains tools that are applied to previously selected DOM nodes and data:

• layout generators
• scales
• axis generators
• map projections
• shape generators
• colour scemes

Question 5

What does d3’s .data() do?

Answer 5

Sets the data to drive creation of the elements.

Question 6

What does d3’s .enter() do?

Answer 6

Creates a selection to add elements per data item.

It binds the data to the selection of elements creating the array of placeholders of the same size as the data array.

Question 7

When is d3’s .transition() called?

Answer 7

Before the attributes and styles that are to be changed.

Question 8

Which d3 modules are enough to create an animated interactive bar chart?

Answer 8

• selection

- transition

Question 9

What categories of d3 modules exist?

Answer 9

Modules for:

1. data manipulation
2. document manipulation
3. interactivity and animation
4. colours
5. asynchronous operation and packaging
6. 2D geometry
7. spherical geometry and geographic maps
8. layouts

Question 10

When to use canvas in D3?

Answer 10

Use it in all or part of your app

-> if you have memory problems due to excessive objects created in the DOM

Question 11

HTML canvas how to

Answer 11

1. setup the graphic context (practically all the canvas API consists of methods and properties called from the graphic context.

const ctx = canvas.getContext(‘2d’)

2. before drawing, you set properties such as font, fillStyle, strokeStyle

ctx. fillStyle = ‘red’;
ctx. lineWidth=’10’;

3. then you fill or stroke rectangles and add arbitrary paths.

ctx. fillRect(50,50,50,50);
ctx. strokeRect(50,50,50,50):