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
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)
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
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
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
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
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
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
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
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
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)
