Dashboard Analysis: Google Fit

This post is to understand the various aspects of the user interface of a web based dashboard. This is an attempt to understand the little details and insights a dashboard can provide visually. This would help to increase the knowledge on the dashboard design and development. The Analysis is AS I SEE IT.

This dashboard indicates excellent design using Material Design concepts using Paper-cards. This also happens to be good example of gamification for maintaining good health. The data is obtained from Android mobile phones with Accelerometer sensors data integeration.

As soon as you login you will see the given dashboard, which will give the following insights.

  1. How much you have walked against the goal. Goals Vs Achieved
  2. Against the goal how much is each activity contributes is given in circle with different color indicators.
  3. Data in different Unit of measurements on a given day such as Minutes, Distance, Calories & Steps
  4. Also list of recent activities ordered by date combined with the activity is provided as well.
  5. Personal records shows the key achievements.
  6. Distance travelled in terms of summary is provided as well.

Dashboard across periods:

  • If we look further down it has facility to analyse data on Day, Week and Month.
  • You can also analyse the data in Time, Steps, Distance, Calories, Heart Rate and Weight
  • The data can also be filtered based on the various activities such as Walk, Running, Cycling, etc.,

Dashboard over a monthly calendar:

  • Here the maximum activity flagged nicely.
  • The activity summary is mentioned over a line bar
  • The current date is displayed in a different color for identification of current date
  • The weekly total is provided on the extreme right over the respective weeks

Near Realtime data in charts using AngularJS

Whenever we develop an Web Application for displaying realtime or near realtime charts there would be a need to refresh the page at regular intervals to fetch the data and display. This is essential for the following reasons:

  1. To ensure that we display the latest details to the end users
  2. To provide interactive update which gives good look & feel for the end users
  3. Will help in avoiding taking wrong decisions or delayed information
  4. Can help in analyzing the current situation instead of past history

In one of the recent initiatives I was working on I have to refresh the chart for displaying the current data available at a manufacturing facility in near-real time. The user interface was developed with HTML5 + CSS3 and AngularJS. I came across this post found in codeforgeek.com by Shahid Shaikh which helps to refresh the DIV using the interval. Very useful post indeed.

I used ChartJS + AngularJS for my own implementation. I used REST API developed based on Web API 2 with Dapper ORM to interact with my Datawarehouse.

Wanna impress your boss or client check these infographic selection sites

Assuming you’re a budding manager and you would like to impress your boss with stunning visualization and present the data in a infographic format so that he feels good about the you did. I came across this post which helps you to quickly understand various infographic tools with good example and reasoning too.

Periodic table of visualization also exists which helps to identify which are the ones to be used for Data, Strategy, Information, Metaphor, Concept and compound visualization. These are very useful one to organize the data visualization according to the content. May be it will take your memories to good old days wherein you have seen the periodic table in chemistry for compounds. Credit goes to Ralph Lengler & Martin J. Eppler, Institute of Corporate Communication, University of Lugano, Switzerland for this wonderful research effort which also details about methodologies.

Periodic Visualization Tables

When it comes to number crunching it is essential that you represent data with good charts. But how do you go about choosing the right charts ? Check on this infographics form labnol.org which would help you to choose the right set of chart  for data analysis.  This gives various chart options to decide based on Time, Frequency, Variables,etc., also seggregated by Composition, Relationship, Comparison and Distribution.


Please provide more comments and feedback.

Social Network Analysis: Calculating Degree with Gephi

In continuation to my earlier post on creating a Simple social network analysis using Gephi on the simple friends network. We will focus on the terminology “Degree” related to the Social Network Analysis in this post. In the previous example I used to Edge List in a CSV format to import the data to Gephi to obtain this social network which is very simple.


Degree is the edges incident on a node. According to Wikipedia, The degree of a node in a network (sometimes referred to incorrectly as the connectivity) is the number of connections or edges the node has to other nodes.

In this outcome are social network diagram you can see Siva has more number of Degrees which can be looked from the gephi as given in below given screenshot.

This shows the following attributes of Siva:

In-Degree: 4 (Vijay, Gopikrishna, Aditya, Kumar) – Head End Points at the Node

Out-Degree:7 (Ilango, Ramesh, Kannan, Aditya, Kumar, Vijay and GopiKrishna) – Tail End points at the Node

Degree: 11

According to Wikipedia, For a node, the number of head endpoints adjacent to a node is called the indegree of the node and the number of tail endpoints adjacent to a node is its outdegree.

Degree Distribution:

The degree distribution displays the count of nodes with the appropriate distribution. This example there are 3 nodes with the degree of 4 and one node with degree 1.

Step by Step Social Network Analysis using Gephi: Getting Started

In continuation to my previous blog post on Social Network Analysis using Gephi, I’m writing this post to explain how do create a very simple social network analysis using Gephi. You can also look at a very good introduction to Gephi written by Martin Grandjean here

Goal and Scenario:

We have a friends network we want to depict visually how the friends are interconnected with each other. The goal is to understand how to use Gephi Step by step along with having very fundamental understanding of how the data is represented.


* You would need the Gephi software which you can download from here.

* Data to be imported

* Fundamental understanding of what is a Graph, Node and Edge. (Please read more here (https://en.wikipedia.org/wiki/Graph_(mathematics)). To understand more visually please refer to this link.

Step by step Instructions:

Step 1: After you install Gephi, you will see a screen like this. Click New Project.

Step 2: In this example we are going to import that data from CSV files and we are going to use them for ease of use. Once you click New Project you will get the following Screen, then click Data Laboratory for importing data.

Step 3: Once you Open the Data Laboratory pane now you click Import Spreadsheet. First import the as table: “Nodes table” with browsing the Friends.csv. Then click next and Finish.

Which will result like the following once you click the finish button.

Step 4: Now you again click Import Spreadsheet. First import the as table: “Edges table” with browsing the Edges.csv. Then click next and Finish.

The results will be available once you click on the Edges in the Data Table as given below:

Steps 5: Now when you click the overview button right below the toolbar you can see the following network diagram created.

Red highlighted portion tells us that it has 8 Nodes and 15 Edges.

Step 6: We can use the Layouts to make it look little better using the Force Atlas 2 and Label Adjust to look clean and better.

We will try to get into more details in the next post with a different example.

Data Visualization: Scatter Plot step by step with R

In continuation to my previous post on scatter plot which was more of an introduction, in this post we will see step by step approach on doing scatter plot with R. Our objective in this post would be to draw a scatter plot using R step by step.


The following table provides the data which will be used in this post. This has two columns one is “Year” and another one is “Total Telephones” which is in millions.

 Source: http://mospi.nic.in/Mospi_New/upload/SYB2014/ch31.html

 Source Data:


Step 1: We have this data in a CSV file named “ScatterPlotData.csv”

Step 2: We will load this data using load.csv method using mydata=read.table(“E:\\Personal\\Learning\\Data Visualization\\ScatterPlotData.csv”,header=TRUE). This will handle the header and load the data appropriately.

Step 3: Now we have the data in mydata

Step 4: Now we can plot the Graph using the following statement :

mydata=read.table("E:\\Personal\\Learning\\Data Visualization\\ScatterPlotData.csv",header=TRUE)
plot(mydata$Year,mydata$TotalTelephones,main="Year Vs Sale of Telephones",xlab="Year",ylab="Sale of Telephones(Millions)",xaxt="n",ann="True")
axis(1, at=1:length(mydata$Year), lab=c(2004,2005,2006,2007,2008,2009,2010,2011,2012,2013))

Step 5: The Result

Data Visualization: Scatter Plot

Scatter Plot

Scatter plot is a graph where in two variables are plotted against X and Y Axes. The plotted data might reveal the correlation between the two variables plotted.


Visual Look:

Scatter plots are similar to line graphs. The only difference is a line graph has a continuous line while a scatter plot has a series of dots. 

Primary goal:

This type of plot is used to identify relationship between the two variables. The relationship could indicate the following:

  • Strength
  • Shape – Linear, Curved, etc.,
  • Direction – Positive or Negative
  • Presence of Outliers

When do we use it?

  • When we need to understand the cause-and-effect relationship
  • When we need to understand the relationship between two variables.

Example scenarios:

  • Age and weight
  • Variation in sales based on certain conditions (E.g., Temperature in the City, Event,etc.,)
  • Increase in adoption of telephones over the years


Example of Scatter Plot done in Excel:

Source Data:


Source: http://mospi.nic.in/Mospi_New/upload/SYB2014/ch31.html


In the next post we will see how we can do the same with “R”.