This D3 CSS bars example shows a technique for creating a row of bars. Each bar is a randomly generated value. To begin with here are the bars.

See the Pen D3CSSBarsExample by Daniel (@Parsons) on CodePen.


Press RERUN to see refresh the randomly generated bars.

First of all on line 1 an empty array is passed to a variable named ‘dataset’.

Beginning on line 3 is a for loop with three statements in the parenthesis ‘()’.

The three statements cause the for loop to run 25 times.
Here is how that works!

  1. var i = 0; – Creates a variable ‘i’ with a value of ‘0’.
  2. i < 25; - Defines the condition for running the loop. The condition is that the variable 'i' must have a value less than '25'.
  3. i++; – This gets executed each time after the loop runs. The two plus signs are a ‘increment’ sign. So each time the for loop runs the value of the variable is increased by one. Another way of writing this could be (i = i + 1)

In-between the curly braces ‘{}’ of the ‘for loop‘ is the code block.

On lines 4 and 5 the code block gets executed every time the ‘for loop’ runs. In this case it will get executed 25 times as on the 26th time the value of the variable ‘i’ will be ’25’ which fails the condition of the second statement (i < 25). The code block is creating a random number ’25’ times and pushing each number into the ‘dataset’ array. The ‘dataset’ array is the data that D3 will use to create the bars.

Lets first take a closer look at how the for code block in the for loop works.

  • ‘var newNumber’ is the variable to store a random number.
  • ‘Math.round(Math.random() * 30)’ is the function to create the random number. A random number is creates and then multiplied by 30 (the inner brackets expression is executed first). This number is rounded to the nearest integer.
  • The number created and stored in the variable ‘newNumber’ is then pushed into the ‘dataset’ array.
  • As an example the first random number generated could be a value of ‘0.41258213314137115’. Multiply that number by 30, (0.41258213314137115 * 30) = 12.377463994241135. This huge number is then rounded to the nearest integer which of course is ’12’.
  • This number ’12’ is then stored in the ‘dataset’ array as ‘[12]
    ‘.
  • The process is repeated another 24 times until 25 numbers are stored in the ‘dataset’ array. This could look similar to this, [12,15,5,12,21,2,11,13,5,1,3,18,14,4,6,17,4,16,22,13,26,18,22,3,13] for example. Lots of data means lots of bars!

Now on line 8 ‘d3.select(“body”)’ is used to ‘select’ the body of the html5 document.

On line 9 ‘selectAll(“div”)’ is used to ‘selectAll’ the ‘div’ elements.

If you look back at the html document there are no ‘div’ elements to select. In actual fact what ‘selectAll(“div”)’ does is to create an empty array to store ‘div’ elements.

The ‘data(dataset)’ command on line 10 is binding the data from the ‘dataset’ array to the empty array of ‘div’ elements which don’t yet exist.

Getting confused! Well the next line explains this.

On line 11 the ‘enter()’ command takes the ‘dataset’ array that is bound to the empty array of ‘div’ elements and then creates a div element for each value.

On line 12 the ‘append(“div”)’ command appends each of the 25 ‘div’ element to the DOM (Document Model Object).

That is what is happening with the ’25’ ‘div’ elements, they are now attached to the DOM.

And on line 13 the attr(“class”,”bar”) command attaches ‘class=”bar”‘ to each of the 25 div elements created in the body.

Last but not least on lines 14 to 17 is a ‘style’ attribute that contains a height attribute with a value that is evaluated inside a function.

Each value from the ‘dataset’ array that was given to a ‘div’ element is now passed to the function as the parameter ‘(d)’. A variable of ‘barHeight’ is then given the value of each value multiplied by 5. In other words the first value of ’12’ in the ‘dataset’ now becomes ’60’. This number ’60’ is then returned by the function with a ‘px’ appended to it, (60px). This value is the ‘height’ for each bar which in fact is a ‘div’ element. So the code would look like this for the ‘div’ element.

Now in the DOM there are 25 such div elements all with a randomly generated ‘height’ value and with a class of ‘bar’.

Finally in the CSS the style ‘div.bar’ has a the following to create the green bars.


More on D3 (Data Driven Documents)

D3 logo

SVG logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *