Month: February 2017

Steps to D3JS a line graph:

1. Scale Functions: To make a scale function, you have to know the maximum and minimum data (domain) and output(range).
   • Use this to Position in following manner:

var width = 500;

var xScale = d3.scale.linear().domain([0, 100]).range([0, width]);

• Use it for Reversing the Y-axis:

var height = 400;

var yScale = d3.scale.linear().domain([0, 10]).range([height, 0]);

2. Selection Functions: select() selects the first matching element whilst the d3.selectAll() is ‘greedy’ in that it’ll select everything that matches. Once we’ve made a selection we can manipulate the elements using functions such as

style()- Add/modify CSS style declaration

attr() –  Add/modify element attributes;

3. Data Joins: In our example, we are plotting a line graph. Plotting in line graph is different from others that we learnt in class because data is continuous unlike other discrete idioms that we learnt in class. To make it continuous use ‘Data Joins’.

In our example, We are appending the path to our group for each data point. Then, datum() joins a single entity to a  selection. Attr(“fill”) should be none as it is a line graph and no fill is required Attr(“stroke”) will be the color of the stroke and you can set the width by attr(“stroke-width”).

Reference: https://bl.ocks.org/mbostock/3883245

Financial Data consists of a time series of price and volume values for a wide array of assets. Financial information can be characterized by the following attributes: large amount, multi-dimensional and abstract nature, complex information structure, hidden information. Making it always perplexing and difficult to understand. Visualizing financial data becomes an arduous task. Some of the important Financial indicators are –

• Moving Average Convergence / Divergence (MACD),
• Relative Strength Index (RSI),
• Simple Moving Average (SMA),
• Exponential Moving Average (EMA),
• Rate of Change (ROC)

Yahoo Finance Stock Market Dashboard shows all the above-mentioned indicators and also other possible indicators on its dashboard which makes it complete. It gives you various option to compare different dimensions. It gives you all the important indicators including the Dow Jones Index, S&P 500, Nasdaq and all assets like Silver and Gold rates are updated dynamically. We can select between different time frames for the comparisons and can compare between different stocks. The best part is the Trending tickers in a pallet which shows the important elements like the highest gainer stock, the least gainer, the most active and so on.

The important aspect of Yahoo Finance Stock Market Dashboard is its completeness. And the interactiveness it gives the user to use the dashboard by personalizing it by showing the favorite stocks and the last visited stock.

Ref:  Yahoo Finance Stock Dashboard

I just found this awesome interactive data visualization from here.

As you can see, this can be seen as a PPT slide, or a dashboard, or a web page for displaying the concept of IoT(Internet of Things), how IoT is used on different sides of real life, and main companies involved in IoT’s development.

With computers being made into wearable devices, and big data analysis and internet connection becoming more and more convenient, now it’s time for us to build some magic. We won’t need to use a remote to change TV channel or go back home to heat the dinner, the IoT would complete these for us. It can even open the curtains and wake us up in the morning. To achieving these, we need to integrate the things we want to connect with different kinds of sensors, mini-computers, wires and so on.

Let’s go back to the visualization, we can see that it includes a timeline of IoT, a divergent line chart displaying various ways of IoT(with one click it can furtherly display the specific IoTs), the detailed IoT devices, explicit IoT data, the flow process of IoT, and the companies building IoT(one bad thing about this is that  a lot of company names are not showing on the chart, but we can go to their website by clicking on the circle). Also the whole visualization has a uniform set of colors, making people comfortable to read it and take in the information it conveys. I think this is a good example of data visualization and hope to adapt to it in my future works.

 

 

A part of data analytics is to identify and distinguish a visualization and an info-graphic. They both are pictorial or visual representations of data; however, it is essential to use the right kind of representation based on the type, amount, context and relevance.
A data visualization is usually a representation of data as it is- without much editing and processing, usually representing the data as it is. They are mostly automated visualizations generated through algorithms or programmed codes. We can basically say that a data visualization is bound to tell you about the same data in a different way. It does not try to tell any story by itself.
Info-graphics on the other hand can be elaborate diagrams that tell you something using a lot of illustrations, graphics, pictures and icons. An info-graphic can be modeled, modified and designed to make the user look at it in a way or convey a particular message. Info-graphics can be creative and illustrious and omit some data to make the visualization fit the story line.
Again, all visualizations can be considered as info-graphics but the opposite is not true.

References:http://www.jackhagley.com/What-s-the-difference-between-an-Infographic-and-a-Data-Visualisation

This infographic depicts information about the different types of dogs available and aims to categorize the different dogs and predict the best dogs. The visualization is projected in an x-y axis and divides the dogs into 4 different regions: Rightly ignored, inexplicably overrated, Hot Dog, Overlooked treasure.

Things I liked:

• The graph is aesthetically pleasing as images of the actual dogs used which helps us relate. Also, the use of transparency is excellent.
• The classification of dogs based on size by portraying actual size difference and the use of color to identify the dog type helps us easily identify each dog.
• All these provides us with excellent options if we want to buy one, which in this case is the category ‘Hot Dog’.

Room for improvement:

• Ailment should be deducted instead of being added in the score calculator.
• No indicator is provided of the amount of exercise or attention required for each dog.
• This infographic could be made an interactive one with the details like name and all elements of data score being shown when hovered over each dog symbol. Here viewers cannot view the value of the parameters on which data score is calculated.

Lastly, I would mention that each dog is suited for a specific surrounding and perform unique functions so comparing them on the same platform would be unfair.

Reference: http://infobeautiful4.s3.amazonaws.com/2014/11/RETINA_Best-in_show.png

This interactive visualization is about the probability perspective in Texas hold’em. It was created by a software engineer named Chris Beaumont. The visualization shows us the first two hand win rates by enumerating and computing all possible (nearly 1.3 trillion) combination of hands. There are three graphs, which represent Average Hand Strength, Hand Frequencies and Weighted Hand Strength respectively. Our focus here is the last one because it is the most important part for players.

The VIZ only use cube (totally 13x13x4=676 cubes) as mark and color/satuation as channels. For any pair of two hands, the deeper blue represents the higher win rate and the deeper red represents the higher loss rate. Overall, it is simple and easily to understanding. But the contrast is low, you will be hard to differentiate which pair of hands has 60% win rate between other pair with 40% win rate.To be more distinguishable, it could use more channels, such as more color/satuation or more shapes to represent the win rates.

Reference:

http://chrisbeaumont.org/holdem_odds/#8H+QS

https://www.fastcodesign.com/3042982/infographic-of-the-day/a-data-nerds-guide-to-winning-texas-holdem

 

The visualization is that about the changing nature of the types of jobs, the jobs that pay the salary between $40,000 – $80,000. The types of jobs that pay wages as stated above in 2014 dollars — have shifted since 1980 is the claim of this visualization. The visualization depicts that few job positions are male dominated production occupations while some of the job positions out in the market are female dominated. The x-axis of the visualization shows the number of increase or decrease in the jobs in various domains. The y- axis shows the percentage share of each occupation and the line plot shows different occupations which contributed to the increase or decrease in that domain.

• One of the best parts of the visualization is that it clearly shows the gender breakdown of each occupation. The legend for the plot shows that the plot uses stepped colors to show the percentage of male or female dominance in a particular occupation. For example, the first section of the visualization shows that in professionals and specialists domain people can be dietitians and nutritionists; Librarians, archivists, and curators etc. and the color of the plot shows that whether that job is male or female dominated.
• Another feature of this visualization is that it also depicts which occupations are the biggest gainers and losers by showing the occupations which have gained and lost share; the increase in jobs per 1,000 middle – class jobs; and also, the percentage change in their share.
• The best feature of this visualization is that it shows which industries have the majority share in the jobs per 1,000 middle – class jobs and which sex dominates it.

Reference https://www.nytimes.com/interactive/2015/02/23/business/economy/the-changing-nature-of-middle-class-jobs.html

As we all know, this has been one of the wettest years in California in a long time. People have had evacuation notices due to high chances of flood and reservoirs overflowing. This has been the strongest storms hit since 1995. When I was going through daily news, I found this visualization and it looked very interesting. Though it looks like modern art with so many colors splashed, it makes a lot of sense when closely looked at.

 

The visualization presents the precipitation (rain or hail) in % over the last month and half. I particularly liked this one as it shows all the exact points and helps understanding the most affected areas. The color scale being diverse does not collude and merge with each other and shows discretely the areas of regions. Even though this might be breaking one of the rules of thumb, of presenting in black and white. I understand that it is very helpful in this situation.

 

For our upcoming assignment of interactive dashboards, I feel this has created an impact on me to use what matters. When you want to understand the big picture to its core details in a couple of clicks, it helps to know what exactly is the message you want to convey to the audience.

 

So find the message you want to put across and enjoy the assignment!

https://www.washingtonpost.com/news/capital-weather-gang/wp/2017/02/18/historic-storm-pounds-southern-california-with-high-winds-and-record-rain/?utm_term=.13262146b08f

https://medium.com/@tviit/the-new-york-city-subway-map-redesigned-9a3f776c7627#.32dju0mli

Over the long weekend, I was traveling to NYC for some work and needed to use the subway system for commuting. For non-newyorkers it is a task about what line goes where and how many connections overlap each other.

This is a visualization I came across while reading more about the subways systems. The left hand side shows a simplified version of the original map that is being used by the metro.

There are multiple lines which have been assigned multiple colors.

For example, R,N and  Q lines signify the yellow color and these lines run on several stations. But Q doesn’t go beyond 57th street. That is clearly seen on the redesigned chart on the left.

This chart also shows the junctions and the intersections. On the 42nd street station, all the lines 1,2,3,R,N,Q and S intersect. This can be seen clearly on the redesigned chart, while it takes a bit to decipher that from the original map.

The different thing that they have done is they have visualized multiple lines for each color. Like yellow runs through R,N and Q, they have made 3 separate lines to visualize the yellow R ,N and Q lines as compared to a single line in the original map. These multiple lines makes it easy to track.

On a first glance, the redesigned map looks much simpler, cleaner and neat. Though it has the exact same amount of information as the original map, the new one is simpler to read.

In creating visualizations it is very important to keep in mind a sense of simplicity. For someone who is looking at the visualization for the first times, congested visualizations become difficult to interpret.

 

References :  https://medium.com/@tviit/the-new-york-city-subway-map-redesigned-9a3f776c7627#.32dju0mli

While creating visualizations showing the Key Performance Indicators (KPI’s) for any business, it is extremely important to understand that not all metrics are KPI’s and hence are not useful in evaluating the business.

What is the difference between metrics and KPI’s?

A metric denotes the numeric value of the measure, whereas a KPI explains what is being measured. A metric can be a calculation of different metrics eg average. KPI uses quantifiable metrics to evaluate the business goals. They help to make calculated business decisions based on the metrics obtained.

KPI helps business owners to understand basic business profits like break even points. A balanced scorecard can be created to evaluate the different operating elements like financial growth, customer satisfaction and business processes. This helps business owners to track the progress of their business.

KPI’s help the business owners in the following ways-

• Design good lead strategy
• Choose an effective marketing method which is cost effective
• Define an appropriate pricing strategy for its products.

By combining KPI’s with useful metrics a company can communicate its performance with the internal or external stakeholders. This helps them to identify the areas to work on and improve for the business to do better. It gives the picture of performance against the goals set by the company.

Sources- http://yourbusiness.azcentral.com/differences-between-kpi-metric-24392.html

http://experience.stratusinteractive.com/blog/whats-the-difference-between-a-metric-and-kpi

http://www.bscdesigner.com/quantification-measure-metric-kpi.htm