Webmapping: maps for presentation, exploration & analysis
- 1. @timelessfuture Hugo Huurdeman Open University of the Netherlands Webmapping: Maps for presentation, exploration & analysis Guest Lecture, Digital Practice in Archaeology course, UvA/VU (15/03/22)
- 2. Outline / Learning goals: 1 Broadly define (map) visualization 2 Understand the map visualization process 3 Know basic questions before creating map visualization 4 Understand design choices during map creation process
- 3. 1. Intro to visualization
- 4. Visualization? • “A visualization is any kind of visual representation of information designed to enable communication, analysis, discovery, exploration, etc.” (Cairo, 2016) • “The representation and presentation of data to facilitate understanding (Kirk, 2016)
- 5. When to use visualization? • Can be used in different stages • initial exploration, get a grasp (exploratory) Cairo (2016)
- 6. When to use visualization? • Can be used in different stages • initial exploration, get a grasp (exploratory) • as artefact of ongoing research (discovery) • i.e. “as process” Cairo (2016)
- 7. When to use visualization? • Can be used in different stages • initial exploration, get a grasp (exploratory) • as artefact of ongoing research (discovery) • i.e. “as process” • as end product (explanatory) • i.e. “as product / outcome” https://www.flickr.com/photos/idvsolutions/8806668702/sizes/o/in/photostream/ Cairo (2016)
- 8. Qualities of visualizations • Cairo (2016) suggests a number of qualities of visualizations (which are often not met in practice!) • Functional It should depict data accurately, but also be useful to people • Beautiful A visualization should be ‘attractive’ to different audiences • Insightful It should reveal evidence that we could have missed without the visualization • Enlightening A visualization may “change our minds” (hopefully for the better…) • Truthful A visualization should depict truthful and honest research
- 9. What is a “map”? see also: Cairo (2016), AxisMaps
- 10. What is a “map”? see also: Cairo (2016), AxisMaps • A visual representation of a place • “A map is not an objective depiction of reality” • Practice of cartography: • “as much about removing things as depicting them”
- 11. What is a “map”? see also: Cairo (2016), AxisMaps • A visual representation of a place • “A map is not an objective depiction of reality” • Practice of cartography: • “as much about removing things as depicting them” • Mapping places vs. mapping data • e.g. a map of Amsterdam (reference map) • e.g. a map of household incomes in Amsterdam (thematic map)
- 17. polygraph.cool
- 23. (Simplified) Steps# visualization data wrangling data enrichment dataset creation
- 24. (Simplified) Steps# visualization data wrangling data enrichment dataset creation Represent* Refine* Interact* Clean Parse* Filter* Mine* Acquire* Understand * From 7 stages in data visualization (Fry, 2007)
- 25. (Simplified) Steps# visualization data wrangling data enrichment dataset creation Represent* Refine* Interact* Clean Parse* Filter* Mine* Acquire* Understand # Usually iterative * From 7 stages in data visualization (Fry, 2007)
- 26. (Simplified) Steps# visualization data wrangling data enrichment dataset creation Represent* Refine* Interact* Clean Parse* Filter* Mine* Acquire* Understand → Clean up publisher names → Get geocodes for placenames → Project publisher locations onto map # Usually iterative * From 7 stages in data visualization (Fry, 2007) Get dataset on acquired books library 1
- 27. data wrangling data enrichment visualization Adding geocoordinates to data → geocoding place names • manually • via a tool e.g. QGIS, Google Earth, ArcGIS • automatic geocoding (“mine”) • via a tool e.g. QGIS→MMQGIS plugin, ArcGIS • via an online service e.g. Batch GeoCoder • custom scripting & APIs e.g. Google Geocoding API ($), OpenStreetMap API → Dataset ready to visualize data creation
- 28. • Map visualizations: • Visualize within tool itself • ArcGIS, QGIS (tutorials), etc. • Web export from tool • e.g. QGIS to OpenLayers (via QGIS2Web) • Via online solutions • Google Maps (via My Maps) • Google Earth (via “New Project”) • MapBox, etc. • Via dedicated Javascript libraries • Leaflet • OpenLayers • kepler.gl • Cesium, etc. data wrangling data enrichment visualization Huurdeman, Ben-David, Samar (2013) data creation
- 30. 3. Geomaps: two cases
- 31. Geomaps: initial questions Audience, Medium and Purpose (e.g. Brewer, 2015) • What: • What data would you like to present? (e.g. (un)orderable, numerical) • Who: • What is the intended audience? (e.g. general vs experts) • Why: • What is the purpose? (e.g. data exploration, discovery, explanation) • On the basis of these questions, you decide on the how, e.g.: • static vs interactive map • simple vs complex functionality • see also: UX pattern checklist
- 32. Case 1: ResearchMapper 2009-2014 • Climate research mapping • What: projects on climate mitigation and adaptation (locations, text, multimedia) • Who: general visitors of the website kennisvoorklimaat.nl • Why: quick glimpse of conducted projects & their location; visually attractive “hub”. As end product (communication) • How: via interactive map (streamlined functionality) data representation: thumbnails map layer: satellite
- 33. 2.1 • Gather climate change- related projects, descriptions & media files • Google Earth editor: add placemarks / lines / shapes (try it out here) • Export as KML file → data enrichment dataset creation
- 34. 2.2 • Create web application integrating Google Maps 3D* API • Import KML-file • Decide on base map layer • Adapt design, text, images, videos • Testing with prospective users * now deprecated visualization
- 35. 2.3 Final result (2009) General audience: aiming for simplicity
- 36. 2.3 Final result (2009) General audience: aiming for simplicity
- 37. 2.3 Final result (2009) General audience: aiming for simplicity Visually attractive: 3D animations Visually attractive: photo / video materials General audience: short introductory texts “Hub”: Links to additional information
- 38. Case 2: “Virtual Interiors” Maps
- 39. Case 2: “Virtual Interiors” Maps • What: visualize research on 17th century visual artist & art dealer locations/networks (by Weixuan Li)
- 40. Case 2: “Virtual Interiors” Maps • What: visualize research on 17th century visual artist & art dealer locations/networks (by Weixuan Li) • Who: experts (researchers, such as art historians), but also historically interested general audiences
- 41. Case 2: “Virtual Interiors” Maps • What: visualize research on 17th century visual artist & art dealer locations/networks (by Weixuan Li) • Who: experts (researchers, such as art historians), but also historically interested general audiences • Why: for exploration, ongoing research & (finally) as end product
- 42. Case 2: “Virtual Interiors” Maps • What: visualize research on 17th century visual artist & art dealer locations/networks (by Weixuan Li) • Who: experts (researchers, such as art historians), but also historically interested general audiences • Why: for exploration, ongoing research & (finally) as end product • How: • interactive map (with research functionality) • data representation: map points, areas, uncertainty displays • map layers: historical maps
- 43. 2.1 • Data collection Weixuan Li • Initially artists 1585-1610 • Archival research (e.g. birth/death registries, transportakten, Bredius archive) • (Re)mapping polygons of locations • Extending Ecartico → vondel.humanities.uva.nl/ecartico/ dataset creation
- 45. 2.2 • Make use of “Linked Data” (explanation) • Ecartico ID → Get additional information + images from Ecartico, Wikidata, AdamLink, RKD https://lod-cloud.net/ data enrichment
- 46. 2.3 • Web application integrating: • OpenLayers (2D maps) • CesiumJS (3D maps) • Uses spreadsheet (CSV) with Ecartico IDs & polygons (WKT) visualization
- 47. work in progress
- 48. Historical map layers Historical streetplan layers Data layers (artists, publishers) Timelines Allow for exploration: filtering work in progress
- 50. Selected artist Linked Data displays Annotations work in progress
- 51. Historical street scenes (Wikidata, Adamnet) work in progress
- 52. Historical street scenes (Wikidata, Adamnet) work in progress
- 53. Uncertainty displays work in progress 3D / perspective views
- 54. Challenge: uncertainty • Data sparsity • Uncertainty (MacEachren et al. 2005) • what (attribute/thematic uncertainty) — e.g. are we sure these archive documents talk about the same painter? • where (positional uncertainty) — e.g. where was this painter working exactly? • when (temporal uncertainty) — e.g. when was this painter active? See also: https://www.e-education.psu.edu/geog486/node/693
- 55. 4. Diving into (design) decisions
- 56. 4.1 Generalization & abstraction Map as representation of reality • Abstraction in mapping, e.g.: • Selection (select visible elements) • Simplification (reduce complexity) • Aggregation (group similar points) • Dynamic maps: think of map scales • e.g. scale-dependent visibility; rule- based styling in GIS packages • e.g. marker clustering in Google Maps API OpenStreetMap Selection, simplification Aggregations Google Maps
- 57. 4.2 Symbology
- 58. 4.2 Symbology • In context of cartographic design: “the use of graphical techniques to represent geographic information on a map” (GIS Encyclopedia) • Can we make it Functional - Beautiful - Insightful - Enlightening - Truthful ?
- 59. 4.2 Symbology • In context of cartographic design: “the use of graphical techniques to represent geographic information on a map” (GIS Encyclopedia) • Can we make it Functional - Beautiful - Insightful - Enlightening - Truthful ? • Using visual variables → 4.2.1 • e.g. position, size, shape, orientation • e.g. texture • e.g. color value, hue
- 60. 4.2 Symbology • In context of cartographic design: “the use of graphical techniques to represent geographic information on a map” (GIS Encyclopedia) • Can we make it Functional - Beautiful - Insightful - Enlightening - Truthful ? • Using visual variables → 4.2.1 • e.g. position, size, shape, orientation • e.g. texture • e.g. color value, hue • Try to optimize visual hierarchy → 4.2.2
- 61. Jacques Bertin’s “retinal variables” (1967) • Selective variables - quickly isolate group of variables • Ordered variables - recognizable sequence • Associative variables - recognize as group • Quantitative variables - estimate numerical difference www.axismaps.com/guide/visual-variables
- 62. 4.2.1 Color use • Nominal color schemes • “unorderable”, qualitative data (e.g. land use) • Sequential color schemes • orderable or numerical (e.g. small/medium/large) • Diverging color schemes • natural “mid-point” (e.g. avg per capita income) https://www.axismaps.com/guide/using-colors-on-maps
- 64. 4.2.2 Visual hierarchy_ • “A map’s visual hierarchy should match its intellectual hierarchy.” • Figure - ground relationship (icons-background) • Color-contrasts https://www.axismaps.com/guide/visual-hierarchy
- 66. Webmapping: final words • Always keep the What/Who/Why in mind • Design == trade-offs • e.g., Overview versus depth
- 67. Webmapping: final words • Always keep the What/Who/Why in mind • Design == trade-offs • e.g., Overview versus depth • Webmapping: • compared to display in GIS packages you have to streamline your content (and features)
- 68. Webmapping: final words • Always keep the What/Who/Why in mind • Design == trade-offs • e.g., Overview versus depth • Webmapping: • compared to display in GIS packages you have to streamline your content (and features) • Again — (web) map == selective representation of reality
- 69. 5. Conclusion • Defining (map) visualization • Map visualization process • Defining questions • Two cases: researchmapper & Virtual Interiors artist locations • Design decisions
- 71. Open University, Technology-Enhanced Learning & Innovation https://www.ou.nl/en/onderzoek-onderwijswetenschappen-leren-en-innoveren-met-ict-onderzoek
- 72. References • Bertin, J. (1967), Sémiologie graphique, The Hague, Mouton • Cairo (2016). The Truthful Art - Data, Charts, and Maps for Communication • Fry (2007), Visualizing Data, O’Reilly • Hirtle (2019), Geographical Design - Spatial Cognition and Geographical Information Science. Synthesis lectures on Human-Centered Informatics. doi:10.2200/S00921ED2V01Y201904HCI043 • Huurdeman, H. C., Ben-David, A., & Sammar, T. (2013). Sprint Methods for Web Archive Research. Proceedings of the 5th Annual ACM Web Science Conference, 182–190. • Kirk (2016). Data Visualization - A handbook for Data Driven Design • MacEachren, A. M., Robinson, A., Hopper, S., Gardner, S., Murray, R., Gahegan, M., & Hetzler, E. (2005). Visualizing geospatial information uncertainty: What we know and what we need to know. Cartography and Geographic Information Science, 32(3), 139-. Gale Academic OneFile. • MacEachren, A. M., Roth, R. E., O’Brien, J., Li, B., Swingley, D., & Gahegan, M. (2012). Visual Semiotics Uncertainty Visualization: An Empirical Study. IEEE Transactions on Visualization and Computer Graphics, 18(12), 2496–2505. https://doi.org/10.1109/TVCG.2012.279 • Nussbaumer Knaflic (2015). Storytelling with Data. Wiley • Tufte (1983). The Visual Display of Quantitative Information
- 73. Misc links • Brief cartography guide • https://www.axismaps.com/guide • Cartography and Visualization course • https://www.e-education.psu.edu/geog486 • Visualization lecture Hugo (2018) • https://www.slideshare.net/TimelessFuture/visualization-lecture-clariah-summer-school-2018 • Some mapping advice • https://www.tableau.com/about/blog/2017/8/10-ways-add-value-your-dashboards-maps-75709 • UX Patterns maps: https://twitter.com/smashingmag/status/1247068814589792256 • Chart usage guidelines: • eazybi.com/blog/data_visualization_and_chart_types • Improving the ‘data-ink ratio’: • darkhorseanalytics.com/blog/data-looks-better-naked • Geocoding in QGIS • https://guides.library.ucsc.edu/DS/Resources/QGIS • Webmapping via QGIS • https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html
- 74. Discussion • Questions, ideas, suggestions? ?
- 75. @timelessfuture Hugo Huurdeman Open University of the Netherlands Webmapping: Maps for presentation, exploration & analysis Guest Lecture, Digital Practice in Archaeology course, UvA/VU (15/03/22)