Greeting folks,

I am back with another article. 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, its 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!

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. You might need to wait for 5-10 seconds depending on your internet speed as the page will need to fetch a megabyte of data. This site is just for giving a demo of the front end and is built without using node.js or mongoDB. Click on start tour button and check out Intro.js.

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.

Step 1: Get your hands on the working dashboard

You can download the d3 dashboard from this repository at github. Download/Fork it and navigate to the home directory in your command prompt /shell and start the app by using npm start.

C:\Users\Anmol\Desktop\introjs-D3-master>npm start

Step 2: Insert the Intro.js libraries into the code

Download the zip file containing the intro.js and introjs.css file from the official page here and save them to the js and css folder in your app respectively. The intro.js file contains the javascript code for initializing our tool tips and their interactive features, while the introjs.css file contains the styling information for the tool tips.

Call the introjs.css file in the head of the html document.

<link rel="stylesheet" href="css/introjs.css" />

Call the intro.js file just before you close the body of the html document:

<script src="js/intro.js" type="text/javascript"></script>

We need to do just one more thing here. Create a button and initialize the Intro.js script in it.

Add this code to the header div to create a simple html button and assign the Intro.js script start to it:

<button class="intro_button" type="button" autofocus onclick="javascript:introJs().start();">Start Tour!</button>

If you save and run the app at this point of time, you will see the button appearing on the header panel in our app.

We need to style this button a bit so that it goes well with our dashboard’s theme in general.

Add the following code inside the head of the html document:

<style>

.intro_button{

margin-top: 38px;

float: left;

margin-left: 30px;

background-color: #1ab394;

color: white;

}

</style>

We are set here. All we need to do now is to assign tool tips to our div elements.

Step 3 : Assign tooltips to the div’s

Locate the various div’s and add this code in their definitions

data-step="1" data-intro="The description that you want"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. I noticed that we should give a right data-position to the div’s on the extreme left of our webpage and vice-versa otherwise the tool-tip me go out of screen. (It is possible that it wont happen with bootstrap.)

As an example, initially my div looks like this:

<div class="2u chart-wrapper" id="menuselect" style="background-color: #33CC99; height: 60px;">

<div class="chart-title"> <strong> State Selector </strong> </div>

</div>

After adding the code, it should look like this:



<div class="2u chart-wrapper" data-step="1" data-intro="A row chart displays the segment categories for customers!"style="font-weight: normal" data-position="right" id="menuselect" style="background-color: #33CC99; height: 60px;">

<div class="chart-title"> <strong> State Selector </strong> </div>

</div>

Keep on adding this code to your div’s, keeping in mind that the data-step number you assign is the order in which the tool-tips will be generated. 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.

Until the next post.

Anmol

Follow @anmolkoul

Share this: Tweet





Like this: Like Loading...