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)

12.
kolerekaart.nl
From static ..

13.
https://rce.webgispublisher.nl/Viewer.aspx?map=Paleogeografischekaarten

14.
https://maps.amsterdam.nl/archeologie/
… to interactive

15.
https://maps.amsterdam.nl/archeologie/
… to interactive

16.
polygraph.cool
combining media sources …

17.
polygraph.cool

18.
https://www.nytimes.com/interactive/2014/upshot/dialect-quiz-map.html
… quiz elements …

19.
https://utrechtinvogelvlucht.nl/ (http://www.webmapper.net/)
… and perspectives

20.
https://www.dordrecht5d.nl/

21.
2. Visualization process

22.
(Simplified) Steps#
visualization

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

29.
datavizcatalogue.com

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

44.
https://tiles.amsterdamtimemachine.nl/

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

49.
Area-based
filtering
Thumbnails
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

63.
https://colorbrewer2.org/ http://tristen.ca/hcl-picker/

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.
Webmapping: final words

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

70.
www.virtualinteriorsproject.nl

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)