Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visualizing Big Data – The Fundamentals

255 views

Published on

This session will touch upon two visual languages, one to describe the context around what is being asked from the data, and the other, to describe what is quantifiable. From these two visual constructs we will go specifically into the following topics: Grids, Balance, Proximity, Contextual Kernels and Hierarchy.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Visualizing Big Data – The Fundamentals

  1. 1. Visualizing Big Data, the Fundamentals Tom Collier StampedeCon 2016
  2. 2. DataVisualization Gain knowledge and insight of our data.
  3. 3. Exploration Explanation Lead in…Goal
  4. 4. Simple Complex Sophistication
  5. 5. Overview Contextual Quantifiable
  6. 6. Structure Aids in guidance of overall balance and proportion Visual hierarchy Design by grid
  7. 7. Grid layout http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ After Before Unsettling No clear goal Order Easy to follow
  8. 8. http://www.vanseodesign.com/web-design/grid-choices/ Anatomy of the Grid
  9. 9. http://www.cnn.com/ Examples
  10. 10. Visual Balance Symmetrical Asymmetrical
  11. 11. Balance Heavy Large Complex Variety
  12. 12. Symmetry
  13. 13. Example http://www.onextrapixel.com/2011/08/25/concept-and-factors-of-balance-in-web-design/
  14. 14. Asymmetry
  15. 15. Example http://www.vanseodesign.com/web-design/web-design-balance/
  16. 16. Proximity Relationships Connections
  17. 17. Proximity Without Purpose With Purpose https://www.smashingmagazine.com/2011/04/proximity-in-design-why-i-can-t-use-my-car-s-a-c/
  18. 18. Proximity Example summary usage quantity user usage user usage client usage client usage usage between t1-t3 0% 25% 50% 75% 100% t1 t2 t3 GET POST OPTION DELETE
  19. 19. Initial iteration usage between t1-t3 0% 25% 50% 75% 100% t1 t2 t3 GET POST OPTION DELETE sum t1-t3 0% 25% 50% 75% 100% Sunburst or tree view to show hierarchy Move usage totals together
  20. 20. Contrasts Color Tone Shape
  21. 21. Consistency Familiar Recognition
  22. 22. Consistency https://www.quora.com/Why-is-consistency-important-in-design No need to re-learn
  23. 23. Tension State of being stretched Mental or emotional strain Relationships between elements Tension Position Negative Space Contrast
  24. 24. Negative space http://inspiredology.com/leveraging-typography-in- web-design/
  25. 25. Visual Hierarchy The arrangement of visual elements to convey importance
  26. 26. Visual Hierarchy BenefitsAliquam erat volutpat. Fusce viverra eros sit amet posuere dictum. Phasellus vel justo quis est blandit convallis. Nulla et faucibus libero, eu facilisis diam. Sed sed lorem iaculis, mattis ipsum a, fringilla nibh. Phasellus ultricies lorem sed ante placerat dignissim. Curabitur ac auctor nisi. Sed ac hendrerit augue, quis condimentum mauris.
  27. 27. Hierarchy Tension Negative space Contrast
  28. 28. Visual Hierarchy
  29. 29. Visual Hierarchy
  30. 30. http://new.pentagram.com/2013/06/new-work-nyc-wayfinding/ Example
  31. 31. Quantifiable DataTypes Perceptual Kernels
  32. 32. DataTypes Range Categories Boolean 11,12,13,14,15,16 M(20-24) F(20-24) Masters Division
  33. 33. Rectangles 0 15 30 45 60 June July August Detect subtle changes
  34. 34. Circles What is the area?
  35. 35. Colors Color change
  36. 36. We all have seen this…
  37. 37. Iterate…iterate some more
  38. 38. FinalThoughts! Less is more

×