Dag 8

Dag 8 (17-11)

Grafiek interactief maken

Vandaag ben ik aan de slag gegaan met het interactief maken van mijn grafiek. Ik wilde graag het bereik van de grafiek kunnen aanpassen dat er naar de laatste 11 of 21 jaar gekeken kon worden. Hiervoor moest ik eerst de x-as kunnen herschalen. Hiervoor heb ik de rescale() functie geschreven. Deze functie past eerst het domein van de x schaal aan en voegt deze vervolgens weer toe aan de grafiek. Dit is mooi geanimeerd door gebruik te maken van de transition() en duration() methodes.

// Function to rescale the x axis of the chart.
function rescale(data) {
  x.domain(d3.range(data.length));
  d3.select("#xAxis")
    .transition()
    .duration(500)
    .call(
      d3
        .axisBottom(x)
        .tickSizeOuter(0)
        .tickFormat((i) => `${data[i].year}`)
    );
}

Om de grafiek interactief te maken moet er natuurlijk wel een user input zijn. Ik heb er wederom voor gekozen om hiervoor radio buttons te implementeren. Met de volgende eventlistener luister ik naar deze buttons en update ik de grafiek zodra er een verandering plaats vindt.

d3.select("#netherlandsRadioButtons").on("change", (e) => {
  periodData = getPeriodData(e.target.id);
  rescale(periodData);
  updateChart(periodData);
});

// Get period data based on specified period.
function getPeriodData(period) {
  switch (period) {
    case "2000-2020":
      return netherlandsData;
    case "2010-2020":
      return netherlandsData.slice(10);
  }
}

Met behulp van de getPeriodData() functie maak ik de benodigde array voor de visualisatie. Deze gebruik ik vervolgens voor het updaten van de grafiek met de updateChart() functie.

// Function to update the chart on hover.
function updateChart(data) {
  const padding = 48;
  const width = (chartWidth - 2 * padding) / data.length - 4; // Width of the bars.

  overweightChartGroup
    .selectAll("rect")
    .data(data)
    .join(
      (enter) => {
        return enter
          .append("rect")
          .transition()
          .duration(400)
          .attr("fill", (d) => color(d.overweight))
          .attr("width", width)
          .attr(
            "height",
            (d) => (d.overweight / 100) * (chartHeight - 2 * padding) // Calculate the height of the rectangle.
          )
          .attr(
            "transform",
            (d, i) =>
              `translate(${x(i) + padding + 3}, ${y(d.overweight) + padding})`
          );
      },
      (update) => {
        return update
          .transition()
          .duration(400)
          .attr("fill", (d) => color(d.overweight)) // Update the color
          .attr("width", (chartWidth - 2 * padding) / data.length - 8) // Update the width of the rectangle.
          .attr(
            "height",
            (d) => (d.overweight / 100) * (chartHeight - 2 * padding) // Update the height of the rectangles.
          )
          .attr(
            "transform",
            (d, i) =>
              `translate(${x(i) + padding + 5}, ${y(d.overweight) + padding})` // Update the transform of the rectangles.
          );
      },
      (exit) => {
        return exit.transition().duration(400).style("opacity", 0).remove(); // Delete left over rectangles.
      }
    );
}

Deze functie plaatst de rechthoeken in de grafiek gebaseerd op de opgegeven data. Middels de enter() functie worden hier de ontbrekende rechthoeken aangemaakt. Vervolgens worden de bestaande rechthoeken aangepast met de update() functie. Hier worden de bestaande elementen aangepast zodat ze goed in de nieuwe grafiek passen. Als laatste worden de overbodige elementen verwijderd uit het SVG element. Dit gebeurt natuurlijk alleen als er voor wordt gekozen om naar de afgelopen 11 jaar te kijken in plaats van de afgelopen 21 jaar.

Documentatie schrijven

Vandaag ben ik ook aan de slag gegaan met het schrijven van mijn documentatie en readme.

Bekijk hier wat ik de volgende dag heb gedaan.