Data Visulalization
10 likes1,631 views
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.
Data Visulalization
- 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
- 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
- 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