Dissecting Bar Charts

01 May 2015

Figuring out the Bar Charts examples (there are 3 of them) is a good place to start as they do a pretty good job of taking you through the basics and highlighting the differences between creating charts manually, and harnessing the power of D3.js.

Follow the example and then fire up the CodePen template which provides you with a browser based playground with which to experiment and helpfully separates the code into it’s three component elements, the HTML, the CSS and the JavaScript.

Have a play!

Let’s Make a Bar Chart

In the CSS:

• Change the spacing of the bars
• Change the colour of the bars (Googling ‘HTML color names’ may help, or use a hex #FFFFFF colour)

In the JavaScript:

• Change the size of the graph
• What other options are there other than d3.scale.linear?
• What about adding a filter so that only certain bars above a certain value are displayed?
• Can you make the bars below 15 red and the ones above green?