BTS Project Lesson #2 — d3.js read and display text data

Read in text data from a csv file with d3.js and display it to a SVG Viewport

Previous Lesson

Lesson #1 — Project setup

Learning Resources

• Code for this lesson on GitHub
• Live demo of this lesson

Read in Data from csv file

Step 1: use d3.csv to read in data.

Step 2: chain a promise to the end of d3.csv(filename)

hint: use .then(anonymous function)

The anonymous function receives a variable, normally called, data.

Step 3: print out the data with console.log

d3.csv('data/bts-profiles.csv').then((data) => {
  console.log(data);
});

Get Value From Button Press

Replace the console.log(data); line with this code.

Step 1: detect buttons change

Step 2: when a change is detected run an anonymous function

Step 3: in the anonymous function, assign the constant memberName to the value of the button that was pressed

Step 4: print out the value of the button pressed

d3.csv('data/bts-profiles.csv').then((data) => {
  buttons.on('change', function(data) {
    console.log(this.value);
  });
});

Create Functions to Show Image and Data

Step 1: create function showData(memberName, data) {...

Put console.log(‘show member data’) into the function.

Step 2: create function showImage(memberName) { …

Add console.log('show member image')

Step 3: run the functions when the button is pressed

Step 4: Add a constant for memberName to the event handler function that runs when the button is pressed.

Step 5: Modify console.log to print out the name of the member selected by the button.

d3.csv('data/bts-profiles.csv').then((data) => {
  buttons.on('change', function() {
    const memberName = this.value;
    showData(memberName, data);
    showImage(memberName);
  });
});
function showData(memberName, data) {
  console.log(`Showing data for ${memberName}`);
}
function showImage(memberName) {
  console.log(`Showing image for ${memberName}`);
}

showData

Step 1: selectAll text and remove

profileListing.selectAll('text').remove();

Step 2: loop through each element of the array data and print out the name of each member.

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

Step 3: Check for a match between the value of the button press (memberName) and element.name for the object of each BTS member. Use an if statement. If there is a match, print out a message similar to “you selected Kim Namjoon”

data.forEach(element => {
   if (element.name == memberName) {
     console.log(`you have selected ${element.name}`);
   }
 });

Step 5: create a variable yPosition and set it to 50. This is the position we will start to draw the text.

Step 6: use a “for…in” loop to go through the properties of each member object. The syntax is for (var in object).

for…in information on MDN

Step 7: create a variable called, memberValue and assign it to the value of the property. The property is the variable you set in the for...in loop. You can get the value of a property with objectName[propertyName].

Step 8: print out the property and value for the data on the member when the buttons is selected.

data.forEach(element => {
   if (element.name == memberName) {
     let yPosition = 50;
     for (var memberInfo in element) {
       let memberValue = element[memberInfo];
       console.log(`${memberInfo}: ${memberValue}`);
     }
   }
 });

Step 9: add text to the screen

Review Concepts

• use the svg viewport called, “profileListing”.
• append (‘text’)
• set x attribute to 50
• set y attribute to yPosition
• set .text(... to property: value (the same information you printed to the console in the previous step)

Step 10: increase yPosition by 50

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

Next Lesson

Lesson #3: Add BTS member images