BTS Profile

bts-profile.rst

BTS Profiles

Setup

Create folders for

1. css
2. assets
3. data
4. js

• Create index.html
• Put d3.js into js folder
• create main.js
• create bts.css` stylesheet and put into the ``css sub-directory
• link from index.html to d3.js, main.js, bts.css
• get data from Google sheet. Save data as bts-profiles.csv

Set Font

Select font for main body

Create SVG Viewport

Create the <svg></svg> tags inside of the html file so that it is easier to place with the other html elements.

In main.js, use d3.select('svg') and the chain the attributes for width and height.

viewport is 800 x 600.

Set HTML Heading and Form

<form>
  <input type="radio" name="members" value="Kim Namjoon">
  <label>Kim Namjoon</label>

Get Image Assets

At the link below, download the image assets for the members.

https://github.com/codetricity/d3-bts/tree/master/assets

SelectAll input

const buttons = d3.selectAll('input');

Create Function showImage

Create event handler called, showImage.

print a console.log first to detect mouse movement.

Handle Button Change

buttons.on('change', function(d) {

Get Value

You need to get the value of the button. The value holds the name of the member and is called, value.

buttons.on('change', function(d) {
  let memberName = this.  fill this in.
  showImage(memberName);
})

From showImage, print out the memberName.

Display Image

In showImage, create a variable imageFile and assign it to the name of a member image file.

let imageFile = 'assets/kim-namjoon-150x150-circle.png';

Display the image.

svg.append('image')
  .attr('xlink:href', imageFile)
  .attr('x', '0')
  .attr('y', '100')
  .attr('width', '150')
  .attr('height', '150')

Set up if statement to check for memberName

function showImage(memberName) {
  let imageFile;
  if (memberName == "Kim Namjoon") {
    imageFile = 'assets/kim-namjoon-150x150-circle.png';
  } else if (memberName == 'Kim Seokjin') {
    imageFile = 'assets/kim-seokjin.png';
  }

Check on problem of images covering each other