Successfully reported this slideshow.

Webmapping: 

Maps for presentation, exploration & analysis

1 of 56
1 of 56

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Webmapping: 

Maps for presentation, exploration & analysis

  1. 1. @timelessfuture Hugo Huurdeman University of Amsterdam postdoc, Virtual Interiors project Webmapping: 
 
 Maps for presentation, exploration & analysis Guest Lecture, Digital Practice in Archaeology course, UvA/VU (09/03/21)
  2. 2. Today’s program: 0. Intro 1. Introduction to visualization 2. Map visualization process 3. Webmapping: two cases 4. Diving into (design) details 5. Conclusion / discussion
  3. 3. Weixuan Li, PhD researcher Centers of Creativity in Amsterdam of the Dutch “Golden Age” Chiara Piccoli, post-doc Research & 3D visualization of 17th century Amsterdam interiors Hugo Huurdeman, post-doc
 Immersive 3D Interfaces & multilayered maps, user research
 Bart Reuvekamp, Junior Researcher 
 Archival research Applicants: Charles van den Heuvel, Julia Noordegraaf, Gabri van Tussenbroek Virtual Interiors: Imagine an partneres funding:
  4. 4. project: Virtual Interiors “as Interfaces for Big Historical Data” (1) • Two main streams • 3D visualization of 17th century Amsterdam interiors • Deep mapping artist’ locations in Amsterdam • Based on research & historical sources • Serve as entry point for exploring & researching historical data • Analytical and Experiential interfaces: • Via an online research environment → researchers • Via Virtual & Augmented Reality → researchers & ‘casual’ users
  5. 5. VRE prototype (Dec 2020) “analytical view”
  6. 6. VR display “experiential” view
  7. 7. Slide: Weixuan Li
  8. 8. 1. Intro to visualization
  9. 9. 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)
  10. 10. When to use visualization? • Can be used in different stages • initial exploration, get a grasp (exploratory) • as an artefact of ongoing research (discovery) • i.e. “as process” • as an end product (explanatory) • i.e. “as product / outcome” https://www.flickr.com/photos/idvsolutions/8806668702/sizes/o/in/photostream/ Cairo (2016)
  11. 11. 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
  12. 12. 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)
  13. 13. kolerekaart.nl From static ..
  14. 14. https://rce.webgispublisher.nl/Viewer.aspx?map=Paleogeografischekaarten
  15. 15. https://maps.amsterdam.nl/archeologie/ … to interactive
  16. 16. polygraph.cool combining media sources …
  17. 17. polygraph.cool
  18. 18. https://www.nytimes.com/interactive/2014/upshot/dialect-quiz-map.html … quiz elements …
  19. 19. https://utrechtinvogelvlucht.nl/ (http://www.webmapper.net/) … and perspectives
  20. 20. https://www.dordrecht5d.nl/
  21. 21. 2. Visualization process
  22. 22. (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) → Parse, clean
 reporting locations → Get geocodes 
 reporting locations → Project reporting 
 locations onto map Get dataset on
 acquired books library 1 Get dataset news site
 nu.nl on Syrian civil war 2
  23. 23. 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
  24. 24. • 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
  25. 25. datavizcatalogue.com
  26. 26. 3. Geomaps: two cases
  27. 27. 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
  28. 28. Case 1: ResearchMapper 2009-2014 • Climate research mapping • What: projects on climate mitigation and adaptation (locations, text, multimedia) • Who: general visitors of the website klimaatvoorruimte.nl • Why: quick glimpse of conducted projects & their location; visually attractive “hub”. As end product (communication) • How: via interactive map (streamlined functionality)
 map layer: satellite (3D display)
 data representation: thumbnails
  29. 29. 1. Gather data • Dataset creation: gather climate change-related projects, descriptions & media files • Data enrichment: Use Google Earth editor to add placemarks / lines / shapes (try it out here) • Export as KML file →
  30. 30. 2. Create (interactive) visualization • Developing a web application (Adobe Flex*) which integrated the Google Maps API (3D*) • Import the KML file in this application • Decide on base map layer (→ satellite), creating visual designs user interface • Adapting texts / images / videos to fit (iterative process) • Testing with prospective users 
 (+ revisions) * now deprecated
  31. 31. 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
  32. 32. 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) • integrate Linked Data • map layers: historical maps (“tiles”), streetplans (“vector”) • data representation: map points, areas, uncertainty displays
  33. 33. 1. Gather Data • Dataset creation: 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/
  34. 34. https://tiles.amsterdamtimemachine.nl/
  35. 35. 2. Data enrichment • This application makes use of “Linked Data” (explanation) • Ecartico ID → Derive additional information from Ecartico, Wikidata, AdamLink, RKD →Automatically get associated images and information https://lod-cloud.net/
  36. 36. 3. Create (interactive) visualization • Prototype web application (Javascript) integrating: • OpenLayers (2D maps) • CesiumJS (3D maps) • reads spreadsheet (CSV) with Ecartico IDs & polygons (WKT)
  37. 37. 4. (Pre)Final result Historical map layers Historical streetplan layers Data layers (artists, publishers) Timelines Allow for exploration: filtering work in progress
  38. 38. 4. (Pre)Final result Area-based filtering Linked data images (selection of points) work in progress
  39. 39. Historical street scenes (Wikidata, Adamnet) work in progress
  40. 40. 3D / perspective views work in progress
  41. 41. Challenge: uncertainty • Data sparsity • e.g., accuracy of archive materials about painters’ workshop locations • 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
  42. 42. 4. Diving into (design) decisions
  43. 43. 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
  44. 44. 4.2 Symbology
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. https://colorbrewer2.org/ http://tristen.ca/hcl-picker/
  49. 49. 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
  50. 50. Webmapping: final words • Always keep the What/Who/Why in mind • Design == trade-offs • e.g., Overview versus depth • e.g., User-friendliness versus complexity • Webmapping: • compared to display within GIS packages you have to streamline your content (and features) • Again — a (web) map is a selective representation of reality
  51. 51. 5. Conclusion • Introduction to visualization • Map visualization process • Two cases: researchmapper & Virtual Interiors artists locations • Design decisions
  52. 52. www.virtualinteriorsproject.nl
  53. 53. 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
  54. 54. 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
  55. 55. Discussion • Questions, ideas, suggestions? ?
  56. 56. @timelessfuture Hugo Huurdeman University of Amsterdam postdoc, Virtual Interiors project Webmapping: 
 
 Maps for presentation, exploration & analysis Guest Lecture, Digital Practice in Archaeology course, UvA/VU (09/03/21)

×