Create Simple Chart With D3js
Tags: javascript, webdev, beginners, npm
Published: 2020-11-10 03:46:56

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.

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

```bash
  .
  ├── 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
```

3. Load `d3.min.js` and `app.js` file to your `index.html`
4. Additionally, you can install live-server globally with command below.
```bash
$ npm install -g live-server
```
5. 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
```html
<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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6se5r0wfjkbplxnc63lz.png)
#### Implement D3.js to make the Example Chart

Inside `index.html`

```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`
```javascript
// 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.
```javascript
const chart = d3.select('#chart')
```

#### Create Empty Span
Create empty span element, I called it init elements.
```javascript
// 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.

```javascript
// 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.
```javascript
// 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.
```javascript
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](https://nurofsun.github.io/blog/learn-d3js-example-create-chart-part-1/)