Interactive Bar Graph

An interactive bar graph packed with animations and information. Built with CSS and jQuery.

The Structure
The structure for this bar graph is what you’d expect. There is a for the bar graph itself. The overlay that’s displayed when a bar is clicked is aplaced after theand its information is updated through JavaScript.

We’re using the power of flexbox to position a lot of elements, especially when it comes to vertically centering them. No matter how many times I use align-items: center the feeling never gets old. To store the values of the height of each bar we’re using a sass map, which is basically an array of values. Then we use an @each loop to iterate over this map and assign each value to the height property of Various elements are also hidden using CSS transforms and revealed by adding a class with jQuery.

When the document loads we add classes to the hidden elements to reveal them. To see what elements and classes are added checkout the entrance function. A click event is binded to the bars and when they are clicked the overlay is activated by adding a class to modify its CSS transforms. We also have our data stored in JSON format for easy access and organization. We update the .text() of each part of the overlay by capturing the bars .index() value on click, then using that value to talk to the corresponding object in the array of data.

Read More


About guruprakash

Graphic and Web designer
%d bloggers like this: