Download our Mobile App
Today we will see how to add a guided step by step story-line to our D3 dashboard. We will be using another awesome open source java script library: Intro.js
I have been doing dash-boarding and visualization for quite some time now. Recently i made a D3 dashboard demo for internal consumption at the place i work. The tough part was going through the motions, explaining the whole dashboard and visuals to all the stakeholders one by one. Sure i could have made a video but then the dashboard would lose something. Visual story telling is as necessary as the visualizations that you are building. The visuals need to make business sense and answer questions. We viz folks try to build a story line around our dashboards as much as possible. Explaining them however gets time consuming and repetitive. Here’s when Intro.js comes for the save.
I am quoting the Intro.js site here:
Better introductions for websites and features with a step-by-step guide for your projects.
Using Intro.js we can attach pop-up tool tips to our html graphs (div’s) and further more we can assign an order of appearance as well as style them to make it look snappier. So, essentially we can assign an interactive tool tip to our graphs and display helpful information to the user who is going to use the dashboard. Trust me, it’s a very nifty and nice feature to have. You don’t have to write a lot of documentation to make someone hit the road running on your dashboard.
I strongly recommend going through the tutorial that guides you on creating an interactive dashboard before starting this tutorial. We will be adding features to that dashboard itself.
Now to the implementation!
Stay ConnectedGet the latest updates and relevant offers by sharing your email.
The steps to success:
- Get your hands on the working dashboard
- Insert the Intro.js libraries into your code
- Attach tool tip code to your div’s
- Check the results
- Here’s how our finished dashboard will look like:
I have made online a working model of this project. It can be accessed at anmolkoul.github.io for the next some time.
The source code for this tutorial can be found at this github repository. This code is complete in itself and utilizes the dashboard we built previously with D3.js, MongoDB, Node js and implements the Intro.js library into it.
data-step:”1″ data-intro=”A row chart displays the segment categories for customers!”style=”font-weight: normal” data-position=”right”
The properties highlighted in red are the ones we can change and need to change. Once we have a story line in mind we can assign the above code in that order to div’s. Here data-step is the order in which the tool-tip for the div will get generated. So the first visual you want to display information for should have a data-step value of 1. data-intro contains the description that you want to display for that particular div. You can add html stuff like breaks and all inside the data-intro text as well. You can make the tool-tip font bolder by modifying the weight property. Finally you can select the placement of the generated tool tip by using the data-position property
Intro.js works really fine even if you have a long single page. It automatically focuses from one div to another seamlessly.
That’s it folks. We have successfully built a dashboard with guided analysis using Intro.js. Use it to enhance your visualization experience and keep experimenting.
The detailed post can be viewed at https://anmolkoul.wordpress.com/2015/07/24/story-boarding-in-a-d3-js-dashboard-using-intro-js/
If you loved this story, do join our Telegram Community.
Also, you can write for us and be one of the 500+ experts who have contributed stories at AIM. Share your nominations here.
What's Your Reaction?
Anmol has been working for nearly 4 years in the BI domain. He is working right now as a Senior-consultant in the BI program at Wincere Inc. He has worked across geographies and a number of clients in a consulting role. Recently he has shifted his focus to the open source stack and develops cutting edge visualization solutions using open source libraries. Apart from coding and consulting Anmol can be found listening to music or playing basketball. His twitter handle is @anmolkoul