D3.js BTS Project Lesson #1

Craig Oda

Published in

CodeCakes

3 min readNov 8, 2018

Create a data dashboard with multiple SVG viewports

Learning Resources

Live Demo of Finished Project

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

Project Goals

Create two SVG viewports, each with different radio button menus to change data
In the member information chart, change the y-axis scale and labels depending on the data that is plotted

Learning Goals

Update y-axis
Update dataset
Basic JavaScript class and constructor
Basic chart object to isolate second chart and reduce human error of using same variable names

Project Setup

Use the data, css stylesheet, and image assets from your previous project. The image assets are here. The csv data file is here.

Create 3 JavaScript Files

Create 3 blank JavaScript files in addition to the d3.js file. Your /js/ folder will now contain 4 JavaScript files, 3 of them blank.

Link to all the files from your index.html file.

index.html

Step 1: In the <body>, set the heading 1 <h> above the top SVG Viewport to “BTS Member Profiles”.

Step 2: include a tag <svg> below the heading. Assign it the id of “profile”

Step 3: create a <form> The form will store multiple <input> buttons. One button will be assigned to each member.

button type is “radio”
button name is “members”
button value is the name of the BTS member

Step 4: adjust project font styles in the css file to something you like

answer

<body><h1> BTS Member Profiles</h1><svg id="profile"> </svg><form>
      <input type="radio" name="members" value="Jung Hoseok">
      <label>Jung Hoseok</label>
      <input type="radio" name="members" value="Jeon Jeong-guk">
      <label>Jeon Jeong-guk</label>
      <input type="radio" name="members" value="Kim Namjoon">
      <label>Kim Namjoon</label>
      <input type="radio" name="members" value="Kim Seokjin">
      <label>Kim Seokjin</label>
      <br>
      <input type="radio" name="members" value="Kim Taehyung">
      <label>Kim Taehyung</label>
      <input type="radio" name="members" value="Min Yoongi">
      <label>Min Yoongi</label>
      <input type="radio" name="members" value="Park Jimin">
      <label>Park Jimin</label>
    </form><hr>

profile.js

Step 1: set up SVG viewport with a width of 800 and a height of 300

Step 2: assign the viewport to constant “svg”

Step 3: append ‘svg’

Note: you do not need to translate the viewport as there is no x or y axis

const svg = d3.select('#profile')
.append('svg')
.attr('width', '800')
.attr('height', '300');

Step 3: Create an svg group called profileListing to hold the text elements for the data about each BTS member.

const svg = d3.select('#profile')
.append('svg')
.attr('width', '800')
.attr('height', '300');const profileListing = svg.append('g');

Step 4: Create constant to hold buttons

Use d3.selectAll(‘fill in’) to store the buttons in a constant called buttons.

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

Complete Lesson 1

Congratulations. You’ve finished lesson 1.

Next Lesson

Lesson #2 — read data from csv file and display it to the SVG viewport