6. 📊 Building the Bar chart component

The bar chart in my concept shows how many P+R locations a number of cities in the Netherlands have. The bar chart is a separate component that depends on the data that the parent component 'main' sends to the bar chart.

Calling the bar chart component from main

From the main component the data is sent to the bar chart as Prop. The bar chart also gets a width and height.

<BarChart v-if="cityData.length > 0" :barData="cityData" :width="780" :height="580" />

Accepting props

To receive the data from the main component, the bar chart component must first be able to accept props. I set this via the code below. When accepting the props I also set what type of data I expect and if these are required for the component. In this case the bar chart gets the data, a width and a height as Prop from the main component.

export default {
    name: "BarChart",
    props: {
        width: {
            type: Number,
            required: true
        },
        height: {
            type: Number,
            required: true
        },
        barData: {
            type: Array,
            required: true
        }

Incoming data

The data sent along as Prop looks like this:

{
    city: "Leeuwarden"
    lat: 53.19673
    lng: 5.7923
    prLocations: 3
}

Making the bar chart

First of all I import the necessary D3 functions from the D3 library. Next, I set in my script that I accept the required props. In <template> I make an empty div where the SVG with the bar chart will be placed. I create a function within methods in which I place all my D3 code. During the lifecycle mounted() I perform the function to make the bar chart with D3. It is important to call this function in mounted(), because then all DOM elements are available (like the div in which the SVG is placed).

<template>
  <div id="barchartdiv">
  </div>
</template>

<script> 
  import { select, scaleBand, axisBottom, scaleLinear, max, axisLeft } from "d3"

  export default {
    name: "BarChart",
    props: {
        width: {
            type: Number,
            required: true
        },
        height: {
            type: Number,
            required: true
        },
        barData: {
            type: Array,
            required: true
        }
    },
    mounted() {
        // Build the Bar chart with the makeBarChart-function when element gets mounted
        this.makeBarChart();
    },
    methods: {
        makeBarChart() {
          const lessData = this.barData.filter(d => d.prLocations > 2 && d.prLocations < 15).sort((b, a) => a.prLocations - b.prLocations);

          // Set the margins and innerWidth/innerHeight
          const margin = {top: 20, right: 30, bottom: 200, left: 60};
          const innerWidth = this.width - margin.left - margin.right;
          const innerHeight = this.height - margin.top - margin.bottom;

         // From here: All the necessary D3 code
    }
   }
 }
</script>

The D3 code I use here is largely the same as the code I wrote earlier for Frontend Data. More about how the bar chart is made in D3 can be read here