D3 Basics. How to create a Bar chart

Image for post
Image for post

What will be covered in this article:

  • Prerequisites
  • What we will be implementing?
  • What is SVG?
  • What is D3?
  • D3 DOM manipulations
  • How to create a Bar chart step-by-step:
  • Step 1. Creating SVG element
  • Step 2. Adding JSON data to the project
  • Step 3. Fetching data
  • Step 4. Adding Y-axis
  • Step 5. Adding X-axis
  • Step 6. Modifying X-Axis text label styles
  • Step 7. Adding animated bars to the chart
  • Step 8. Adding labels to the bars

Prerequisites

For this article, you will not need any third-party libraries/frameworks as React.js/Angular/Vue, etc. We will be using a simple static HTML page for our demos.

What we will be implementing?

Before I will start telling you about the basics of the D3 library, you can check what you will get as a result:

Image for post
Image for post

What is SVG?

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector graphics. As such, it’s a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

SVG graphics consists of basic shapes:

  • Rectangle → <rect … />
  • Circle → <circle… />
  • Ellipse → <elipse… />
  • Line → <line… />
  • Polyline → <polyline… />
  • Polygon → <polygon… />
  • … and the most powerful one, Path → <path… />

What is D3 ?

<script src="https://d3js.org/d3.v6.min.js"></script>

D3 DOM manipulations

Most of the time you will need to use d3-selection module (it is just like the document.getElementBy…) that will allow us to manipulate the DOM tree.

How to create a Bar chart step-by-step

Step 1. Creating SVG element

Let’s start with a simple step.

Image for post
Image for post

Step 2. Adding JSON data to the project

Next, we will need to add a JSON file with chart data into a project. You can add any data you want with any names and values, with only one restriction → names/keys should be unique.

Image for post
Image for post

Step 3. Fetching data

To fetch data from a server (or a local file, in our case) we will need to use d3-fecth module. Don’t worry, no additional imports 😉

Image for post
Image for post

Step 4. Adding Y-axis

Now it is time to add our first Y-Axis chart element.

Image for post
Image for post
let y = d3.scaleLinear().range([HEIGHT, 400]);function createAxisLeft(data) {
y.domain([0, 2000]).nice();
...
}
Image for post
Image for post

Step 5. Adding X-axis

Now, let’s add X-axis mainly the same way as we did with Y-axis:

Image for post
Image for post

Step 6. Modifying X-Axis text label styles

What if we would want to rotate our text by 90 degrees. Let’s add a function for that:

Image for post
Image for post

Step 7. Adding animated bars to the chart

Now, the most interesting part, I think → adding bars with animation 😉

Image for post
Image for post
Image for post
Image for post

Step 8. Adding labels to the bars

Mostly the same as we did with bars. Here we are specifying x and y coordinates and text position of the labels:

Image for post
Image for post

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store