SlideShare a Scribd company logo
1 of 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)
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
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:
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
VRE prototype (Dec 2020)
“analytical view”
VR display
“experiential” view
Slide: Weixuan Li
1. Intro to visualization
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)
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)
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
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)
kolerekaart.nl
From static ..
https://rce.webgispublisher.nl/Viewer.aspx?map=Paleogeografischekaarten
https://maps.amsterdam.nl/archeologie/
… to interactive
polygraph.cool
combining media sources …
polygraph.cool
https://www.nytimes.com/interactive/2014/upshot/dialect-quiz-map.html
… quiz elements …
https://utrechtinvogelvlucht.nl/ (http://www.webmapper.net/)
… and perspectives
https://www.dordrecht5d.nl/
2. Visualization process
(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
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
• 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
datavizcatalogue.com
3. Geomaps: two cases
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
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
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
→
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
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
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
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/
https://tiles.amsterdamtimemachine.nl/
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/
3. Create (interactive) visualization
• Prototype web
application (Javascript)
integrating:

• OpenLayers (2D
maps)

• CesiumJS (3D maps)

• reads spreadsheet
(CSV) with Ecartico
IDs & polygons (WKT)
4. (Pre)Final result
Historical
map layers Historical
streetplan
layers
Data layers
(artists,
publishers)
Timelines
Allow for
exploration:
filtering
work in progress
4. (Pre)Final result
Area-based
filtering
Linked data images
(selection of points)
work in progress
Historical street scenes
(Wikidata, Adamnet)
work in progress
3D /
perspective
views
work in progress
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
4. Diving into (design) decisions
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
4.2 Symbology
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
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
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
https://colorbrewer2.org/ http://tristen.ca/hcl-picker/
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
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
5. Conclusion
• Introduction to visualization

• Map visualization process

• Two cases: researchmapper & Virtual
Interiors artists locations

• Design decisions
www.virtualinteriorsproject.nl
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
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
Discussion
• Questions, ideas, suggestions?
?
@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)

More Related Content

More from TimelessFuture

KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...
KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...
KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...TimelessFuture
 
Chaos&Order: Using visualization as a means to
 explore large heritage collec...
Chaos&Order: Using visualization as a means to
 explore large heritage collec...Chaos&Order: Using visualization as a means to
 explore large heritage collec...
Chaos&Order: Using visualization as a means to
 explore large heritage collec...TimelessFuture
 
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...TimelessFuture
 
“More than Meets the Eye” - Analyzing the Success of User Queries in Oria
“More than Meets the Eye” - Analyzing the Success of User Queries in Oria“More than Meets the Eye” - Analyzing the Success of User Queries in Oria
“More than Meets the Eye” - Analyzing the Success of User Queries in OriaTimelessFuture
 
Not available, or not found? Lessons from user queries in the Oria catalog at...
Not available, or not found? Lessons from user queries in the Oria catalog at...Not available, or not found? Lessons from user queries in the Oria catalog at...
Not available, or not found? Lessons from user queries in the Oria catalog at...TimelessFuture
 
Webarchief & Wetenschap (Dutch)
Webarchief & Wetenschap (Dutch)Webarchief & Wetenschap (Dutch)
Webarchief & Wetenschap (Dutch)TimelessFuture
 
From Exploration to Construction
 - How to Support the Complex Dynamics of In...
From Exploration to Construction
 - How to Support the Complex Dynamics of In...From Exploration to Construction
 - How to Support the Complex Dynamics of In...
From Exploration to Construction
 - How to Support the Complex Dynamics of In...TimelessFuture
 
Towards Multidimensional Web Archive Access (IIPC 2016)
Towards Multidimensional Web Archive Access (IIPC 2016)Towards Multidimensional Web Archive Access (IIPC 2016)
Towards Multidimensional Web Archive Access (IIPC 2016)TimelessFuture
 
Active & Passive Utility of Search Interface Features in different Informatio...
Active & Passive Utility of Search Interface Features in different Informatio...Active & Passive Utility of Search Interface Features in different Informatio...
Active & Passive Utility of Search Interface Features in different Informatio...TimelessFuture
 
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)TimelessFuture
 
The Value of Multistage Search Systems for Book Search
The Value of Multistage Search Systems for Book SearchThe Value of Multistage Search Systems for Book Search
The Value of Multistage Search Systems for Book SearchTimelessFuture
 
Towards Research Engines: Supporting Search Stages in Web Archives (2015)
Towards Research Engines: Supporting Search Stages in Web Archives (2015)Towards Research Engines: Supporting Search Stages in Web Archives (2015)
Towards Research Engines: Supporting Search Stages in Web Archives (2015)TimelessFuture
 
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)TimelessFuture
 
Finding Pages on the Unarchived Web (DL 2014)
Finding Pages on the Unarchived Web (DL 2014)Finding Pages on the Unarchived Web (DL 2014)
Finding Pages on the Unarchived Web (DL 2014)TimelessFuture
 
From multistage information seeking models to multistage search systems (IIiX...
From multistage information seeking models to multistage search systems (IIiX...From multistage information seeking models to multistage search systems (IIiX...
From multistage information seeking models to multistage search systems (IIiX...TimelessFuture
 
WebART - "Data Digging" - eHumanities Group 2013
WebART - "Data Digging" - eHumanities Group 2013WebART - "Data Digging" - eHumanities Group 2013
WebART - "Data Digging" - eHumanities Group 2013TimelessFuture
 
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)TimelessFuture
 

More from TimelessFuture (17)

KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...
KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...
KNVI 2017: De collectie in een ander licht - Creatieve inzet van nieuwe techn...
 
Chaos&Order: Using visualization as a means to
 explore large heritage collec...
Chaos&Order: Using visualization as a means to
 explore large heritage collec...Chaos&Order: Using visualization as a means to
 explore large heritage collec...
Chaos&Order: Using visualization as a means to
 explore large heritage collec...
 
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...
Workshop: Inspirational Journeys - Challenges and Solutions for Visual Naviga...
 
“More than Meets the Eye” - Analyzing the Success of User Queries in Oria
“More than Meets the Eye” - Analyzing the Success of User Queries in Oria“More than Meets the Eye” - Analyzing the Success of User Queries in Oria
“More than Meets the Eye” - Analyzing the Success of User Queries in Oria
 
Not available, or not found? Lessons from user queries in the Oria catalog at...
Not available, or not found? Lessons from user queries in the Oria catalog at...Not available, or not found? Lessons from user queries in the Oria catalog at...
Not available, or not found? Lessons from user queries in the Oria catalog at...
 
Webarchief & Wetenschap (Dutch)
Webarchief & Wetenschap (Dutch)Webarchief & Wetenschap (Dutch)
Webarchief & Wetenschap (Dutch)
 
From Exploration to Construction
 - How to Support the Complex Dynamics of In...
From Exploration to Construction
 - How to Support the Complex Dynamics of In...From Exploration to Construction
 - How to Support the Complex Dynamics of In...
From Exploration to Construction
 - How to Support the Complex Dynamics of In...
 
Towards Multidimensional Web Archive Access (IIPC 2016)
Towards Multidimensional Web Archive Access (IIPC 2016)Towards Multidimensional Web Archive Access (IIPC 2016)
Towards Multidimensional Web Archive Access (IIPC 2016)
 
Active & Passive Utility of Search Interface Features in different Informatio...
Active & Passive Utility of Search Interface Features in different Informatio...Active & Passive Utility of Search Interface Features in different Informatio...
Active & Passive Utility of Search Interface Features in different Informatio...
 
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)
Supporting the Process - Adapting Search Systems To Search Stages (ECIL15)
 
The Value of Multistage Search Systems for Book Search
The Value of Multistage Search Systems for Book SearchThe Value of Multistage Search Systems for Book Search
The Value of Multistage Search Systems for Book Search
 
Towards Research Engines: Supporting Search Stages in Web Archives (2015)
Towards Research Engines: Supporting Search Stages in Web Archives (2015)Towards Research Engines: Supporting Search Stages in Web Archives (2015)
Towards Research Engines: Supporting Search Stages in Web Archives (2015)
 
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)
WebART: hoe maak je webarchieven bruikbaar voor de wetenschap? (Dutch)
 
Finding Pages on the Unarchived Web (DL 2014)
Finding Pages on the Unarchived Web (DL 2014)Finding Pages on the Unarchived Web (DL 2014)
Finding Pages on the Unarchived Web (DL 2014)
 
From multistage information seeking models to multistage search systems (IIiX...
From multistage information seeking models to multistage search systems (IIiX...From multistage information seeking models to multistage search systems (IIiX...
From multistage information seeking models to multistage search systems (IIiX...
 
WebART - "Data Digging" - eHumanities Group 2013
WebART - "Data Digging" - eHumanities Group 2013WebART - "Data Digging" - eHumanities Group 2013
WebART - "Data Digging" - eHumanities Group 2013
 
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)
WebART: Facilitating Scholarly Use of Web Archives (IIPC, Apr. 2013)
 

Recently uploaded

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataBabyAnnMotar
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxElton John Embodo
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Seán Kennedy
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptshraddhaparab530
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxiammrhaywood
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...JojoEDelaCruz
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxRosabel UA
 

Recently uploaded (20)

MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
Measures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped dataMeasures of Position DECILES for ungrouped data
Measures of Position DECILES for ungrouped data
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docx
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
ENG 5 Q4 WEEk 1 DAY 1 Restate sentences heard in one’s own words. Use appropr...
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptx
 

Webmapping: 

Maps for presentation, exploration & analysis

  • 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”
  • 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)
  • 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
  • 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/
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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)