D3.js BTS Lesson #5 — dividing program into small pieces

Divide statistics program into smaller pieces to make it easier to manage

Previous Lessons

• Lessons #1- BTS Project Setup
• Lesson #2 — Read and Display Text Data
• Lesson #3 — Show images
• Lesson #4 — Statistics Chart Setup

Learning Resources

• Code for this lesson (#5)
• Live demo of this lesson (#5)

Lesson

We’ll make all changes in the chartClass.js file.

svg viewport

Below the constructor, create and new method called, generateSvg(). Within this method, define a const svg and return it.

generateSvg() {
    const svg = d3.select(this.idHtml)
      .attr('width', this.width + this.margin.left + this.margin.right)
      .attr('height', this.height + this.margin.top + this.margin.bottom)
      .append('g')
      .attr('transform', `translate( ${this.margin.left}, ${this.margin.top} )`);
    return svg;
  }

After you define the method, run the method in the constructor and assign it to this.svg.

this.svg = this.generateSvg();

You can now use this.svg in any of the methods or getters in the class.

memberNames()

Below the constructor, add a getter memberNames() using the new keyword get.

    get memberNames() {
      const memberNames = [];
      this.data.forEach(eachMember => {
        memberNames.push(eachMember.name);
      });
      return memberNames;
    }

test the new getting in the constructor. You can print out the value of the getter memberNames() using this.memberNames

console.log(this.memberNames);

You should see the results of the array on the console.

xScale

create the x scale using the same get technique. You can access this.memberNames in the new getter xScale().

get xScale() {
    const xScale = d3.scaleBand()
      .domain(this.memberNames)
      .range([0, this.width]);
    return xScale;
  }

create x-axis

create a method called, createXaxis() display the x-axis to the screen.

createXaxis() {
    const xAxis = d3.axisBottom(this.xScale);
    this.svg.append('g')
    .call(xAxis)
    .attr('transform', `translate(0, ${this.height})`);
  }

Create method getImageFile()

getImageFile(d) {
    if (d.name == 'Kim Namjoon') {
      return 'assets/kim-namjoon-150x150-circle.png';
    } else if (d.name == 'Kim Seokjin') {
      return 'assets/kim-seokjin.png';
    } else if (d.name == 'Jung Hoseok') {
      return 'assets/jung-hoseok-150x150-circle.png';
    } else if (d.name == 'Jeon Jeong-guk') {
      return 'assets/jungkook-150x150-circle.png';
    } else if (d.name == 'Kim Taehyung') {
      return 'assets/kim-taehyung-150x150.png';
    } else if (d.name == 'Min Yoongi') {
      return 'assets/min-yoongi.png';
    } else if (d.name == 'Park Jimin') {
      return 'assets/park-jimin-150x150-circle.png';
    }
  }

create method generateDatapoints()

bind the data to the svg element image.

apply the d3 data bind pattern

1. select
2. data
3. enter
4. append

generateDatapoints() {
    const datapoints = this.svg.selectAll('image')
      .data(this.data)
      .enter()
      .append('image')
      .attr('x', d => this.xScale(d.name) - this.imageSize/2 + this.xScale.bandwidth() /2 )
      .attr('xlink:href', d => this.getImageFile(d))
      .attr('width', this.imageSize)
      .attr('height', this.imageSize);
    return datapoints;
  }

run the method in the constructor.

this.svg = this.generateSvg();
this.datapoints = this.generateDatapoints();
this.createXaxis();

You should see the data points plotted at the “0” y value since we have not set the y value of each point yet.

In the next lesson, you will generate the y scales, y axis, and axis labels. You will then adjust the y position of each datapoint based on the button press.

Next Lesson

Lesson 6 — Finish Project