D3: Visualize Data with a Bar Chart

D3: Visualize Data with a Bar Chart


My first data visualization project (d3)


Good work. The currency at the y axis can be formatted further, just google the keyword ‘d3 format’. Also for further practice, you can google for various tutorials to make d3 chart responsive to mobile devices (which is basically just query the window width and height of user’s screen size, and adjust/redraw the main svg container and all the elements within it accordingly).


thanks for your feedback
But free d3 tutorials are difficult to find most of them are for older versions of d3


I find it actually more interesting, to migrate from old version to new one because you get to learn the methods better and is well documented migration from v3 to v4. Therefore if you got a tutorial on v3 it is a good exercise to see how methods have been changed from v3 to v4 and what improvements have been made.

I guess is a matter of perspective. In general, with this problems, a positive attitude going to be rewarding in the end.


Try this : at the upper part of your d3 code (preferably below the lines where you determine width, height and margins), put this line :

const MONEYFORMAT = d3.format(’,’);

And when you draw the y axis at your main svg, use the above formating like this :

let yAxis = d3.axisLeft(bScale).tickFormat(d => {return MONEYFORMAT(d) + ’ $’}).tickValues([0,3000, 5000, 7500, 10000, 13000, 17000]).tickPadding(5);

this is the old way, but somehow i suspect it will also work at your example. Just try it, and tell us the result.


It adds a comma after 3 digits from right like this



Yup that’s the purpose. That is how people usually write currency right? I mean if you have ten million dollar, you don’t write it as :10000000$, it is a litle hard to read