Create Simple Chart With D3js

So, today I have learned about D3 the most flexible javascript for data visualization, when I tried this library it just a little bit overwhelming and, do not know the most effective way how to learn it, because the documentation was quite poor. I mean the order of the tutorial was not structured well.

Why I Must Learn it?

Currently, I work on a project that needs data visualization, of course, it’s related to a dashboard web app. I have had intention to mastering this library when I was worked on a similar project.

This article intended to make a quick guide how to visualize your data with D3.js

Preparation

Environment Setup

Before we start to make a deal with this library and write some lines of code, you need to install this library, for now, I will teach to you the easy way how to do it.

Visit and download D3.js from official website, because the downloaded file is .zip format, you also need to extract it.
Create a directory to put your files that you used for learning. e.g d3-playground inside my directory (see below).

  .
  ├── index.html
  └── public
  ├── css
  │   └── app.css
  └── js
      ├── API.md
      ├── app.js
      ├── CHANGES.md
      ├── d3.js
      ├── d3.min.js
      ├── LICENSE
      └── README.md

  3 directories, 9 files

Load d3.min.js and app.js file to your index.html
Additionally, you can install live-server globally with command below.

$ npm install -g live-server

Open your favorite code editor, personally I used vim. And we are ready to coding !.

I'll give you very simple example rather than an example basic command how to do it and that.

Create Chart With D3.js

Goal (Create a Chart with structure HTML code as below)

Here it is the structure HTML code, and the example chart. I write this chart manually, but I want to make it automatically with D3.js

<div id="chart">
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 40px;">4</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 80px;">8</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 150px;">15</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 160px;">16</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 230px;">23</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 460px;">46</span>
</div>

Example Chart

Implement D3.js to make the Example Chart

Inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Playground - Chart</title>
</head>
<body>
 <div id="app">
   <div id="chart"></div>
 </div> 
 <script src="public/js/d3.min.js"></script>
 <script src="public/js/app.js"></script>
</body>
</html>

I created fake array data as below. Write it on your file app.js

// Data to visualize
const data = [ 4, 8, 15, 16, 23, 46 ];

Selecting Element

Then I make <div id="chart"> as the container, what I need to do is select the element.

const chart = d3.select('#chart')

Create Empty Span

Create empty span element, I called it init elements.

// create empty span element.
const bar = d3.selectAll('span')

Binding Data and Styling Element

Here, we start to binding the data with our init elements. and join it our span element. .join() method is new here for more convention to joining the data.

// binding data to <span>
bar.data(data)
   .join('span')
      // styling span element.
      .style('background-color', '#232323')
      .style('color', 'white')
      .style('font-weight', 'bold')
      .style('display', 'block')
      .style('text-align', 'right')
      .style('height', '20px')
      .style('margin', '1px')
      .style('padding', '10px')
      // computed the width of each element depends on the data value, to do it see below.
      .style('width', d => `${d * 10}px`)
      // append text inside element
      .text(d => d);

Styling Element (Basic Syntax)

I know, maybe you already understand how to styling element, but still, I will give you the basic syntax example.

// first argument = key
// second argument = value
element.style('background-color', '#232323');

Chaining style method. If you want to styling the element more than one css rules once, you might need chaining the style method.

element.style('background-color', '#232323')
    .style('font-weight', 'bold')
    .style('padding', '10px')
    .style('color', 'white');

Thanks, see ya on the next article.

Original Post: Nurofsun's Blog

Blog