0
2011                   Game Design 2                   Lecture 14: Micro / Macro Readingshttp://www.comu346.com           ...
Micro / Macro Readings‘A method for presenting large quantities of data at high  densities in a way that a broad overview ...
Definition• Visualising data at two levels in one image • Micro Data (low level detail) • Macro Data (high level detail)• U...
Layering & Separation?• Layering & Separation == multiple types of  information + how to separate• Micro & Macro == multip...
Spatial• Maps can show geographical breakdown of  a location as well as local detail• Geometry of land mass as well as reg...
4th Dimension• More subtle macro readings can look into  time.
• The circular layout of the centre of Senlis  shows its history as a Gallo-Roman  fortification.
• Glasgow’s industrial history, built around  the River Clyde is apparent by the density  on its shore.• Stirling borders ...
Symbolic Use• Micro / Macro design  is not always geographic.• This poster shows that  from the work of many  hands, one g...
Character Design• In games, it is often possible to read many  scales of information from looking at a  character:  • char...
Combining M/M & L&S• The London Air Quality Network website  has to provide a very dense set of data in  an intuitive inte...
ddddddddddfsdfadf• dd
Meaning through Scale• The Vietnam Veterans Memorial achieves its  visual and emotional strength through  micro / macro de...
• 58,000 dead soldiers• scale can be seen at a  distance• Individual names up close• Ordered by date of  death
Relative Data• http://bit.ly/billiondollargram• Shows spend / cost in billions  from US budget and events• Can see immedia...
Stem and Leaf• Like a bar chart / histogram but uses the  space that would normally be used by solid  blocks of colour.
218 Mountains•d
• Glance tells distribution• Analysis provides more• Scale given• Necessary to round
292 Trains
292 Trains (badly)
• 777 more characters• hard to see how frequently trains leave at a  given hour  • rush hour?  • 11pm trains?
Stem & Leaf Improve?• How can you modify the stem & leaf plot  to show more information (such as  platform number)?
Back to Back S&L
Missile or Toothbrush?• 7000 objects > 10 cm in diameter in space • rocket engines, bin bags, frozen sewage,    shrapnel f...
• Note the ring on the second image. • this is the geostationary orbit used by    satellites• The scale of the problem can...
Why Micro & Macro?• We thrive in information rich contexts• Visually rich displays are not only  appropriate to convey inf...
• If information is spread over multiple  screens, the user needs to keep that  information in memory• If information is c...
• Micro / Macro designs enforce local and  global comparisons but do so without the  need to context switch.• Power is giv...
Downsides of M/M• creating good Micro / Macro design is hard.• it is easier to have one display for each  scale of data.• ...
Too complicated?• Don’t forget that the data is never the  problem.  ‘Clutter and confusion are failures of  design, not a...
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Game Design 2: Micro and Macro Data Visualisation
Upcoming SlideShare
Loading in...5
×

Game Design 2: Micro and Macro Data Visualisation

1,947

Published on

Based on Tufte's "Envisioning Information"

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,947
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Maps like this show two scales of data. you can get overview or look closely for small scale details\n
  • Islands Vs docks\n\nThat there IS a bridge Vs name of bridge\n\nprogress in game terms (unlocks)\n\n
  • not always spatial\n
  • This is Senlis in France - on eof the oldest cities in France.\nThe cathedral started construction in 1153.\nWhat's noticable?\nCircular\nHistory of town is that it was roman - they all had circular border\nmany roman towns have central circle\n\none scale? Buildings and shape\nanother scale? Time and history\n
  • \n
  • Let’s try to read a city we know\n\nWhat you can tell about Glasgow is:\non one scale - you notice geography like the river and fields\n\non another scale, you can read into the history - the city was built on the river, you can read the same image at two scales.\n
  • Contrast with Stirling\n\nStirling\nForth river\nnot particularly more dense around the river\nmore built around the trains\ntells the history\nstirling was important for strategic reasons\ngate between high and lowlands, not industry\n____\n\n
  • \n
  • \nFractal Hand Image\nImage works as one big symbol\nat another level, the idea of many hands working to one plan\n
  • Imagine seeing a bunch of characters fighting below the camera (like a LOTR shot\n\nLow level details\ndeath vs not near death\narmour level\nclass\n\nHigher level deails\nalso at another scale\nclans\nhistory of the team \n\n
  • Cops Vs Robbers - these are robbers\nMicro level would be that there are 11 potential threats\nthat they have certain weapons etc..\n\nmore macro would be \nthat they are in a clan?\nthat this clan 'owns' this area?\n
  • London Air\nMicro\nroads\ngeography\nthis particular reading in this particular year for this particular test\nelements like parks / congestion zone (why pick that area)\nLondon borough by borough comparison\nindividual building areas (park in hackney / old street closeup)\nair monitoring sites\nzoom in for 3d\n \nmacro\npatterns - drag the year bar\ncentre london more than outer\nROADS are ALL bad\nhuge drop off in roads vs non roads\nthis means that pollution disperses \nthings are improving over time\n\n
  • \n
  • \n
  • \n
  • \n
  • The image\nhuge black slab\none scale\nwhole thing in entirety\nanother scale\nwhat 58,000 deaths mean\n
  • \nOrdered by date of death\nAlphabetically reads like a phone book\nby date reads as fitting tribute\n
  • \n
  • Disparity of US military and food&education squares\nComparison between walmart revenue & profits\nSolar Energy panel\nBill Gates!\nPharmaceutical Industry - look at gifts to doctors\nIllegal drug market is huge\nGames industry is < 2* yoga industry and almost == with gift cards\nLook at africa's debt\nlook at the rebuild plans vs the huge loss\n\nshows priorities\ncolour used - see the little oped orange square\n
  • \n
  • \n
  • pretend it's bars - you can tell the mean average - 2000 feet - 7000 feet is the biggest range\n\nStem & leaf rounds up or down - each number represents one mountain\nso you can tell that there aren't just 5 mountains that are 19,000 or higher\n you can tell there's one that's 19,300, 19,900, 19,700, 19,300, 19000\n\nThis is a mindset - where am I NOT showing info, and where can I show it\n\n\n
  • \n
  • Japanese train timetable\nHour of day of furthest LHS\neach entry beyond to right is times past the hour that the train leaves\n\nyou can tell rush hour - density of time of day\nafter midnight, only 4 trains and WHEN they are\n
  • more wasteful\nmore intuitive, but less useful\n
  • summary screen\nhow tell rush hour?\n11pm trains/\n\n
  • stem uses two dimensions - up / down and going to right\n\nlook at the b2b one\n\nalso telling you which platform!\n\nbalance between density and ease of use\nb2b s&l is better once you can read it.\n
  • look at the b2b one\n\nalso telling you which platform!\n\nbalance between density and ease of use\nb2b s&l is better once you can read it.\n
  • slightly old numbers\neach of these items is deadly\nyou need to know where this stuff is\n\nwouldn't it be useful to SEE where these things are?\n\nyou wouldn't expect nasa to say 'there's a gap!... LAUNCH!'\n
  • each item has data point with it.\norbit, speed\n\nalso has patterns - i.e the density of satellites - you would place your dish higher or lower than the band if possible\n\n\n
  • same sample\nbut look at the ring\ngeostationary \n
  • \n
  • Think about RTS games - \nmicro being small details like what ot build next -\nanother scale being what is overall plan\n\nThink about supreme commander - one player had full map view\n\n
  • \n\nThe reason we like dense info is that it requires cognition but not memory\n\n
  • \npower given…\nmicro macro lets user decide what level to engage at\n\n
  • front office football\nnitty gritty of players\nnot giving overall status really\n\nThe stem and leaf thing - you have to sort and modify the data before you can create - more work\n\nAs you zoom out in Civ, it becomes more top down, icons change and become representative\nat a certain point it becomes an info screen\ngeometry of game\nhot cold et\nbut lose the micro somewhat\n\nit would be ideal to be able to make best of both worlds - zoom out for overview but still have control - contrast with civ 5\n\n\n
  • \n
  • Transcript of "Game Design 2: Micro and Macro Data Visualisation"

    1. 1. 2011 Game Design 2 Lecture 14: Micro / Macro Readingshttp://www.comu346.com david.farrell@gcu.ac.uk
    2. 2. Micro / Macro Readings‘A method for presenting large quantities of data at high densities in a way that a broad overview of the data is given and yet an immense amount of detail is provided.’ Ruddle 2002
    3. 3. Definition• Visualising data at two levels in one image • Micro Data (low level detail) • Macro Data (high level detail)• User / Viewer can get a rough idea at a glance but also see detailed information
    4. 4. Layering & Separation?• Layering & Separation == multiple types of information + how to separate• Micro & Macro == multiple scales of information
    5. 5. Spatial• Maps can show geographical breakdown of a location as well as local detail• Geometry of land mass as well as regional breakdown.
    6. 6. 4th Dimension• More subtle macro readings can look into time.
    7. 7. • The circular layout of the centre of Senlis shows its history as a Gallo-Roman fortification.
    8. 8. • Glasgow’s industrial history, built around the River Clyde is apparent by the density on its shore.• Stirling borders a river but the lack of focus shows its different history.
    9. 9. Symbolic Use• Micro / Macro design is not always geographic.• This poster shows that from the work of many hands, one great plan will be fulfilled.
    10. 10. Character Design• In games, it is often possible to read many scales of information from looking at a character: • character class, team, attack, defence, health etc.
    11. 11. Combining M/M & L&S• The London Air Quality Network website has to provide a very dense set of data in an intuitive interface.• They layer user interface elements over a rich map which shows different types of data as well as different scales of data.• http://bit.ly/londonair
    12. 12. ddddddddddfsdfadf• dd
    13. 13. Meaning through Scale• The Vietnam Veterans Memorial achieves its visual and emotional strength through micro / macro design. (Tufte, p43)
    14. 14. • 58,000 dead soldiers• scale can be seen at a distance• Individual names up close• Ordered by date of death
    15. 15. Relative Data• http://bit.ly/billiondollargram• Shows spend / cost in billions from US budget and events• Can see immediately highest spent areas• Can also see actual numbers
    16. 16. Stem and Leaf• Like a bar chart / histogram but uses the space that would normally be used by solid blocks of colour.
    17. 17. 218 Mountains•d
    18. 18. • Glance tells distribution• Analysis provides more• Scale given• Necessary to round
    19. 19. 292 Trains
    20. 20. 292 Trains (badly)
    21. 21. • 777 more characters• hard to see how frequently trains leave at a given hour • rush hour? • 11pm trains?
    22. 22. Stem & Leaf Improve?• How can you modify the stem & leaf plot to show more information (such as platform number)?
    23. 23. Back to Back S&L
    24. 24. Missile or Toothbrush?• 7000 objects > 10 cm in diameter in space • rocket engines, bin bags, frozen sewage, shrapnel from tests, 1 wrench and 1 toothbrush• Only 5% are functional satellites• Necessary to track for safety of launches
    25. 25. • Note the ring on the second image. • this is the geostationary orbit used by satellites• The scale of the problem can be seen, not only in overall but also in terms of orbit height and relative density of areas.
    26. 26. Why Micro & Macro?• We thrive in information rich contexts• Visually rich displays are not only appropriate to convey information but are often the optimal way to do so.
    27. 27. • If information is spread over multiple screens, the user needs to keep that information in memory• If information is condensed into one screen / graphic, it only requires understanding.
    28. 28. • Micro / Macro designs enforce local and global comparisons but do so without the need to context switch.• Power is given to the user to decide what level of detail is required.
    29. 29. Downsides of M/M• creating good Micro / Macro design is hard.• it is easier to have one display for each scale of data.• it may be necessary to gather or process more data (e.g. stem plot vs bar chart)• it may be difficult to blend the scales together.
    30. 30. Too complicated?• Don’t forget that the data is never the problem. ‘Clutter and confusion are failures of design, not attributes of information‘ (Tufte)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×