Dashboards, Scorecards & Visualization

The quarter has almost come to an end, and Spring break is not far. I have some travel plans, and was looking for places to live. With all the hype about Airbnb, I thought of checking the prices out and the rate difference between a hotel room and an Airbnb room.

I came across a map of US, and the number of Airbnb units in each city. Find the map on this link – Map with Airbnb Units . This map has the number of Airbnb across select cities as size. A larger dot means, there are more number of Airbnb in that city. Upon hovering, a tool tip pops up, which has the average price of a Airbnb unit and a hotel room for the city. For the kind of audience this chart is meant to be , the people who want to compare prices across cities, this is not the best way to do. Essentially because the comparison values aren’t out there explicitly. The size does indicate that number of Airbnb are more in those cities, but it has no indication with price. A better way would be do find the difference in the price of the hotel and airbnb and plot that as bars across each city. In that way the price difference would be more visible and on the first glance, an idea can be obtained about where the Airbnb units are cheaper, which are the cheapest.

A dashboard can also  be built, showing the number of Airbnb across each city as it is, then adding the visualization which shows the difference and a line which shows the price difference relation and the number of airbnb units. Are the number of Airbnb units related to the average price ? Do more units mean a lower average price? Such analytics can be derived.

 

This article gives four ideas about the camera manufacture industry and the market forecast: Smartphones killed the compact camera market, Mirrorless are not fulfilling their promise, The DSLR market is shrinking, and Cameras are for older people.

Audiences: Anyone who cares about the camera industry. The competitor of the camera industry  such as iPhone and

Purposes: Show how the camera industry changes during 2009 to 2016, and make predictions for the next couple years.

Advantages: This dashboard contains a lot of information. The use of color is favorable, some of the data are highlighted with bigger font so that audience can get the idea quickly.

Disadvantages:

When you look close into the graph, there are many logical mistakes and some of the visualization do not make any sense.

In the left corner visualization, 5.9 million cameras is more than 6.3 million cameras.

Below the career market overview, 34% share of the camera market is more than 52%.

108 non-interchangeable lens cameras were made in 2010, but 108 cameras is the same as 100 cameras when put on an axis.

To conclude, some of the visualization have logical problems. I recommend using tableau to generate the dashboard.

Reference:

https://lensvid.com/gear/lensvid-exclusive-happened-photography-industry-2016/

When we see innovative charts, it looks attractive and beautiful. But then we think is it necessary to put so much efforts into one chart which could have been communicated in simple way? Here comes the question of communicating your message and engaging the user to explore the story.

http://graphics.wsj.com/infectious-diseases-and-vaccines/

From the above link, heat maps show the result of vaccination over diseases like Polio, Measles, Hepatitis A. We can see there are lot of efforts taken to create such a colorful and attractive visualization to convey a message that ‘Vaccination eradicated serious diseases.’

Instead of this heat map they could have used line chart as shown in figure below.

https://www.statslife.org.uk/images/significance/2016/graphs/Vac-Figure-8.png

Saying it should have been a line chart forgets two important aspects of communication which are sometimes as important as complying with the “rules” of data visualization.

Data storytelling can be beautiful as well as functional.

So far we have seen many charts. What comes to your mind when you see heat map? I think this a novel and interactive design delighted with the density of data which you can further explore. And the impact of vaccination was clearly displayed. Simple line chart also conveys the same message but beauty and functionality together achieve more.

The perfect chart does not exist.

When you have rich dataset, story can be told in different ways. Instead of saying what a chart should have been, we should explore what other stories the dataset could say. This doesn’t make one version right or wrong, it just shows new perspectives.

Underlying thought is, “Use data visualization to create ideas not truths” said by Enrico Bertini, assistant professor at the NYU Tandon School of Engineering.

Source: http://www.computerworld.com/article/3048315/data-analytics/the-inevitability-of-data-visualization-criticism.html

The new Microsoft Excel API has its own built-in chart resource, allowing you to drive visualizations from the spreadsheet API. I’m sure the suite of business focused visuals they provide by default will meet a few of the common needs of the average business user.

To help make the Excel API, D3.js visualization be more embeddable and shareable, I recommend providing a caching option that would take a JSON snapshot of the spreadsheet data and allow it to be shared via link, embedded with a copy / paste, email, or any other common channel for collaboration.

In my option, Microsoft Excel took a very active initiatives to integrate the most popular and advanced technology into Excel to attract more users to use Excel.

Reference:https://dzone.com/articles/who-is-getting-to-work-on-the-excel-api-to-d3js-vi

We all know that Donald Trump is very emotional in his public speeches. Periscopic engineers used ten of the major speeches he gave from July through December to visualize his rise and fall of intense emotion: anger, contempt, disgust, fear, sadness, happiness and surprise.

It shows Donald Trump’s anger faces when he’s in rage. Then the visualization shows Trump’s cumulative emotion in a speech, indicating the change of emotion in the speech. After that, we see how Trump’s emotion go ups and downs in difference speeches. The visualization also breakdown and quantify Trump’s emotions in four different categories. It’s an interesting way to depict an emotional president and how he expresses his emotion.

Reference: http://www.periscopic.com/our-work/the-emotional-highs-and-lows-of-donald-trump

As we studied in the class, D3.js stands for Data-Driven Documents, which is widely used in creating the interactive visualizations on the web. The main author of the library, David Miller, gives a couple of reasons of why we should use D3.js:

1.Lots of examples.

Seriously, D3 has the tremendous number of example available online, despite those on the D3 library, thousands of previous D3 examples can be found online, from which you can use as your own source code.Almost every visualization charts you can think of, such as scatterplot, wind map, chord diagram, etc, has code you can use from.

2. Vibrant open-source community

D3 has been forked over 9,000 times on Github, which makes it one of the most popular projects on the website. Also, there are some third-party “wrapper” libraries such as NVD3 and Vega devoted themselves to speed up development time for creating common types of D3 visualizations.

3. Opportunity to learn web development skill.

One thing that makes D3 a better tool than Tableau is that the former has better interactivity thanks to a more scalable web framework. So when you learning D3, you can learn the skills about web development. 

reference:http://d-miller.github.io/Why-Learn-D3/

Last week, I wrote a blog about how visual embellishments and imagery can be useful and help in remembering the data for a longer time.

But, again, the context and the simplicity plays a very important role when using visual imagery. Below is the link for an info graphic, which depicts what do travelers hate the most about travelling.

http://junkcharts.typepad.com/.a/6a00d8341e992c53ef01bb0793f46b970d-pi

This info graphic is poorly organized and instead of making data flow simpler, it is just complicating it more.

Reading the info-graph takes a while and it  strains  the eyes.

The upper left corner says 37% hate to sit in a middle seat, and the aircraft is drawn in the center. This data would have looked much better if the number was placed on the seat. Or best, just present the numbers in the form of a table

37 % Hate sitting on the middle seat

25% Don’t like chatty neighbors ; so on and so forth

Reading the data would take much less time than figuring out each corner of the info-graph and then thinking about why that information was placed where it is.

It is good to use info-graphics to make the data more attractive and present it in a creative way, but then, things like readability, organization, structure and SIMPLICITY should also be kept in mind.

 

Bi- Variate Map: This type of map or choropleth includes two variables on a map representation. It enables us to portray two separate phenomena simultaneously. The two variables should be related to each other as the bivariate map will show agreement or agreement between the variables. If you do not expect any association between them, then a bivariate map is not the right choice.

One of the most important features of choropleth is that it represents only normalized data: standard deviations, nested means, quantiles, and equal areas.

This infographic visualization piqued my interest in bivariate maps and how and where they should be used. Here it is a bivariate map as it renders size by frequency and color by severity simultaneously.

Due to the overlap of data over a particular data point, the different variates are not visible and the saturation and intensity of the color are lost.

To solve this problem,  hexagonal binning has been used which is an effective way to aggregate and visualize data. Binning here represents the number of points that fall within a hexagon on the gridded map.

The dots are proportionally sized by the amount of time over the past five years that experienced drought (the largest dots representing 80% – 100% of the time). It is difficult to show time as a dimension in a static map and is shown in this map by representing each location by how much it has experienced any drought over the past five years. (0-20%, 20-40%, 40-60%, 60-80%, 80-100%).

The second variate is the color which is a weighted value of the intensity of those droughts (deep purple indicates frequent “exceptional” most severe droughts). It is based on the weighted sum of the number of weeks that it experienced droughts(worse droughts count more).

Both the variates are joined on the map by location and that makes it easy to understand. It is one of the most effective ways to show the dynamics of drought and can be used to represent social, geographic and demographic data in a more potent visualization form.

Source: https://adventuresinmapping.files.wordpress.com/2016/07/fiveyearsofdrought1.jpg

 

 

The main purpose of visualization is to represent the data in such a way that it becomes easy for the viewers to focus on the important details. This allows for a fair amount of flexibility on deciding the type of data representation. Different situations call for different designs, but there are certain cardinal rules that shouldn’t be broken lest it leads to confusion and misunderstanding. A few important ones are:

Baseline should be zero for bar charts

The data represented in bar charts are always correlated to the length of the bars. Hence, it is imperative that the baseline always starts at zero.

The picture above depicts the type of error that would creep in when the baseline is changed from zero. It is seen that the first bar is progressively shortening while the second one, though shortening, looks comparatively tall, giving a false representation.

Over-segmenting pie/donut charts

The general consensus is that the use of pie charts for data representation should be minimized. While that is a discussion for another day, pie charts, if not done properly face a lot of restrictions.

The picture shows everything that could go wrong while designing a pie chart. It tends to clutter if the number of sections goes past four or five. A pie chart like the one depicted above gives no information to the viewer. It would be a better idea to go for alternative representation types for representing data involving a lot of variables.

Respecting the parts of a whole

Data representations which are used to portray multiple distinct non-overlapping proportions should keep in mind that the final representation to do justice to the whole. Consider the given example. While the figure on the left adheres to the principle of respecting the parts of a whole, the one on the right shows exactly what could go wrong in such a representation.

Serve the main purpose

The main purpose of any data representation is to show the data in a lucid and appealing manner.

The whole purpose is defeated if the data representation doesn’t portray the data in a way that is not easily perceived by the viewers. Altering symbol sizes and shapes, using transparency and organizing data into subgroups are some of the ways to counter this problem of overplotting.

Explain the encodings/symbols

Never assume that the data represented is obvious and easy to understand. It would go a long way in increasing the quality and relevance of the representation if everything used is labeled and attributed to.

For example, a downward slope, as shown in the picture, could be used to any decreasing variable under the sky. It is only when the axes are labeled and the context explained that the representation starts making sense.

Source: http://flowingdata.com/2015/08/11/real-chart-rules-to-follow/

Data visualization is widely used to convey information, to prove certain facts and to show trends. But often the visualization are deceptive, they are modified in such a way that they prove a certain claim. Following are some techniques to identify data visualization deception:

1. Truncated Axis: The Y-axis can be altered with to exaggerate the values being represented. Instead  of having the origin as 0, it can be started with any different value to give an illusion of higher values. This is one the most common techniques for deception.
2. Area as Quantity: Using area coverage to denote quantity is also a widely used data deception technique. The values can be denoted as circles or any other shape denoting area. Some area shapes can appear to be greater in size but may not have the correct interpretation of the information. One-to-one mapping between data and graphical is a better way of using area as quantity.
3. Changes in Aspect Ratio: This type of deception is applied to line charts more often. The aspect ratio change may give an illusion of increase or decrease of one quantity against the other. Changes in it can alter the viewers perception about a graph.
4. Inverted Axis: Inversion of axis leads to the change in the direction of the trend. This gives the user a notion of the reversal of the correct information. This technique doesn’t exaggerate or underestimate but completely change the notion of a visualization.

Source: https://medium.com/@Infogram/study-asks-how-deceptive-are-deceptive-visualizations-8ff52fd81239#.58vad76t0