Visualization redesign: Rules of engagement

Design is not a science. But “not a science” isn’t the same as “completely subjective”. In fact, the critique process has brought discipline to design for centuries. For visualizations which are based on an underlying shared data set, there’s an opportunity for an additional level of rigor: to demonstrate the value of a critique through a redesign based on the same data.

Criticism through redesign may be one of the most powerful tools we have for moving the field of visualization forward. At the same time, it’s not easy, and there are many pitfalls, intellectual, practical, and social. How can we use the tool of criticism to best advantage, with awareness and respect for all involved? Here are some suggestions, which fall into three categories: maintain rigor, respect for designers, and respect for critics.

1. Maintain rigor

As with a scientific experiment, it’s important to know the reason for a redesign — what is being “measured”, in a sense. There are many possible goals for a visualization. A critic who creates a redesign should be explicit about the goal — and the fact that they may be interested in a different goal than the designer.

Second, critics must be honest about any simplifying assumptions. If a redesign shows less data than the original, that should be mentioned up front. Otherwise, there’s a danger that any perceived simplicity of a redesign is really just the result of a reduction in data.

Part of maintaining rigor is acknowledging situations where professional judgments don’t agree, and finding ways to come to an understanding. The first step is to have a conversation about the source of the disagreement. Very often it turns out that different professionals have different criteria for success for a visualization, or have different goals in mind; clarifying these is extremely useful to the field.

2. Respect the designer

All redesigns have the potential to seem adversarial, as if the critic is pointing out flaws in the designer personally, asserting their own superior skills, or even, as assigning some blame for a disaster. But it isn’t a pleasant experience. Therefore making the process more friendly for the designer is a good idea.

3. Respect the critic

Criticism is hard, as hard as design. Indeed, in established media (books, movies, music) good critics are recognized as experts in their own right. As a field, we should give the same respect to our visualization critics.

A point for designers is to keep in mind the goal of the critique process: ultimately, none of this is a personal evaluation, but instead a way for the field as a whole to improve.

Conclusion

Data visualization is still a new field. It’s already become an essential medium for journalists, scientists, and anyone else who needs to understand data. But the medium is far from understood. It’s early still, and there’s a lot of room for improvement. Therefore criticism, and redesign is an essential part of visualization criticism.

Source: https://medium.com/@hint_fm/design-and-redesign-4ab77206cf9#.7l57fdh70

Interactive Marketing Dashboard

A marketing dashboard prominently displays the funnel and other related metrics to help marketing decision-makers allocate campaign spend. It’s important that each lead, web visit and win is assigned a tangible value in order to help marketers correctly gauge the success of key campaigns.

Good points about this dashboard.

  1. The dashboard conveys all the important KPIs for the audience in a very simplified manner.
  2. It has a summary on both the sides of the dashboard and a section at the top which means the user gets an overall view of what is happening in the data. These important KPIs are displayed with aid of appealing visualization.

Improvements:

  1. No single color legend across the dashboard.
  2. The ‘Conversion by Form’ visualization can be shown as a bar graph as the current graph is difficult to understand as what amount has been converted to for each page.
  3. Color legends are not defined anywhere on the dashboard. The user has to hover over the chart to understand what color belongs to channel market in case of market channel breakdown or page in case of landing page success rate.

Reference:  https://dashdemo.sisense.com/app/main#/dashboards/582a26af0ff585080700002c?r=false&h=false&t=false&l=false&volatile=true

 

 

Bar Charts – Keeping it Simple

One of the most basic and most used charts that everyone uses is the bar chart. While it is the most basic, it can also be considered as one of the plainest ones and the urge to spruce it up and make it more flash is sometimes too strong to resist. However strong that urge is, it is better for you to ignore it. By adding these additional things, you are running the risk of muddying the point of your visualization and losing the meaning. It also has the effect of taking the attention of the viewer away from the story of your visualization.

  1. Remove 3d effects, shadows, gradient color fills, and any other special flashy effects
  2. Order the Data
  3. Show who the author of the data is and cite it
  4. Label the Axis
  5. See what additional information can be used to support the data you already have

Reference:

https://www.prometheusresearch.com/information-design-five-ways-to-improve-your-bar-graph/

New York Times Does a Great Job on Data Visualizations and What We Can Learn From?

One of the secrets to why New York Times keeps its success is synthesized design processes. Below are the ten characteristics that they use to make its data visualization article powerful and successful.

  1. Clarity of context and purpose: New York Times establish the goal and clarify the audience’s need before design a visualization. It would ask:
    1. Does it interact with the audience and let them feel connected?
    2. Does it enhance a specific editorial perspective?
    3. Which format is the best to deliver the message?
  2. Respect for the reader: New York Times makes its subject accessible. It not only delivers clarity but also presents simplicity. Let the readers can get quick access. Moreover, New York Times would adjust immediacy based on the level of the subject. For example, it wants its audiences to put more effort and get rewarded with the insight derived as a result. It would increase complexity.

    NYT
    NYT
  1. Editorial Integration: combine the graph with the article. Let them coherent and support each other.
  2. Clarity of questions: the format of visualization effectively and perfectly aligned to the questions they are answering.
    NYT
    NYT

     

  3. Data research and preparation: it makes a lot of effort on cross departments research and development of programming libraries to get rich and deep data resources, and offer multi-dimension information.
  4. Visual restraint: deploy right color, catch reader’s attention, and let them recognize immediately.
    NYT
    NYT

     

  5. Layout and placement: whether it is full columns, double page spreads or dramatic diagonals, the Times ensures each graphic has the perfect stage to amplify the impact of the visual’s relationship with an article.
  6. Diversity of techniques: its interactive graph shows immense flexibility and versatility. No repeated representation and each piece is built attentively and informatively.

    NYT
    NYT
  7. Technical Execution: multiple formats of chart display.
  8. Annotation: well use of labels, description, and text explanation to help readers understand graph.
    NYT
    NYT

    Reference: http://www.scribblelive.com/blog/2012/04/02/10-things-you-can-learn-from-the-new-york-times-data-visualizations/

When subway/tube map meets data visualization

For the last blog posting I wanted to know how many types of visualization are out there and when to use them in different occasion.

By searching Internet I got to know that most of visualization fall into categories like 1D/Linear, 2D/ Planar, 3D/Volumetric, nD/Multidimensional, Tree/Hierarchical and network.

What got my attention most was subway/tube map under network category. At first glance I thought it was just for subway transportation but turned out it was for network visualization.

The subway/tube map connects different tasks into one network. In the MAP of All YAHOO! APIs and SERVICES we can see there are clear lines of tasks but each line networks with other lines of take. The network visualization clearly defines line of tasks with distinguished color. Readers can follow a particular line of task that they want to focus. Each “station” has it’s own name and unique symbols. Readers don’t need to read the words/ terms but can easily tell what’s the task/function on the particular spot. There’s also a clear light background grid organizes the tube map in a restricted lines, so it helps readers eye balance with their memory.

When subway/tube map meets data visualization it creates unique and strongly organized network visualization.

Reference

  1. http://lgimages.s3.amazonaws.com/data/imagemanager/62927/flickr_phploveme_2957594315.png
  2. http://guides.library.duke.edu/datavis/vis_types
  3. https://tfl.gov.uk/corporate/about-tfl/culture-and-heritage/art-and-design/harry-becks-tube-map

Hotels or Airbnb? Redesigning the map

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.

 

What Happened to the Photography Industry in 2016

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/

Is the ultimate goal communication, or engagement?

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

Apply D3.js on Excel API

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

The Emotional Highs and Lows of Donald Trump

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