Week 2

Week 2

Maandag 11 november

presentatie data week, intro D3.js

We begonnen de dag om 10:20 met een gastcollege van Cleverfranke en Bert Spaan. De notities die ik heb gemaakt bij dit college zijn te vinden op deze pagina. Ik vond het vooral tof om eens te zien wat voor stappen een bedrijf als Cleverfranke nu ondergaat tot zij op een eindproduct uitkomen, en wat voor soorten visualisaties er allemaal mogelijk zijn in opdracht van een externe partij.

Wat ik aan Bert's presentatie het interessantst vond is hoe je met data ook echt playful dingen kunt maken (games e.d.). Wetende dat er vanuit de Gemeente Amsterdam zulke bruikbare datasets beschikbaar zijn om zelf dingen mee te maken is een 'good to know' voor eventuele volgende projecten. De introductie van Glitch en Observable waardeer ik ook.

Aansluitend kregen we een klassikaal college van Laurens over d3.js en vooral het deelonderwerp SVG. Ik heb al eens eerder wat geprobeerd met SVG tijdens de minor en vond het dan ook wel leuk om daar nu wat meer over te horen te krijgen. We kregen hierbij ook de miniopdracht om zelf een svg te schrijven; ik heb snel het hoofd van Baymax geprobeerd te maken;

Deze oefening is te vinden in deze map

Hierna heb ik aan mijn wiki gewerkt; custom sidebar aangemaakt, nieuwe indeling gemaakt, nieuwe pagina's aangemaakt voor de deelonderwerpen en deze zo veel mogelijk ingevuld, losse dingen verbeterd en/of aangevuld en m'n algehele procesverslag geüpdatet.

Dinsdag 12 november

peer reviews, d3 tips&tricks

Vandaag 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

To do:

• D3 tutorial kijken en/of meetypen

• Codepen-d3project editen

• Cirkelgrootte op basis van data maken

• Basis maken om vanuit te werken

• Uitzoeken hoe je hierarchie zoals in circle packing, kan doorvoeren in d3

• Max een half uurtje besteden aan welke data exact nodig is vanuit de dataset

• Max half uurtje besteden aan welke soort queries hiervoor nodig zijn via SPARQL

• Wiki d3 bijhouden/updaten

• Wiki SPARQL bijhouden/updaten

• Wiki logboek bijhouden/updaten

Woensdag 13 november

tech support

Donderdag 14 november

client evaluation

Vrijdag 15 november

summative evaluation