D3.js

D3.js

In het weekend van de eerste week ben ik begonnen met mij al lezend oriënteren op wat d3 ookalweer is/inhoudt, dit deed ik middels het bekijken van voorbeelden bekijken en wat intro's van Curran bekijken. Later (eind FP/begin FD) zou ik de mogelijkheden van deze library pas echt verkennen.

Intro D3.js en SVG

Vergelijking Canvas en SVG

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

SVG

Voorbeelden getoond 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.
Zie de folder.

Voorbeelden d3.js-visualisaties

Voorbeelden van de D3-gallery en Laurens' eigen werk zijn getoond.
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

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.)
--> daar gebruik je dus JavaScript voor

Data transforming

converting data from one format or structure into another format or structure
(csv ⇥ json)
--> daar gebruiken we dus D3.js voor

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.

Method chaining

^ example by Danny.

Je kan ze niet tussendoor breken, je kan alleen een nieuwe chain starten.

Formatting

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

Domain VS Range

Tutorials

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

Sommige 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.

Verder heb ik genoten van Curran z'n weekvideo's, en alle colleges natuurlijk.