Dag 7

Dag 7 (16-11)

Grafiek maken

Vandaag ben ik begonnen met het maken van de grafiek in mijn datavisualisatie. Ik ben begonnen met het aanmaken van de x- en de y-as. Hiervoor heb ik de drawChart() functie geschreven.

function drawChart(data) {
  const padding = 48;

  x = d3 // Scale band for the x axis.
    .scaleBand()
    .domain(d3.range(data.length))
    .range([0, chartWidth - padding * 2]);

  overweightChartGroup // Add the x axis to the svg element.
    .append("g")
    .attr("id", "xAxis")
    .attr("transform", `translate(${padding}, ${chartHeight - padding})`)
    .call(
      d3
        .axisBottom(x)
        .tickSizeOuter(0)
        .tickFormat((i) => `${data[i].year}`)
    );

  y = d3 // Scale for the y axis.
    .scaleLinear()
    .domain([100, 0])
    .range([0, chartHeight - padding * 2]);

  overweightChartGroup // Add the y axis to the svg element.
    .append("g")
    .attr("id", "yAxis")
    .attr("transform", `translate(${padding}, ${padding})`)
    .call(
      d3
        .axisLeft(y)
        .tickFormat((d) => `${d}%`)
        .tickSizeOuter(0)
        .ticks(10)
    );

  updateChart(data);
}

Bij het aanmaken van de x-as maak ik geen gebruik van een lineaire schaal. Balken in de grafiek geven namelijk het percentage per jaar weer. Ik wilde dus dat de tekst van het jaar gecentreerd stond onder de balk. Hiervoor was de scaleBand() methode nodig.

Het aanmaken van de y-as ging redelijk simpel. Omdat ik met percentages werk gaf ik hem een domein van 0 tot 100. Om de percentages in de y-as weer te geven heb ik gebruik gemaakt van de tickFormat() methode. Hiermee kunnen de waarden langs de as worden aangepast. Ook heb ik met de ticks() methode aangegeven dat er 10 punten langs de y-as moeten zijn.

Aan het einde van deze functie wordt de updateChart() functie aangeroepen om de initiële data in de grafiek te zetten. Meer over deze functie kan op de hier gevonden worden.