This document provides an overview of effective big data visualization. It discusses information visualization and data visualization, including common chart types like histograms, scatter plots, and dashboards. It covers visualization goals, considerations, processes, basics, and guidelines. Examples of good visualization are provided. Tools for creating infographics are listed, as are resources for learning more about data visualization and references. Overall, the document serves as a comprehensive introduction to big data visualization.

1. Effective
Big Data Visualization
Girish Khanzode

2. Contents
• Big Data Visualization
• InformationVisualization
• DataVisualization
• Histograms
• Visual Patterns
• GestaltTheory ofVisual Perception
• App Design Standards
• Dashboard Design Principles
• Examples of GoodVisualization
• InfographicsTools
• Resources
• References

3. InformationVisualization
• Visualize
– to form a mental image or vision of …
– to imagine or remember as if actually seeing
• Transformation of the symbolic into the geometric

4. InformationVisualization
• The depiction of information using spatial or graphical representations to
facilitate comparison, pattern recognition, change detection and other
cognitive skills by making use of the visual system
• Visualization allows people to offload cognition to the perceptual system,
using carefully designed images as a form of external memory

5. Problem Definition
• Problem - How to understand huge datasets?
• Solution
– Take better advantage of human perceptual system
– Convert information into a graphical representation
• Issues
– How to convert abstract information into graphical form?
– Do visualizations do a better job than other methods?

6. InformationVisualization
• A study of how to represent data by using a visual or artistic
approach rather than the traditional reporting method
• Dashboards and Infographics - a combination of charts, text,
and images to communicate the message of the data

7. Goals ofVisualization
• Aid the understanding of data by leveraging the human visual system's highly-
tuned ability to see patterns, spot trends, and identify outliers
• Well-designed visual representations can replace cognitive calculations with
simple perceptual inferences and improve comprehension, memory, and decision
making
• By making data more accessible and appealing, visual representations may also
help engage more diverse audiences in exploration and analysis

8. Goals ofVisualization
• Make large datasets coherent - present huge amounts of information
compactly
• Present information from various viewpoints
• Present information at several levels of detail - from overviews to fine
structure
• Support visual comparisons
• Tell stories about the data

9. Considerations
• Who is my audience?
• Experts?
• Students?
• General public?
• What do I want to tell them?
• Space or time relationship?
• Multivariate system?
• Does this message belong in a visualization?

10. Process
1. Get some data
2. Organize and structure the data
3. Remove unnecessary data
4. Use statistical methods to discover patterns
5. Choose a visualization style
6. Refine
7. Build interaction, if appropriate and possible

11. Visualization Basics
• Use the eye for pattern recognition
• Use color to make distinctions
• People are good at
– scanning
– recognizing
– remembering images

12. Visualization Basics
• Graphical elements facilitate comparisons via
– length
– shape
– orientation
– texture
• Animation shows changes across time
• Aesthetics make the process appealing

13. Data Infographic
• Infographics use design rules to artfully display text, numbers,
metaphors, and other data types
• A lot of original illustrations are created to explain the data
• an infographic is less likely to include interactive numbers.
• If a lot of design work has gone into displaying information, the graphic is
likely to be an infographic

14. DataVisualization
• A primary goal of data visualization is to communicate information clearly
and efficiently to users via the statistical graphics, plots, information
graphics, tables, and charts selected
• Effective visualization helps users in analyzing and reasoning about data
and evidence
• It makes complex data more accessible, understandable and usable

15. DataVisualization
• Has more and different kinds of data from infographics
• Data changes frequently to indicate changes in status
• An interactive visualization helps you determine what the
data is telling you.

16. Comparison

17. DataVisualization - Contents
• Graph - An x and y axis is used to depict data as a visualization
• Diagram - A visual that shows how something works
• Timeline - A chronology is depicted on a graph to show how something happens or changes
• Template - A guide for something that a user needs to fill in or develop
• Flow chart - A sequential set of instructions that show how something works
• Metaphor - Comparisons of two dissimilar things for the purpose of making a vivid
description
• Mind map - Maps that enable you to show the big picture and the details of a topic on one
sheet of paper.The main topic is in the centre and the subtopics radiate out from it

18. Mind Map
• A diagram used to visually organize
information
• Created around a single concept, drawn as
an image in the centre of a blank
landscape page, to which associated
representations of ideas such as images,
words and parts of words are added
• Major ideas are connected directly to the
central concept, and other ideas branch
out from those

19. Infographics Guidelines
• Visual information Showcase numbers to provide story points
• Don’t over do it
• Avoid text heavy reports
• Try to relate or compare data over groups or over time periods
• Get creative by overlaying images and charts
• Make the infographic easy to understand - First and foremost, an
infographic should be simple. If the information isn’t clear or leads to
confusion, you’ve failed

20. Infographics Guidelines
• Accurate - artwork must accurately reflect the data and
carefully report the trends or patterns of the data
• Credibility - list all the places where the data was gathered
• Complementary colours - An infographic should be eye-
catching
• Provide solid information - something that others will want
to share

21. Using Colors
• Call attention to specific items
• Distinguish between classes of items
– Increases the number of dimensions for encoding
• Increase the appeal of the visualization
• Proceed with caution
– Less is more
– Representing magnitude is tricky

22. Using Colors
• Red-orange-yellow-white
– Works for costs
– Maybe because people are very experienced at reasoning shrewdly
according to cost
• Green-light brown-dark brown-grey-white works for atlases
• Grayscale is unambiguous but has limited range

23. ChartTypes

24. ChartTypes
Waterfall Chart Candlestick Chart

25. ChartType Selection
• Line graph
– Track changes over short and long periods of time. Line graphs are better for smaller changes.
– Line graphs can also be used to compare changes over the same period of time for more than one
group.
• Pie Chart
– Best for comparing parts of a whole.They do not show changes over time.
• Bar Graph
– Compares things between different groups or to track changes over time
– When trying to measure change over time, bar graphs are best if changes are larger

26. ChartType Selection
• Area Graph
– Similar to line graphs
– Used to track changes over time for one or more groups
– Good when tracking the changes in two or more related groups that make up
one whole category
• X-Y Plot
– Used to determine relationships between the two different things
– The x-axis is used to measure one event (or variable) and the y-axis is used to
measure the other

27. Histograms
• A graphical representation of the distribution of
numerical data
• An estimate of the probability distribution of a
continuous quantitative variable
• Divides the values into bins and show a bar plot
of the number of objects in each bin
• The height of each bar indicates the number of
objects
• Shape of histogram depends on the number of
bins

28. Two-Dimensional Histograms
• Shows the joint distribution of the values of two attributes

29. Box Plots
• Displays the distribution of data
• Can be used to compare attributes

30. Scatter Plots
• Attribute values determine the position
• Qualitatively determine if variables
– are highly correlated - linear mapping between horizontal & vertical axes
– have low correlation - spherical, rectangular, or irregular distributions
– have a nonlinear relationship - a curvature in the pattern of plotted points
• Place points of interest in context - color representing special entities

31. Scatter Plots
• Two-dimensional scatter plots most common, but can have three-
dimensional scatter plots
• Additional attributes can be displayed by using the size, shape, and color
of the markers that represent the objects
• It is useful to have arrays of scatter plots to compactly summarize the
relationships of several pairs of attributes

32. Scatter Plot Matrix of Iris Attributes

33. Contour Plots
• A graphical technique for representing a 3-dimensional surface by
plotting constant z slices, called contours, on a 2-dimensional format
• Useful when a continuous attribute is measured on a spatial grid
• Partitions the plane into regions of similar values
• Contour lines that form the boundaries of these regions connect points
with equal values
• The most common example is contour maps of elevation
• Can also display temperature, rainfall, air pressure

34. Contour Plots

35. Matrix Plots
• A graph to assess the relationship among several pairs of variables at same time
• A set of individual scatter-plots
• Can plot the data matrix
• Useful when you have many variables and you would like to examine relationships
between all pairs of variables
• Useful when objects are sorted according to class
• Attributes are normalized to prevent one attribute from dominating plot
• Plots of similarity or distance matrices can also be useful for visualizing the
relationships between objects

36. Matrix Plot

37. Parallel Coordinates Plot
• Used to plot the attribute values of high-dimensional data
• Uses a set of parallel axes
• Each object is represented as a line
• The attribute values of each object are plotted as a point on each
corresponding coordinate axis and the points are connected by a line
• Lines representing a distinct class of objects group together, at least for
some attributes
• Ordering of attributes is important in seeing such groupings

38. Parallel Coordinates Plot

39. Star Plots
• Displaying of multivariate data
• Line connecting the values of an
object is a polygon
• Each star represents a single
observation
• Used to examine the relative values
for a single data point and locate
similar points / dissimilar points

40. Conciseness

41. Readability

42. DataVisualization – Adding Context
• Keep all text horizontal
• Keep all text within range of the visual -The human eye
naturally associates any text within a few centimetres of it as
being related to it
• Use as few words as possible
• Stick to simple words or single characters
• Use single lines of text

43. DataVisualization – Adding Context
• Apply colour sparingly
• Know your data
• Ensure that all text is within the range of the visual it’s related
to because positioning text too far from the targeted visual
can cause confusion
• Make important text a little bigger

44. Page Layout - Z Pattern
• Builds on the idea that the eye travels from one corner of a
rectangular image to the next one after the other until it
reaches the last corner
• Reader scans the content along the path of the Z so place the
title at the top of the Z along with any key content
• Position more visual content in the middle and along the
bottom

45. Page Layout - Z Pattern

46. Page Layout - F Pattern
• Eye-tracking visualizations show that users often readWeb pages in an F-
shaped pattern - two horizontal stripes followed by a vertical stripe
• Users first read in a horizontal movement, usually across the upper part of
the content area - F's top bar
• Next users move down the page a bit and then read across in a second
horizontal movement that typically covers a shorter area than the
previous movement - F's lower bar
• Finally users scan the content's left side in a vertical movement -F's stem

47. Page Layout - F Pattern

48. Visual Patterns
• Balance
– While placing items in visualization, maintain balance
– When too many items are clustered together it’s difficult to see how those items are
related
• Colour
– Random use of colours like red can be misleading, causing the viewer to see an alert
when there’s no cause for alarm
• Hierarchy
– Use hierarchy as it pertains to a text outline

49. Visual Patterns
• Repetition
– Repetition helps people become familiar with the items in a design
– If you use the same elements throughout, people see a unified whole and
don’t have to guess what certain elements mean because they’ve seen those
elements before
• White space
– White space allows content to breathe - image benefits from ample space
around the objects in the visualization
– Too much clutter makes it hard for people to take in the image at a glance

50. GestaltTheory ofVisual Perception
• Gestalt means when parts identified individually have different characteristics to
the whole
• A study by psychologists that explains how eye creates whole from parts
– Proximity – objects closer to each other are perceived as group
– Similarity
– Good continuation or Enclosure
– Closure – Open structures can be easily perceived as closed or complete
– Area
– Symmetry

51. GestaltTheory ofVisual Perception

52. App Design Standards
• Simplicity is strength
– The goal is to explain or uncover new information that can be used to
develop insights
– Focus on too many data points will make the story lose.
– For dashboards, each piece of data should support the whole
• Details matter
– Before the user clicks a link, it should be apparent where that link will
take the user or what type of data will be seen

53. App Design Standards
• Don’t sacrifice quality for time
– If a visualization is hard to decipher, users will reject it
– Spend enough time for development and refinement
• Reward the user with every touch
– Every menu item should do something useful
– Every click should provide information.

54. Dashboard Design
• Designed by objective – consider resulting actions
• Strategic, Analytical and Operational
• Combination of individual data visualizations
• Must fit entirely on one screen
• Monitored at a glance to show degrees of change or quick comparisons
• Important to provide adequate context and keep context items near each
other

55. Dashboard Design Principles
• Good choice of graphics and design
• Aesthetically pleasing
• Enough information to decide if action is necessary
• No scrolling
• Audience, audience, audience!
• Comprehensive Information (enough context)
• Highlight important data
• Use graphics when appropriate
• Real-time vs. batch? - Refresh-rates
• Clear organization

56. Common Dashboard Design Pitfalls
• Exceeding the boundaries of a single screen
• Supplying inadequate context for the data
• Displaying excessive details or precision
• Expressing measures indirectly
• Choosing inappropriate media of display
• Introducing meaningless variety
• Using poorly designed display media

57. Common Dashboard Design Pitfalls
• Encoding quantitative data inaccurately
• Arranging the data poorly
• Ineffectively highlighting what’s important
• Cluttering the screen with useless decoration
• Misusing or overusing colour
• Designing an unappealing visual display

58. Examples of GoodVisualization
• Webdesignerdepot – 50 great examples of data visualization
• DataVis.ca –Gallery of DataVisualization
• Data Mashup - 50 Great Examples of DataVisualization!
• Designmodo - 20 Professional Examples of DataVisualization
• General Electric - DataVisualization
• Megan Jaegerman’s - News Graphics
• OptimizeThis-DataVisualization Examples
• University of Chicago –DataVisualization Challenge
• Information is Beautiful -Over 300 of the best data-visualizations & infographics
• Mashable - 9 Captivating DataVisualization Projects
• Master’s In Data Science –10 Cool Big DataVisualizations
• Mashable - data-visualization-projects

59. InfographicsTools
• Piktochart (http://piktochart.com) - Create your own infographics by
using templates. Free and fee versions are available
• Venngage (https://venngage.com) - Free and fee versions are available.
• Creatly (http://creately.com): Useful for creating good looking diagrams.
Free and fee versions are available
• easel.ly (http://easel.ly) - Easy drag-and-drop features
• Wordle (www.wordle.net/create) - Lets you create a free word cloud for
any URL

60. D3.js
• A data-driven documents based JavaScript library for producing dynamic and
interactive data visualizations in web browsers
– Not a Charting Library (like Highcharts)
– Not a Graphics Layer (SVG, HTML + CSS)
– Not a SVG Polyfill (like RaphaelJS)
• API
– Data (comes with lots of utilities for processing data)
– Visualization (to bind and transform DOM elements)

61. Resources
• Jen Underwood Blog http://www.jenunderwood.com/gallery.htm
• http://blog.threestory.com/
• Stephen Few http://perceptualedge.com
• EdwardTufte http://www.edwardtufte.com/tufte
• Choosing Right ChartType http://www.labnol.org/software/find-right-chart-type-for-your-data/6523/
• Word Clouds http://www.wordle.net
• Tableau http://www.tableau.com/
• JavaScript InfoVisToolkit http://philogb.github.io/jit
• D3 http://d3js.org
• OpenLayers http://openlayers.org/
• PolyMaps http://polymaps.org/
• Open Street Map http://www.openstreetmap.org/
• CharlotteVisualization Centre https://viscenter.uncc.edu

62. References
1. Frisby, J. P. & Stone, J.V. (2010). Seeing:The computational approach to biological vision (2nd Ed.).Cambridge: MIT Press
2. Bruce,V. &Young, A. (1998). In the eye of the beholder:The science of face perception. NewYork: Oxford
3. Top Considerations for EffectiveVisualizations,TWDI, Dec 2013
4. What Makes aVisualization Memorable?, MIT/IEEE, Aug 2013
5. Delivering Self-Service BI, DataVisualization, and Big DataAnalytics, Intel, June 2013
6. DataVisualization:When Data Speaks Business,TEC, Sept 2013
7. Interactive DataVisualization:The IT Perspective,Aberdeen,July 2013
8. AVisualization isWorth aThousandTables,Ziff Davis, June 2012
9. Interactive DataVisualization: Strategies and KeyTechnologies, Aberdeen, March 2012
10. Principles of DataVisualization -What We See in aVisual, FusionCharts, Feb 2012

63. ThankYou
Check Out My LinkedIn Profile at
https://in.linkedin.com/in/girishkhanzode