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.
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.
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.
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.
VRE prototype (Dec 2020)
“analytical view”

6.
VR display
“experiential” view

7.
Slide: Weixuan Li

8.
1. Intro to visualization

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.
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.
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.
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.
kolerekaart.nl
From static ..

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

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
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.
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.
• 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.
datavizcatalogue.com

26.
3. Geomaps: two cases

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.
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.
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.
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.
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.
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.
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.
https://tiles.amsterdamtimemachine.nl/

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.
3. Create (interactive) visualization
• Prototype web
application (Javascript)
integrating:
• OpenLayers (2D
maps)
• CesiumJS (3D maps)
• reads spreadsheet
(CSV) with Ecartico
IDs & polygons (WKT)

37.
4. (Pre)Final result
Historical
map layers Historical
streetplan
layers
Data layers
(artists,
publishers)
Timelines
Allow for
exploration:
filtering
work in progress

38.
4. (Pre)Final result
Area-based
filtering
Linked data images
(selection of points)
work in progress

39.
Historical street scenes
(Wikidata, Adamnet)
work in progress

40.
3D /
perspective
views
work in progress

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.
4. Diving into (design) decisions

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.
4.2 Symbology

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.
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.
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.
https://colorbrewer2.org/ http://tristen.ca/hcl-picker/

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.
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.
5. Conclusion
• Introduction to visualization
• Map visualization process
• Two cases: researchmapper & Virtual
Interiors artists locations
• Design decisions

52.
www.virtualinteriorsproject.nl

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.
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.
Discussion
• Questions, ideas, suggestions?
?

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)