D3.js

D3.js

Introductie

In het weekend van de eerste week ben ik begonnen met mij al lezend oriënteren op wat d3 is/inhoudt, voorbeelden bekijken en de mogelijkheden van deze library vast verkennen.

De eerste dag van de tweede week kregen we een klassikaal college van Laurens; introductie van d3.

Vergelijking Canvas en SVG

{tl;dr, wat hiervan geleerd?}

SVG

dingen getekend; welke?

Oefenopdracht SVG

We kregen de opdracht zelf een svg te schrijven; ik heb snel het hoofd van Baymax geprobeerd te maken

Voorbeelden d3.js-visualisaties

D3.js

Scale

Array

Selection

Working with d3

D3.js tips&tricks

Dinsdag kregen we eerst een college van Danny over d3; tips&tricks.

Design

Er zijn een aantal standaardregels om te volgen wanneer het aankomt op datavis-design. Bijv; Y-axis must begin at zero. Daarnaast zijn er verschillende manieren om onderscheid te maken tussen de data;

Patterns

Transforming VS Cleansing

• Data cleansing: detecting and correcting (or removing) corrupt or inaccurate records from a record set higher order functions (map etc.) --> JavaScript

• Data transforming: converting data from one format or structure into another format or structure (csv ⇥ json) --> D3.js

Functional VS Global

• Let the data and dynamic values of D3 determine the global values. This will eliminate most of the setup() constants from your code.

Style in D3

• Just do it in CSS as much as possible.

Loading

• It's possible to only load the d3 modules you're actually using, to lower loading time.

Margin Convention

• Define width and height as the inner dimensions of the chart area.

SVG Origin

• Origin point as the bottom-left corner, but that’s just not how SVG does it. Fix it like this:

.attr("y", function(d) { return h - d; //Height minus data value })

Nice()

• Show the first- and last scale numbers on the axis: linearScale.nice();

Scale types D3 has around 12 different scale types (scaleLinear, scalePow, scaleQuantise, scaleOrdinal etc.) and broadly speaking they can be classified into 3 groups: scales with continuous input and continuous output, scales with continuous input and discrete output and scales with discrete input and discrete output.

Formatting

• You can parse string timestamps to dates
• You can adjust the tick format
• Geojson; for encoding geographic data structures

Tutorials

Eerste stappen

Hoe begonnen, wat als eerste opzet?

Proces

Versies

Resultaat

Toelichting van code