Author: sun123

Data visualization is a powerful communication tool to support arguments with numbers in a way that is accessible and engaging. However, the influx of poorly designed and misleading deceptive data visualization can be dangerous and we have to be careful of the pitfalls.

So what makes a deceptive visualization to be deceptive? I am happy to share with you a blog about deceptive visualization I read recently when I tried to find some inspiration on my own project work.

1. manipulation of axis orientation/scale

as you can see here, the right side visualization has been truncated in Y axis, which makes the audience has the wrong impression about the difference between X and Y.

2. Area as Quantity (Message Exaggeration)

Alway be careful when you encoding quantitative data with size. If you map the data (quantity ) into the wrong way, say, use radius rather than areas, the result can be exaggerated seriously.

3. Inverted Axis (Message Reversal)

The x and y-axis are put upside down. This distortion leads to reversal of the message rather than an exaggeration or understatement.

Reference: https://medium.com/@Infogram/study-asks-how-deceptive-are-deceptive-visualizations-8ff52fd81239#.bi0qi7zax

 

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/

In this blog, three rules of thumbs have been provided:

1. Have a wide range in both hue and brightness

To have palettes which are varied in brightness, so that the audience can distinguish the information easily. If you use bright color or hue color only, people who are color blind will have difficulties cannot be able to tell the difference, and those ordinary audiences will also be suffered from

2.   Follow natural patterns of color

Sometimes nature can give you the most inspiring instinct. if you look at the landscape below, a sunset or the spring in a forest, you will see the beauty of palette of a light green to a purplish blue or an orange-brown to cold gray…that color makes you fell pleasant when you see natural view will give you similar feeling when you design your own visualization work.

3.  Use a gradient instead of choosing a static set of colors

To extract from the gradients will make your color seems more natural and pleasing. By use of grayscale and grid, designers will be able to switch color by descending hue easily.

Finally, here are some useful links for you guys to make as references when choosing your color palette.

Tools

Color Picker for Data — a handy color tool where you can hold chroma constant and pick your palette with ease

Chroma.js — a JavaScript library for dealing with colors

Colorbrewer2 — a great tool for finding heat map and data visualization colors, with multi-hue and single-hue palettes built in.

gradStop.js — a JavaScript library to generate monotone color schemes and equidistant gradient stops

Color Oracle — a free color blindness simulator for Window, Mac and Linux.

Other Resources

And here are some other good color palette resources we found and loved. While they are not necessarily designed for data visualization, we think you would find them useful.

ColorHunt — high quality color palettes with quick preview feature, great resource if you only need four colors

COLOURlovers — great color community with various tools to create color palettes as well as pattern designs

ColorSchemer Studio — powerful desktop color pick app

Coolors — light weight random color palette generator where you can lock the colors you want and swap out the others

Flat UI Colors — great UI color set, one of the most popular ones

Material Design Colors — another great UI palette. Not only does it provide a wide range of colors, it also provides different “weights” or brightness of each color

Palettab — a Chrome extension that shows you a new color palette and font inspiration with every tab

Swiss Style Color Picker — another collection of good color palettes

reference:

https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.iumxfns41

The typical old-school measures of writing cocktail recipes such as stating different base alcohol in ml and oz, can be teasing at the best.

This data visualization I found online is super interesting and creative. First, every recipe is presented in the forms of image, from the percentage to every different base alcohol you may use. Compare to the old way of listing different stuff in accurate amount, this kind of graph visualizations makes the recipes more obvious and intuitive.

http://www.informationisbeautiful.net/visualizations/cocktails-interactive/

The most important thing is that the interactivity:

As you can see, if you click the different base alcohol tab above, such as Champagne or Gin, drinks using such alcohol will be displayed, which means that you can use it as you guidebook of making your own cocktail parties!

reference: http://www.informationisbeautiful.net/visualizations/cocktails-interactive/

For today’s blog, I want to share an interesting blog I read from last week: WHO SKILLED THE INFOGRAPHIC

“Infographic posting generally rose steadily from 2007 to 2012, where it peaked, and has begun to decline since then,” Sarah Rapp, the principle visualization designer of Adobe wrote in an e-mail.

Publications are under constant pressure of catching eyeballs since public attention is the most scarce resources in this world. Those most talented visualization designers are working on producing simpler and easy-reading content rather those which were popular once with rich and complex interactive that have a smaller readership.

So what worth we rethink is that what kind of infographic do we really need?

The answer is focused on Insight.

The very medium of data-rich infographics might not be the right thing to the general consumers. For example, sometimes, what a general consumer concern is not how the weather radar looks like today, what you need to do is tell him/her whether he should bring um umbrella or not. So, a simple text-based push sometimes is enough for a mobile-first world.

That gets us thinking when we are doing our project or real task work, we don’t need to pursue a fancy or eyeball catching effect, instead, we should spend more time deciding what key message we want to deliver.

 

( the Lens of 9/11 by Local Projects breathtaking figures but not useful all the time)

reference: https://www.fastcodesign.com/3045291/what-killed-the-infographic

For this week, I’d like to introduce you the latest technology of making a three-dimensional effect in visualization. The first figure shows the what American paid for gadget lust in the 90s, 00s, and the recent decades, respectably. As we can see, the vertical axis which shows the different times is a downward sloping trend line instead of a commonly seen horizontal line and the horizontal values which show the money spent shows in a three-dimensional effect. That makes audiences feel closer to the data.

Another similar design: The map of foreclosures (New York Times, 2008) displays multiple variables in a striking 3D graphic.

I think this pattern of design is worth being studying from.

Reference:

1.The Cost of Living on the Bleeding Edge of Gadgetryfigure https://www.smashingmagazine.com/2008/01/monday-inspiration-data-visualization-and-infographics/

2.In the shadow of foreclosures by the New York Times, April 5th 2008http://mapdesign.icaci.org/map-examples/

Interactive graphs are very useful in interpreting different size and portions of different subdivisions, enabling users to explore the data themselves.

To take an example,  figure 1 is Google’s work of displaying a variety of music genres waxing and waning in popularity for the recent 5 years. Based on the user data collected from Google Play Music about the number and genres in their library. The covered genres include from folks and country to R&B and rock. Every genre was presented by a stripe. What interesting is that user can click on the stripe so that we will be able to have a deeper insight of the single genre.

The combination of data and timeline is worth noticing. similarly, Twitter’s engineers are good at this. The graph depicts the hottest keywords on twitter of President Obama’s 2014 State of the Union. Very powerful.

reference: http://blog.udacity.com/2015/01/15-data-visualizations-will-blow-mind.html

When asked wether to buy or rent a house, people find it difficult to make the final decision. The Upshot(find link at the bottom) is a website that provides the reader to figure out, to buy or to rent an apartment, which is the better idea.

This website is inspiring since it provide the reader a comprehensible and user-friendly calculator to help people to resolve varied and complicated financial problem. Technique used behind the website is D3(Data-Driven-Documents, A open source JavaScript library for manipulating documents based on data).The tool is so clear and beautiful so that it can convey complicated information and make people enjoy at the same time.

Below are some basic factors you need to take into account, such as house price, mortgage details, closing cost and maintenance and fees.

After input those data, you will get accurate and clear suggestion about which approach is more economical and practical. The system will calculate the purchase cost and the equivalent renting fees based on the information you give.

The most interesting thing I find from this site is the user can interact with the page (by simply drag the button )and get feedback very quickly, which leads to a very rich user experience. That’s the reason why I strongly recommend you guys have a look at it, very interesting. 

Reference: https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html?_r=1

I would like to share my previous working experience about the application of heat map in generating business insights.

One area where the heat map techniques were widely use is to measure the foot traffic in certain locations and find the time that peak flow of passengers or customers occur, so that company can make the decision about when and where to throw tons of outdoor ads. For example, like the figure below shows in Shanghai, Disneyland is the most attractive location in sub-urban area. As the result, the advertisers can make full use of the ad space in this place.

Another widely used application is to use heat map to find out which parts in your website/app works well and which are not attracting at all. As the figure shows below, blue points stand for less click, while red points means more clicks. Another cool application that alike click map is attention map, showing that which areas of the page has been viewed most by user’s browser or smartphone. There is no doubt that such techniques has significant meaning of analyzing and optimizing web designing.

(reference:https://conversionxl.com/heat-maps/)