際際滷

際際滷Share a Scribd company logo

Teaching Open Web Mapping - AutoCarto 2016

Download as PPTX, PDF
Carl Sack
Carl Sack

This document summarizes the teaching of an open web mapping course at the University of Wisconsin-Madison from 2012-2016. It describes how the course transitioned from using Flash to JavaScript as the primary technology. The curriculum was restructured in 2014 with a scaffolded approach using Leaflet and D3.js. In 2016, the curriculum was further modularized and moved online. Assessment found students gained competency in tools but some found it too "cookbooky" without prior coding experience. The goal was to teach computational thinking and confidence in open web mapping.

1 of 22
Teaching Open Web Mapping AutoCarto 2016 Carl M. Sack . cmsack@wisc.edu Robert E. Roth . reroth@wisc.edu University of Wisconsin-Madison
Outline About Geography 575 (Interactive Cartography and Geocomputing) Technology transition (Flash to JavaScript) 2014 Course Curriculum Course evaluation 2016 Curriculum Changes Preliminary outcomes and future prospects
What is a web map?
The G575 web mapping technology stack... 2011
TopoJSON PNG, Vector 2011 2016 The G575 web mapping technology stack...
TopoJSON PNG, Vector 2011 2016 Others Mapbox GL The G575 web mapping technology stack... Carto Builder (fmly CartoDB) Google Maps API
Geography 575 Timeline Spring 2012: Last teaching of Adobe Flash Summer-Fall 2012: Web mapping technology study Spring 2013: First teaching with JavaScript, Leaflet, and D3 Fall 2014: Scaffolded curriculum Spring 2016: Modularized curriculum
2012 Technology Study From Roth et al. (2014). A Process for Keeping Pace with Web Mapping Technologies. Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
2012 Technology Study From Roth et al. (2014). A Process for Keeping Pace with Web Mapping Technologies. Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
2013: Lets Try It! (not actual students)
Rethinking Our Teaching Strategy
2014: A New Curriculum Sequence Pre-Lab Lab 1 (Leaflet) Lab 2 (D3) Final Project Week 0 (no lab meeting) Online JavaScript Tutorial Week 3 Using Reference Documentation Online Forums and Examples Slippy Map Tile Concepts Leaflet Basic Concepts and Methods Week 6 GitHub Concepts and Web Hosting SVG Basic Elements and Attributes D3 API Reference and Examples D3 Core Selectors and Generator Functions Weeks 10-13 Individualized Assistance Week 1 Text Editors Directory Structure HTML Basic Elements and Attributes CSS Basic Style Rules JavaScript Basic Concepts jQuery Basic Concepts Week 4 Using Developer Tools for Debugging Custom UI Elements and Interactions Week 7 Final Project Group Selection D3 Interactions D3 Geography Week 14 Final Project Completion Week 2 Data Levels and Types Geographic Coordinates Data Language Specifications AJAX (Asynchronous JavaScpt and XML) Conference Week (no lab meeting) Week 8 Workshop Final Project Proposals Individualized Assistance Week 5 Individualized Assistance (final week for Lab 1) Week 9 Review: TopoJSON, D3 Projections, Debugging Individualized Assistance (final week for Lab 2)
Student familiarity with HTML,CSS, and JavaScript prior to taking the course Assessment: Entrance Survey
Me: [T]he attitude generally seems to be Im learning and know Ill get beyond this rather than helplessness or giving up. Assessment: Instructor Logs & Student Feedback Students: I needed to break it down and solve things one at a time, not all at once. Some key threshold concepts: Identifying & integrating methods from different libraries Integrating code from online examples Working with data, AJAX, and the DOM
Assessment: Exit Survey Expertise with tools: low moderate Steady increase in learning and self- confidence
G575 Lab Learning Objectives Computational Thinking understand the flow of execution in a computer program and solve problems in the code. Competence apply Open Web Platform mapping tools successfully across a range of mapping contexts. Confluence analyze how data, representation, and interaction tools integrate across the web mapping workflow. Confidence evaluate ones achievements positively and trust ones ability to improve at difficult web mapping tasks.
Course Start Course End
Course Start Course End
2016: A Brave New (Online) World
2016 Revised Topic Sequence Unit 1 Unit 2 Unit 3 Final Project Module 1: Setting Up Your Workspace Boilerplates and Frameworks Web Directory Setup GitHub Setup (moved from Week 6) Assigned: JavaScript Online Tutorial Module 4: Using Online Resources Leaflet Tutorials and API Using Online Examples Using Help Forums Finding Tilesets and Data Module 7: D3 Foundations D3 Selections and Blocks Data Scales, Axes, Text Group work on final projects Module 2: Scripting and Debugging Exploring the DOM JavaScript Basics jQuery Basics Debugging in the Developer Console from Weeks 4 and 9) Module 5: Leaflet Interactions Making Leaflet Layers Dynamic Zoom, Pan, and Retrieve Interactions Sequence Interaction Additional Interaction Operators Module 8: Mapping in D3 D3 Helpers: TopoJSON, MapShaper & D3 Projections and Path Generators Module 3: Data and AJAX CSV, XML, and JSON formats and their geographic variants AJAX Concepts and Syntax AJAX Callback Functions Module 6: The Internal Logic of Leaflet Object-oriented JavaScript Extending Leaflet Objects Using SVG Graphics Module 9: Coordinated Visualizations Dynamic Map Styling Drawing a Coordinated Visualization Module 10: Coordinated Interactions Dynamic Attribute Selection Transitions Linking Interactions Between Map and
2016 Assessment (sketch) Similar competency outcomes Possibly significant improvement in AJAX Challenging or not depending on prior coding experience Too cookbooky?
Questions This slideshow: tinyurl.com/sack-autocarto-2016 Tutorials based on Geography 5752014 lab assignments: github.com/uwcart/cartographic-perspectives Student projects gallery: geography.wisc.edu/courses/geog575 Carl M. Sack . cmsack@wisc.edu Robert E. Roth . reroth@wisc.edu University of Wisconsin-Madison A portion of this research was funded by NSF Grant #1555267

More Related Content

Teaching Open Web Mapping - AutoCarto 2016

  • 1. Teaching Open Web Mapping AutoCarto 2016 Carl M. Sack . cmsack@wisc.edu Robert E. Roth . reroth@wisc.edu University of Wisconsin-Madison
  • 2. Outline About Geography 575 (Interactive Cartography and Geocomputing) Technology transition (Flash to JavaScript) 2014 Course Curriculum Course evaluation 2016 Curriculum Changes Preliminary outcomes and future prospects
  • 3. What is a web map?
  • 4. The G575 web mapping technology stack... 2011
  • 5. TopoJSON PNG, Vector 2011 2016 The G575 web mapping technology stack...
  • 6. TopoJSON PNG, Vector 2011 2016 Others Mapbox GL The G575 web mapping technology stack... Carto Builder (fmly CartoDB) Google Maps API
  • 7. Geography 575 Timeline Spring 2012: Last teaching of Adobe Flash Summer-Fall 2012: Web mapping technology study Spring 2013: First teaching with JavaScript, Leaflet, and D3 Fall 2014: Scaffolded curriculum Spring 2016: Modularized curriculum
  • 8. 2012 Technology Study From Roth et al. (2014). A Process for Keeping Pace with Web Mapping Technologies. Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
  • 9. 2012 Technology Study From Roth et al. (2014). A Process for Keeping Pace with Web Mapping Technologies. Cartographic Perspectives 78 (DOI 10.14714/CP78.1273)
  • 10. 2013: Lets Try It! (not actual students)
  • 12. 2014: A New Curriculum Sequence Pre-Lab Lab 1 (Leaflet) Lab 2 (D3) Final Project Week 0 (no lab meeting) Online JavaScript Tutorial Week 3 Using Reference Documentation Online Forums and Examples Slippy Map Tile Concepts Leaflet Basic Concepts and Methods Week 6 GitHub Concepts and Web Hosting SVG Basic Elements and Attributes D3 API Reference and Examples D3 Core Selectors and Generator Functions Weeks 10-13 Individualized Assistance Week 1 Text Editors Directory Structure HTML Basic Elements and Attributes CSS Basic Style Rules JavaScript Basic Concepts jQuery Basic Concepts Week 4 Using Developer Tools for Debugging Custom UI Elements and Interactions Week 7 Final Project Group Selection D3 Interactions D3 Geography Week 14 Final Project Completion Week 2 Data Levels and Types Geographic Coordinates Data Language Specifications AJAX (Asynchronous JavaScpt and XML) Conference Week (no lab meeting) Week 8 Workshop Final Project Proposals Individualized Assistance Week 5 Individualized Assistance (final week for Lab 1) Week 9 Review: TopoJSON, D3 Projections, Debugging Individualized Assistance (final week for Lab 2)
  • 13. Student familiarity with HTML,CSS, and JavaScript prior to taking the course Assessment: Entrance Survey
  • 14. Me: [T]he attitude generally seems to be Im learning and know Ill get beyond this rather than helplessness or giving up. Assessment: Instructor Logs & Student Feedback Students: I needed to break it down and solve things one at a time, not all at once. Some key threshold concepts: Identifying & integrating methods from different libraries Integrating code from online examples Working with data, AJAX, and the DOM
  • 15. Assessment: Exit Survey Expertise with tools: low moderate Steady increase in learning and self- confidence
  • 16. G575 Lab Learning Objectives Computational Thinking understand the flow of execution in a computer program and solve problems in the code. Competence apply Open Web Platform mapping tools successfully across a range of mapping contexts. Confluence analyze how data, representation, and interaction tools integrate across the web mapping workflow. Confidence evaluate ones achievements positively and trust ones ability to improve at difficult web mapping tasks.
  • 19. 2016: A Brave New (Online) World
  • 20. 2016 Revised Topic Sequence Unit 1 Unit 2 Unit 3 Final Project Module 1: Setting Up Your Workspace Boilerplates and Frameworks Web Directory Setup GitHub Setup (moved from Week 6) Assigned: JavaScript Online Tutorial Module 4: Using Online Resources Leaflet Tutorials and API Using Online Examples Using Help Forums Finding Tilesets and Data Module 7: D3 Foundations D3 Selections and Blocks Data Scales, Axes, Text Group work on final projects Module 2: Scripting and Debugging Exploring the DOM JavaScript Basics jQuery Basics Debugging in the Developer Console from Weeks 4 and 9) Module 5: Leaflet Interactions Making Leaflet Layers Dynamic Zoom, Pan, and Retrieve Interactions Sequence Interaction Additional Interaction Operators Module 8: Mapping in D3 D3 Helpers: TopoJSON, MapShaper & D3 Projections and Path Generators Module 3: Data and AJAX CSV, XML, and JSON formats and their geographic variants AJAX Concepts and Syntax AJAX Callback Functions Module 6: The Internal Logic of Leaflet Object-oriented JavaScript Extending Leaflet Objects Using SVG Graphics Module 9: Coordinated Visualizations Dynamic Map Styling Drawing a Coordinated Visualization Module 10: Coordinated Interactions Dynamic Attribute Selection Transitions Linking Interactions Between Map and
  • 21. 2016 Assessment (sketch) Similar competency outcomes Possibly significant improvement in AJAX Challenging or not depending on prior coding experience Too cookbooky?
  • 22. Questions This slideshow: tinyurl.com/sack-autocarto-2016 Tutorials based on Geography 5752014 lab assignments: github.com/uwcart/cartographic-perspectives Student projects gallery: geography.wisc.edu/courses/geog575 Carl M. Sack . cmsack@wisc.edu Robert E. Roth . reroth@wisc.edu University of Wisconsin-Madison A portion of this research was funded by NSF Grant #1555267

Editor's Notes

  1. TA: Who plans to use JavaScript coding in future projects? Everyone: *raise hands*
  2. Questions?