Successfully reported this slideshow.
Your SlideShare is downloading. ×

Webmapping: maps for presentation, exploration & analysis

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 75 Ad

More Related Content

Similar to Webmapping: maps for presentation, exploration & analysis (20)

Advertisement

More from TimelessFuture (17)

Recently uploaded (20)

Advertisement

Webmapping: maps for presentation, exploration & analysis

  1. 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. 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. 3. 1. Intro to visualization
  4. 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. 5. When to use visualization? • Can be used in different stages • initial exploration, get a grasp (exploratory) Cairo (2016)
  6. 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. 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. 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. 9. What is a “map”? see also: Cairo (2016), AxisMaps
  10. 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. 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)
  12. 12. kolerekaart.nl From static ..
  13. 13. https://rce.webgispublisher.nl/Viewer.aspx?map=Paleogeografischekaarten
  14. 14. https://maps.amsterdam.nl/archeologie/ … to interactive
  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
  23. 23. (Simplified) Steps# visualization data wrangling data enrichment dataset creation
  24. 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. 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. 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. 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. 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
  29. 29. datavizcatalogue.com
  30. 30. 3. Geomaps: two cases
  31. 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. 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. 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. 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. 35. 2.3 Final result (2009) General audience: aiming for simplicity
  36. 36. 2.3 Final result (2009) General audience: aiming for simplicity
  37. 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. 38. Case 2: “Virtual Interiors” Maps
  39. 39. Case 2: “Virtual Interiors” Maps • What: visualize research on 17th century visual artist & art dealer locations/networks (by Weixuan Li)
  40. 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. 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. 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. 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
  44. 44. https://tiles.amsterdamtimemachine.nl/
  45. 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. 46. 2.3 • Web application integrating: • OpenLayers (2D maps) • CesiumJS (3D maps) • Uses spreadsheet (CSV) with Ecartico IDs & polygons (WKT) visualization
  47. 47. work in progress
  48. 48. Historical map layers Historical streetplan layers Data layers (artists, publishers) Timelines Allow for exploration: filtering work in progress
  49. 49. Area-based filtering Thumbnails work in progress
  50. 50. Selected artist Linked Data displays Annotations work in progress
  51. 51. Historical street scenes (Wikidata, Adamnet) work in progress
  52. 52. Historical street scenes (Wikidata, Adamnet) work in progress
  53. 53. Uncertainty displays work in progress 3D / perspective views
  54. 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. 55. 4. Diving into (design) decisions
  56. 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. 57. 4.2 Symbology
  58. 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. 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. 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. 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. 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
  63. 63. https://colorbrewer2.org/ http://tristen.ca/hcl-picker/
  64. 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
  65. 65. Webmapping: final words
  66. 66. Webmapping: final words • Always keep the What/Who/Why in mind • Design == trade-offs • e.g., Overview versus depth
  67. 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. 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. 69. 5. Conclusion • Defining (map) visualization • Map visualization process • Defining questions • Two cases: researchmapper & Virtual Interiors artist locations • Design decisions
  70. 70. www.virtualinteriorsproject.nl
  71. 71. Open University, Technology-Enhanced Learning & Innovation https://www.ou.nl/en/onderzoek-onderwijswetenschappen-leren-en-innoveren-met-ict-onderzoek
  72. 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. 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. 74. Discussion • Questions, ideas, suggestions? ?
  75. 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)

×