week 5: gastles daniel
Deze vrijdag kregen we een gastcollege van Daniël Staal die bij stichting CAS werkt. Dat is een organisatie die bedrijven, gemeente en provincies kan helpen met het omgaan van klimaat verandering door gebruik te maken van datavisualisaties. Zo proberen ze duidelijk te maken wat bijvoorbeeld de stijgende aarde temperatuur doet en zo zijn er nog vele andere projecten.
Daniël liet 2 projecten van hem zien en begeleidde ons door zijn proces heen. Net zoals in de gastcollege van Rijkswaterschap waar ze de data opschonen deed Daniël dit ook. Wat wij nu leren met D3,.js en Svelte is nog maar een klein gedeelte. Zo liet daniël zien dat er meerdere mogelijkheden zijn om D3.js te gebruiken.Zie voorbeeld hieronder:
|
Methode 1 |
Methode 2 |
|---|---|
d3.json("apiPlaceholderURL", function(error, data) {
data = static_data;
x.domain(data.map(function(d) { return d.grad_year; }));
y.domain([0, d3.max(data, function(d) { return d.student_count; })]);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.append("text")
.attr("y", 6)
.attr("dy", "2.5em")
.attr("dx", width/2 - margin.left)
.attr("text-anchor", "start")
.text("Grad Year");
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Student Count");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.grad_year); })
.attr("y", function(d) { return y(d.student_count); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.student_count)})
}); |
<script>
import { scaleBand, scaleLinear } from "d3-scale";
export let data;
const width = 800;
const height = 600;
const margin = { top: 20, right: 20, bottom: 20, left: 180 };
const innerHeight = height - margin.top - margin.bottom;
const innerWidth = width - margin.left - margin.right;
$: xDomain = data.map((d) => d.country);
$: yDomain = data.map((d) => +d.population);
$: yScale = scaleBand().domain(xDomain).range([0, innerHeight]).padding(0.1);
$: xScale = scaleLinear()
.domain([0, Math.max.apply(null, yDomain)])
.range([0, innerWidth]);
</script>
<svg {width} {height}>
<g transform={`translate(${margin.left},${margin.top})`}>
{#each xScale.ticks() as tickValue}
<g transform={`translate(${xScale(tickValue)},0)`}>
<line y2={innerHeight} stroke="black" />
<text text-anchor="middle" dy=".71em" y={innerHeight + 3}>
{tickValue}
</text>
</g>
{/each}
{#each data as d}
<text
text-anchor="end"
x="-3"
dy=".32em"
y={yScale(d.country) + yScale.bandwidth() / 2}
>
{d.country}
</text>
<rect
x="0"
y={yScale(d.country)}
width={xScale(d.population)}
height={yScale.bandwidth()}
/>
{/each}
</g>
</svg> |
Dit was wat verwarrend wat wij hadden het zoals methode 1 geleerd. Wel heel fijn vond ik het dat het ook op deze manier kan, methode 2 maakt het juist nog simpeler en veel minder code ook. Ik ga kijken of ik dat kan gebruiken in mijn project als ik nog voldoende tijd heb.
Het nadeel dat werd benoemd is dat wanneer grafieken niet meer zo eenvoudig zijn zoals een barchart of een lijngrafiek dat methode 2 misschien wel te lastig wordt en dat het animeren bijvoorbeeld met methode 1 ook makkelijker gaat
Wat heel tot is aan daniël zijn werk is dat hij veel met kaarten werkt, misschien is wat hij doet nog een stapje te ver maar ik gebruik inmiddels ook een kaart die ik inlaadt d.m.v. geojson, maar ik zou bijvoorbeeld ook gebruik kunnen maken van Leaflet of google maps API.
Al met al ben ik wel tot mooie inzichten gekomen, al vind ik nog steeds dat dit soort presentaties beter aan het begin passen van een project als dit.