Game Design 2: Micro and Macro Data Visualisation
1 like1,248 views
1) Micro/macro readings present data at multiple scales within a single image, allowing users to get a broad overview and see important details. 2) Maps are a common example, showing both geographical context and local information. 3) Effective micro/macro design gives meaning through relative scale, such as the Vietnam Veterans Memorial showing both the total deaths and individual names. 4) While challenging to design well, micro/macro visualizations optimize how information is conveyed by avoiding separate screens or context switching.
Game Design 2: Micro and Macro Data Visualisation
- 1. 2011 Game Design 2 Lecture 14: Micro / Macro Readings http://www.comu346.com [email protected]
- 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. 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
- 5. Layering & Separation? • Layering & Separation == multiple types of information + how to separate • Micro & Macro == multiple scales of information
- 6. Spatial • Maps can show geographical breakdown of a location as well as local detail • Geometry of land mass as well as regional breakdown.
- 9. 4th Dimension • More subtle macro readings can look into time.
- 11. • The circular layout of the centre of Senlis shows its history as a Gallo-Roman fortification.
- 14. • 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.
- 15. 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.
- 16. 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.
- 18. 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
- 22. Meaning through Scale • The Vietnam Veterans Memorial achieves its visual and emotional strength through micro / macro design. (Tufte, p43)
- 24. • 58,000 dead soldiers • scale can be seen at a distance • Individual names up close • Ordered by date of death
- 25. 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
- 28. Stem and Leaf • Like a bar chart / histogram but uses the space that would normally be used by solid blocks of colour.
- 29. 218 Mountains •d
- 30. • Glance tells distribution • Analysis provides more • Scale given • Necessary to round
- 31. 292 Trains
- 33. • 777 more characters • hard to see how frequently trains leave at a given hour • rush hour? • 11pm trains?
- 34. Stem & Leaf Improve? • How can you modify the stem & leaf plot to show more information (such as platform number)?
- 35. Back to Back S&L
- 36. 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
- 39. • 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.
- 40. 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.
- 41. • 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.
- 42. • 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.
- 43. 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.
- 44. Too complicated? • Don’t forget that the data is never the problem. ‘Clutter and confusion are failures of design, not attributes of information‘ (Tufte)
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: Maps like this show two scales of data. you can get overview or look closely for small scale details\n
- #9: Islands Vs docks\n\nThat there IS a bridge Vs name of bridge\n\nprogress in game terms (unlocks)\n\n
- #10: not always spatial\n
- #11: 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
- #12: \n
- #13: 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
- #14: 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
- #15: \n
- #16: \nFractal Hand Image\nImage works as one big symbol\nat another level, the idea of many hands working to one plan\n
- #17: 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
- #18: 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
- #19: 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
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: The image\nhuge black slab\none scale\nwhole thing in entirety\nanother scale\nwhat 58,000 deaths mean\n
- #25: \nOrdered by date of death\nAlphabetically reads like a phone book\nby date reads as fitting tribute\n
- #26: \n
- #27: 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
- #28: \n
- #29: \n
- #30: 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
- #31: \n
- #32: 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
- #33: more wasteful\nmore intuitive, but less useful\n
- #34: summary screen\nhow tell rush hour?\n11pm trains/\n\n
- #35: 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
- #36: 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
- #37: 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
- #38: 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
- #39: same sample\nbut look at the ring\ngeostationary \n
- #40: \n
- #41: 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
- #42: \n\nThe reason we like dense info is that it requires cognition but not memory\n\n
- #43: \npower given&#x2026;\nmicro macro lets user decide what level to engage at\n\n
- #44: 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
- #45: \n