Once you’ve created this code, save it as Bar_chart.R.
Step 2: Create the js code
Our js file will be based largely on the js code in the previous tutorial with two important differences – we are going to add some css transitions to animate the bars when the chart is first loaded, and add a tooltip when the user hovers over each bar.
The code is largely based on the js file in our previous tutorial so we are first going to set some initial values, create the x and y axes, chart title and create the basic bar chart with ‘rect’ elements.
Save this file as Custom D3.js in the same folder as your R script and run your R script. You should get a chart that looks like this:
You’ll see that there are no bars yet. This is not a problem, and is because we have created the ‘rect’ elements, set the width and x, y coordinates but we haven’t yet set the height of the bars, so they currently have a height of 0px. This is because we want to add a css transition so that the bars appear from the x axis and smoothly animate to their correct height.
Before we get to the animation, we need to understand an important point with how SVG ‘rect’ elements are created. The x and y coordinates relate to the top left corner of each bar. Thus, if we simply change the height of each bar from 0 to 100%, the bar will actually animate from the x axis downwards. However, for this bar chart we want to bars to animate from the x axis upwards.
The solution we have chosen is to transition the height of each bar from 0 to 100% at the same time as transitioning the y coordinate from the x axis to x axis minus the height of the bar. If both these animations run at exactly the same time and duration, it will appear as if the bar is rising from the x axis.
Add transitions when the chart is first loaded
Add the following text to your Custom D3.js script.
To initiate a css transition we use .transition() followed by .delay(). Within the brackets of .delay() should be a value in milliseconds. In our example, we have used a function to define the delay so that each bar is animated with 100ms intervals.
Once the transition has been initiated, we can then change the attributes of whatever we want to animate, in this case the height and y coordinate as explained above.
Add the above code to your Custom D3.js script and you should get a chart that looks like this:
When the chart first loads, the bars should smoothly transition from the x axis upwards, with a short delay between each one. Click on “Reload” above to see this in action.
Add animated tooltips
Next we are going to add a tooltip to each bar which appears when the use hovers over the bar, and follows the mouse cursor across the screen.
Then we’ll create the mouseover effects. We’ll need 3 of these – one for when the user moves the mouse into the bar, another to make the tooltip follow the mouse cursor, and the last one to make the tooltip disappear when the user moves the mouse away from the bar.
Add all of this code to your Custom D3.js scripts and you should get a chart like this:
And we’re done! You’ll notice that we also change the colour of the bar in the mouseover function using d3.select(this) and defining the fill colour. Remember if you’re doing this, you’ll need to set the fill colour back what it was originally in the mouseleave function, otherwise the hover colour will remain permanently.
I hope you find this tutorial useful. As always, comments and question are welcome using the form below and I’ll endeavour to reply to all queries.
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.