d3 BTS part 3 - Show Data

bts-profiles-3.rst

Show Data

Demo

https://codetricity.github.io/d3-bts/profile.html

Demo 2 with Transitions

https://codetricity.github.io/d3-bts/transition.html

Code Example

https://github.com/codetricity/d3-bts/blob/master/js/profile.js

Create New Function to Show Text Data

Call the new function showData()

...
   showData(memberName);
});

function showData(memberName) {

}

Read in Data from File

Put around the buttons.on('change'... event handler.

d3.csv('data/bts-profiles.csv').then((data) => {

  buttons.on('change', function(d) {
    let memberName = this.value;
    showImage(memberName);
    showData(memberName, data);
  });
});

Verify that You can Get Data

function showData(memberName, data) {
  console.log(data);
}

Add Group in SVG Element for Profile Text Data

const profileListing = svg.append('g');

Put this above the code to read in the data from file. Put it below the code you set the svg constant (close to the top of the code).

Remove Previous Text Elements

Use this simpler method of removing all text elements.

function showData(memberName, data) {
  profileListing.selectAll('text').remove();

Go Through Array of Objects

Go through array and search for memberName, which was taken from the button value.

function showData(memberName, data) {
 profileListing.selectAll('text').remove();
 data.forEach((element) => {
     if (element.name == memberName) {

Add Text Data to Screen

function showData(memberName, data) {
  profileListing.selectAll('text').remove();
  data.forEach((element) => {
    if (element.name == memberName) {
      var yPosition = 80;
      for (var memberInfo in element) {
        let memberValue = element[memberInfo];
        profileListing
          .append('text')
          .attr('x', '50')
          .attr('y', yPosition)
          .text(`${memberInfo}:  ${memberValue}`);
        yPosition += 50;
      }
    }
  });
}