Open Web Mapping: How do we teach this stuff?
Download as PPTX, PDF1 like8,806 views
This document summarizes a presentation on teaching open web mapping. It outlines the desired learning outcomes, which include creating thematic slippy maps with Leaflet and linked geovisualizations with D3. It describes the web mapping technology stack and workflow. It discusses the 2014 curriculum sequence and assessments of how well it worked based on entrance/exit surveys, instructor logs, and student feedback. Students showed a steady increase in learning and self-confidence, though expertise with tools remained low to moderate. The presentation concludes by highlighting some student projects and providing contact information.
![Desired Learning Outcomes
1. Ability to create [animated] thematic slippy maps
using Leaflet
2. Ability to create linked geovisualizations using D3
3. Independent completion of web map from start to
finish in collaboration with colleagues
4. Demonstration of computational thinking, adaptability,
self-direction, and problem solving
5. Integration of theoretical concepts presented in
course lecture into outcomes 1-3.
1. Theoretical frameworks: human-map interaction, usability
engineering, data visualization, and cartographic design.](https://image.slidesharecdn.com/teachingopenwebmapping-151015151252-lva1-app6891/85/Open-Web-Mapping-How-do-we-teach-this-stuff-2-320.jpg)
![• Two different sections = two different learning speeds
• Unforeseen difficulties
• the DOM
• identifying source of methods
• data formatting and conversion
• D3 lessons successful, exciting
“[T]he attitude generally seems to be I’m
learning and know I’ll get beyond this rather
than helplessness or giving up.”
1. Entrance survey
2. Instructor logs
3. Student feedback
4. Exit survey
Results—Instructor Logs](https://image.slidesharecdn.com/teachingopenwebmapping-151015151252-lva1-app6891/85/Open-Web-Mapping-How-do-we-teach-this-stuff-15-320.jpg)
Open Web Mapping: How do we teach this stuff?
- 1. Open Web Mapping How do we teach this stuff? NACIS 2015 Carl Sack University of Wisconsin-Madison cmsack@wisc.edu @northlandiguana
- 2. Desired Learning Outcomes 1. Ability to create [animated] thematic slippy maps using Leaflet 2. Ability to create linked geovisualizations using D3 3. Independent completion of web map from start to finish in collaboration with colleagues 4. Demonstration of computational thinking, adaptability, self-direction, and problem solving 5. Integration of theoretical concepts presented in course lecture into outcomes 1-3. 1. Theoretical frameworks: human-map interaction, usability engineering, data visualization, and cartographic design.
- 3. The web mapping technology stack… Then
- 4. The web mapping technology stack… Then Now TopoJSON PNG, Vector
- 5. The Web Mapping Workflow Based on Donohue (2014)
- 6. The Web Mapping Workflow Based on Donohue (2014)
- 7. The Web Mapping Workflow Based on Donohue (2014)
- 8. The Web Mapping Workflow Based on Donohue (2014)
- 9. The Web Mapping Workflow Based on Donohue (2014)
- 10. The Web Mapping Workflow Based on Donohue (2014)
- 11. The Web Mapping Workflow Based on Donohue (2014)
- 13. How well did it work? Purposes of assessment: 1. Judge learning outcomes 2. Discover threshold concepts Four assessment tools: 1. Entrance survey 2. Instructor logs 3. Student feedback 4. Exit survey
- 14. Student familiarity with HTML, CSS, and JavaScript prior to taking the course 1. Entrance survey 2. Instructor logs 3. Student feedback 4. Exit survey Results—Entrance Survey
- 15. • Two different sections = two different learning speeds • Unforeseen difficulties • the DOM • identifying source of methods • data formatting and conversion • D3 lessons successful, exciting “[T]he attitude generally seems to be I’m learning and know I’ll get beyond this rather than helplessness or giving up.” 1. Entrance survey 2. Instructor logs 3. Student feedback 4. Exit survey Results—Instructor Logs
- 16. Results—Student Feedback •Misconceptions and Threshold Concepts •Use of Online Examples •Progressive Increase in Understanding •Evidence of Computational Thinking “I needed to break it down and solve things one at a time, not all at once.” 1. Entrance survey 2. Instructor logs 3. Student feedback 4. Exit survey
- 17. Results—Exit Survey •Expertise with tools: low moderate •Steady increase in learning and self-confidence 1. Entrance survey 2. Instructor logs 3. Student feedback 4. Exit survey
- 18. Learning Outcomes 1. Ability to create thematic slippy maps using Leaflet 2. Ability to create linked geovisualizations using D3 3. Independent completion of web map from start to finish in collaboration with colleagues 4. Demonstration of computational thinking, adaptability, self-direction, and problem solving 5. Integration of theoretical concepts presented in course lecture into outcomes 1-3. ?
- 24. Thank you. Tutorials based on Geography 575–2014 lab assignments: github.com/uwcart/cartographic-perspectives Student projects gallery: geography.wisc.edu/courses/geog575 My e-mail address: cmsack@wisc.edu My Twitter handle: @northlandiguana Special thanks to Dr. Rob Roth
- 25. Bragging Rights Adam Gile, Dean Olsen, and Sijia Zhang
- 26. Bragging Rights (more at geography.wisc.edu/courses/geog575/f14) Katelyn Kowalsky, Robin Tolochko, and Dylan Moriarty
Editor's Notes
- #13: For the Fall 2014 iteration of the course, we used a scaffolded approach to identify the scope and sequence of course topics and teaching methods that we would use to achieve the desired learning outcomes. Students were first assigned an online JavaScript tutorial to complete before the first lab period in order to introduce them to basic programming concepts. The first few lab periods were entirely instructor-led demonstrations of how to set up components of a development environment and some basic markup and scripting concepts. This doesn’t perfectly match the web mapping workflow, but notice that each lesson topic deals with only one or two parts of the workflow in isolation. The second week was all about data, a module that the 2013 iteration of the course completely lacked. As the course progressed from there, the topics became more integrated across the workflow, and less lab time was spent on direct instruction and more on individualized assistance with the lab assignments. The D3 lessons were carefully scripted to start with introducing how D3 thinks about data, move up through methods used to create and manipulate SVG elements, and finally cover more complex generator and geography methods. Because of the regular informal assessment of student progress conducted throughout the class, we found it necessary in Week 9 to review several concepts introduced earlier in the course. After that, students worked independently in groups on their final projects, with only minimal help from the instructor.
- #25: Questions?
- #26: Now let’s look at some of the work that came out of the course. Here is a screenshot of an example final project created using Leaflet. It was created at the request of a French professor who wanted to analyze the pattern of places in a novel about the tenth arrondissement of Paris. It allows users to filter by the type of location as labeled in the book and play through all of the locations sequencing by page number.
- #27: This final project was created using D3. The students who did this one were inspired by the NACIS-award-winning map “50 Years of Change” created by their peers in 2013. But the design of the site was very much their own; they choose to use the Bootstrap framework and include a tremendous amount of meticulously researched information along with the map demonstrating spatial and temporal patterns of laws restricting access to abortion.