In this post, we will see a bar chart with D3.js. With the evolution of data science, charts are everywhere. It’s hard to know which chart you have to choose. Which way is the best to show data for your customers?
When do I choose a bar chart with D3.js?
It’s important not to confuse the bar chart and histogram chart. You would like to use bar chart to show data with categories and numerical values.
You can see an example of data to show in the bar chart here: https://docs.google.com/spreadsheets/d/1A3zVHPZhEvvkKmcsvMZjOqbguVnjN-kdHaddhUjHoIo/edit?usp=sharing
You have the first name column and the score column.
Define dimensions of your chart
First of all, you would like to define the dimensions of your chart. With D3.js, it’s always the same way to do that.
You can set an attribute as you want. I start to set the transform attribute of my y-axis.
d3.axisLeft is used to create axis to the left of your chart. After that, you would like to append new text tag for each tick. You can position as you want by setting x and y attributes. To show the text, just call the text method with the text in parameter (data.y here).
It’s exactly the same way for xAxis, just you have to use axisBottom instead of axisLeft.