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

Canvas = raster, meer voor foto's SVG = vector, meer voor anything else (illustraties en andere vormen)

SVG

Voorbeelden van hoe een vierkant, lijn, cirkel, ellipse, polygoon of tekst te maken. Hierarchie uitgelegd (cascading) en styling.

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

Voorbeelden van de D3-gallery en Laurens' eigen werk laten zien. Bijvoorbeeld::

D3.js

Versies; v3 was monolithic, v4 was opgesplit in modules en v5 gebruikt fetch ipv XHR, plus promises.

Scale

Scales are a convenient abstraction for a fundamental task in visualization: mapping a dimension (domain) of abstract data to a visual representation. (range)

Array

Voorbeelden van wat voor informatie er allemaal uit een array kan worden gehaald.

Selection

Voorbeelden van select/append.

Working with d3

Find examples on d3js.org Documentation on Github Live WYSIWYG coding on beta.vizhub.com

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

Ik heb de playlist van d3vienno gekeken: https://www.youtube.com/playlist?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p

Sommigen video's heb ik tweemaal moeten kijken aangezien ik half in slaap viel maar de tweede keer was het best prima te begrijpen.

Ook heb ik een proefabonnement bij Codecademy 'aangeschaft' en daar de helft van doorlopen.

Eerste stappen

Hoe begonnen, wat als eerste opzet?

Proces

Versies

Resultaat

Toelichting van code