How to create a heat-map of activities of your user on a video?

We bring you the second blog of the two blog series to our open source contribution. You might have read our initial blog “How to track video viewing pattern using JavaScript?”, where we share how to track your user’s data using our library. Now we would put that to use, i.e. we would create some meaning out of it. Sounds interesting correct …?

We are team of developers and we loved the challenge given to us by our client not to use and ready made competent and create our own. Hence, we took a step ahead and made it available to other folks of the community as we have used a lot from the community.

Check the link below to download both the libraries as one alone is not gonna make sense for now.

  1. )
  2. )

Let me share the entire requirement once again. Our client wanted to capture the viewing pattern of his user for the video uploaded on his portal. So we came up with idea to create a heat map that will effectively show the activity the user while watching the video.

Here is how you would use the ‘trt-video-heatmap’ library.

Step 1:

Include the ‘trt-video-analytics’ library that would get you the data for creating heat map. The above mentioned library would return an array of the data.

Step 2:

Now you can store the data in the DB in string format and pass that data in array form to the ‘trt-video-heatmap’ library. Along with that we have the flexibility to pass the color combination as well to create the heat map in the color gradient of your choice.

End result will look something like this :-)

Step 3:

I know, above two steps are just description but now let’s dive into the coding part. How easy we have made it.

First you need to add script tag into your page

<script type=”text/javascript” src=”heatMap.js”>

After that we need to initialize the instance of the HeatMap library with the specific parameters

var colorCode = ['rgb(255, 245, 204)','rgb(255, 205, 143)','rgb(255, 155, 97)', 'rgb(255, 81, 46)', 'rgb(255, 0, 0)', 'rgb(226, 0, 0)', 'rgb(191, 2, 2)', 'rgb(156, 1, 1)', 'rgb(125, 2, 2)']

var data =[1,1,1,1,1,1,2,2,2,2,2,2,undefined,undefined,undefined,undefined,undefined,3,3,3,3,1,1,1,2,2,2,2,5,5,5,5,6,6,6,6]

var map = new HeatMap(data, colorCode, id of element);

Done that’s it now your heat map is ready.

Do share your feedback. :)

· · · ·

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.

Most frequently asked questions about Postman

A postman is a popular tool for interacting with HTTP API clients that makes it easy for developers to generate, share, test and document APIs. Postman gives a friendly GUI for creating requests and responses.

Read More

Different Types of Apps Node JS Development Company Can Build For You

Node.js can be used to build different types of apps. If you are looking to hire a Node JS development company, find out what all can an experienced team build for you.

Read More

4 things to ponder when outsourcing to a Node JS development company

Various factors play a role in your decision to outsource to a Node JS development company. Here are the important things you need to consider for right decision making.

Read More