Visualizing

RDW data

For this visualization, I want to make a pie chart. This pie chart has to show in which year the most Park & Ride places are build. To make this pie chart, I am going to use D3.js. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

I want to make a pie chart, because a pie chart is used to easily represent a distribution of certain data. The pie is divided into sectors/ arcs, where the size of a sector represents the number of a specific item of data. In this case the amount of the year.

Variables

First we have to declare some values we want to use, so as first we select the svg we have in the HTML page, we give the width and height a attribute, give the radius a value and append a group to the svg with a width and height. We also give a color to all the arcs that are to come with a specific scheme category. And sort all the data with the values from high to low.

  const svg = select('svg');

  const width = +svg.attr('width');
  const height = +svg.attr('height');

  let radius = 170;
  const g = svg
    .append('g')
    .attr('transform', `translate(${width / 2}, ${height / 2})`);

  const color = scaleOrdinal(d3.schemeCategory10);

  const pie = d3.pie().value((d) => d.value);

Arcs

In here we define the outerRadius and innerRadius. pathOver activates when hovering.

  let path = arc()
    .outerRadius(radius)
    .innerRadius(radius - 100);

  let pathOver = arc()
    .outerRadius(radius + 10)
    .innerRadius(radius - 90);

Labels

With this code we make sure the labels are at the place they have to be, label is the year, and labelValue is the value of the amount.

const label = d3
    .arc()
    .outerRadius(radius)
    .innerRadius(radius + 60);

  const labelValue = d3
    .arc()
    .outerRadius(radius)
    .innerRadius(radius - 70);

Enter

In this code we are 'making' the paths, so all the pieces of the chart. We give them the color of the scheme, a class and some events like mouseover and mouseout. More about this in Animations.

  pies
    .append('path')
    .attr('d', path)
    .attr('fill', colorPaths)
    .attr('class', 'arcPath')
    .on('mouseover', onMouseOver)
    .on('mouseout', onMouseOut)

  pies
    .append('text')
    .text((d) => d.data.year)
    .attr('class', 'arcText')
    .attr('transform', function (d) {
      return 'translate(' + label.centroid(d) + ')';
    });

  pies
    .append('text')
    .text((d) => d.data.value)
    .attr('fill', colorPaths)
    .attr('transform', function (d) {
      return 'translate(' + labelValue.centroid(d) + ')';
    });

Animations

These functions make sure all the paths have animations. The fill-opacity goes to 0.5 and you can see the is the value of the amount.

function onMouseOver() {
    d3.select(this)
      .transition(1000)
      .attr('fill-opacity', '0.5')
      .attr('class', 'pathHover')
      .attr('d', pathOver);
  }

  function onMouseOut() {
    d3.select(this)
      .transition(1000)
      .attr('fill-opacity', '1')
      .attr('class', 'arcPath')
      .attr('stroke', '')
      .attr('d', path);
  }