Create folders for
- css
- assets
- data
- 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
tod3.js
,main.js
,bts.css
- get data from Google sheet. Save data as
bts-profiles.csv
Select font for main body
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.
<form>
<input type="radio" name="members" value="Kim Namjoon">
<label>Kim Namjoon</label>
At the link below, download the image assets for the members.
https://github.com/codetricity/d3-bts/tree/master/assets
const buttons = d3.selectAll('input');
Create event handler called, showImage
.
print a console.log first to detect mouse movement.
buttons.on('change', function(d) {
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.
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')
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';
}