Welcome to JavaScript Programming for Planners & Designers!

Syllabus

• Course: CPLN-6920/MUSA-6110, University of Pennsylvania
• Location: McNeil Building 286-7
• Schedule: 1:45-4:45PM, Wednesdays
• Instructor:
  • Mjumbe Poe, mjumbe@design.upenn.edu
• Office Hours:
  • Coworking in person (check schedule here) Usually in Van Pelt RDDSx Wednesdays, 10:00-1:00, but there are exceptions; check the calendar
  • Virtually, by appointment (book here)
• Need help?
  • Slack
  • Stack Overflow is your friend!

Course Overview

Dashboards, maps, and other interfaces that enable the display, analysis, and in some cases generation new geospatial data, are often the end product of a data analysis or modeling process. In this course we'll focus on the interface and interaction aspects of creating these products. You learn to design and build interfaces to help users access the value promised by geospatial data, modeling, and analysis.

As this is a JavaScript course, we'll be doing a lot of programming in JavaScript. Because of the nature of interactive interfaces with JavaScript, we'll also be doing a lot of work with HTML and CSS.

This course is the first part of a track in MUSA in which you will learn to build data products. In the second course (Geospatial Cloud Computing & Visualization) we'll focus on the data pipeline aspects of building these products. The courses are best together, but they can each also stand alone.

Objectives

By the end of this course, you should:

• Have familiarity and comfort with the JavaScript language (and, as necessary, HTML and CSS)
• Have familiarity with "tools of the trade", such as code editors, git and GitHub, and practices such as testing and linting code
• Understand the structure of client-side web applications built in JavaScript, especially:
  • How web browsers load resources from the web
  • How web browsers respond to user interaction
• Know how to use mapping libraries like Leaflet, along with some of its various plugins
• Know how to use data visualization libraries like D3 or ApexCharts
• Know how to use data analysis libraries like Turf
• Know how to use JavaScript in the browser to access and manipulate data in a variety of formats, particularly GeoJSON, CSV, and Mapbox Vector Tiles
• Know how to use JavaScript in the browser to access web services and APIs, such as Mapbox and Nominatim
• Be comfortable reading documentation for JavaScript libraries and APIs

Course Outline

Throughout this 14 week course, you'll be learning to program applications using HTML, CSS, and Javascript. In addition to programming skills, we will stress the "tools of the trade": you will use a text editor designed for programming; your code will be turned in with git and managed through GitHub. You will be programming in the same way and with some of the same tools as software developers in the industry.

We'd like to keep the course somewhat freeform — there are basic skills which must be touched on, but your interests will help shape the direction, especially in the final weeks. Most of your practice will come through in-class exercises, and building three projects in JavaScript, including a self-directed interactive final project that can take any topic you find interesting (so long as you use tools from our class).

For the most part, the class will be "flipped" — you will be expected to read and watch videos before class, and we will spend class time working on exercises and projects.

This syllabus is a living document. As the course progresses, greater detail will be added to reflect the content of each week.

Exercises

• You’ll have short exercises to do for almost every class, at least for the first half of the semester
• Exercises will not be graded, but you will be accountable for the skills practiced in them, and we will not always cover all of those skills comprehensively in class, so it is in your best interest to do them in a timely manner.
• Most exercises will be checked automatically; you can always tweak until it works.

Projects

There will be two structured projects that everyone will take part in, and one that will be more self-directed. The first two projects will be done individually, and the final project can be done in groups or individually. I encourage you to use the same domain of data for all three projects, so that you can build on your work from one project to the next.

1. A Story Map -- Story maps utilize maps, text, and multimedia to present interactive narratives to engage users and provide accessible geographic context. You will create a story map based on a topic of your choosing. The focus of this project will be on explaining some topic through a geospatial lens.

   Weeks 1-4 will be spent working on this project.

2. A Dashboard -- Dashboards are a type of data visualization often use common visualization tools such as graphs, charts, and tables to summarize and present related data sets in a way that makes the information easier to understand. You will choose some publicly available data to build a dashboard around, while honing in on the actual use case that drives the work. The focus of this project will be on helping users make decisions.

   Weeks 5-8 will be spent working on this project.

3. An Interactive Final Project -- Your final project for the class will be decided through a project proposal negotiated with me. The projects should build upon many of the concepts learned throughout the class, and incorporate some significant amount of interactivity. The focus of this project will be on engagement -- i.e. inviting members of the public to create or add to a dataset in some way.

   Final projects will be done in groups or independently — criteria for success will be hammered out in the final project proposal and group projects (if we have any) will be expected to engage with a wider scope and greater difficulty than individual projects. Group projects will also leverage the power of GitHub to make collaboration simpler and more transparent for grading purposes (this will make more sense once you're familiar with GitHub).

   Weeks 9-14 will be spent working on this project.

Work Evaluation & Feedback

Regarding grading, your successful completion of the class will be dependent on the successful completion of the minimum requirements of the three projects laid out above.

More thorough evaluation of and feedback on your work will come in the form of:

1. Code reviews -- You will submit pull requests (PRs) which the course instructors will leave feedback and suggestions on.
2. Linters -- You will learn to read the output from linters and accessibility checkers, and to use them to debug and improve your work.

Software

• Code Editors
  • Visual Studio Code
  • Sublime Text
• Terminals
  • Windows Terminal
  • Mac and Linux each come with a full-featured terminal already installed
• Git Clients
  • GitHub Desktop
  • Visual Studio Code Git extensions (built-in, though you may have to install git first; VS Code should walk you through the installation)
  • Sublime Merge
• Node.js
  • Node.js

Supplimentary Resources

• Mozilla Developer Network - A highly authoritative body of documentation on Javascript and many other web development topics.
• Introduction to Web Mapping - A web-based text book specifically for JavaScript-based mapping. A good portion of this class will overlap with the material in this book.
• Javascript.info - An excellent linear reference -- like a text book for JavaScript.
• FreeCodeCamp - Lots of exercises; courses in "Responsive Web Design", "Basic JavaScript", "ES6", and "Data Visualization" would be particularly useful for this class.
• Eloquent Javascript - This is a free book with some advanced content. As you think about the application you might like to build for your final, the chapters on HTML forms, drawing with javascript, building a game, and constructing your own painting application will push further than we can in class.
• Map-based Web Application Examples

There will be additional resources on topics covered in the class in the resources/ folder.

Schedule

Subject to change as necessary!

Week	Date	Topic	Learning Objective(s) (Students should be able to...)
1	27 Aug	Getting started	Know my name and what I do Describe what JavaScript is good for in planning and data
2	03 Sep	Designing for the User	Describe the right questions to ask when starting a product
		Intro to Web Tech	Put together an HTML page structure Use simple semantic tags (p, ul/ol/li, h1-6, section, header, footer, main, ...) Use semantic tags with attributes (a, img, ...)
		Intro to Web Accessibility	Use references (e.g. a11yproject, accessibility-developer-guide) Use an accessibility checker (e.g. Axe) Understand that an accessibility checker won't catch everything
		Intro CSS (selectors, units, and colors)	Use generic HTML containers (div/span) Use id attributes to uniquely identify elements Use class attributes to group elements together Filter/select elements based on their tag, class, id, or attributes Identify when to use which units Recognize hex-coded colors Find HTML color labels
3	10 Sep	Using JavaScript on the Web	Create a script file to link to an HTML page Find resources on JS syntax and language Explain what a library is (a framework is a big library, a module is a small library) Explain what a CDN is Use script and link tags to include a JS library Use import statements to include a JS library
		Intro to Web Maps	Import Leaflet for use (via a script tag or an import statement) Use the ID of an element to add a Leaflet map to a page Use the querySelector function to add a Leaflet map to a page
		The GeoJSON Data Format	Explain the difference between a JSON string vs object Explain the relationship between JSON and GeoJSON Identify the components of a GeoJSON object Explain the relationship between GeoJSON geometries, geometry collections, features, and feature collections Add GeoJSON to a map and style it parammetrically
		JS Style & Linting	Use tools in VS Code to auto-format code and identify issues
4	17 Sep	The Box Model	Explain an element's padding, margin, border, and width/height Get rid of the default space around an HTML document's body
		Flexbox and Grid Layouts	Create linear layouts wit flexbox Create tabular layouts with grid
		Debugging layouts	Use their browser's developer tools to inspect an element's layout
		Debugging specificity	Use their browser's developer tools to see why a style is applied Explain which CSS rules are more specific than others
5	24 Sep	Working with Data in JS	Explain what a predicate function is and what it's for Use the filter function to filter an array Use the map function to generate a new array Use the reduce function to combine array elements Use for...of loops equivalent to map, filter, and reduce
		Writing functions for data manipulation	Generate GeoJSON structures from other data formats Generate chart configurations from other data formats
		Charting libraries	Name some of the available charting libraries Understand what some of the pieces of D3 are for
		Asynchronous Behavior #1 (events)	Use on... HTML attributes to trigger JS Use addEventListener to trigger JS (on map and layer objects) Explain the impact of variable scoping (like functions within modules)
		Organizing JavaScript Using Modules	Use import and export statements to organize code into modules Identify distinct "components" within an application's design
6	01 Oct	DOM Manipulation	Query for elements in the DOM Insert new DOM elements into the document Remove elements from the document Work with elements that are disconnected from the document
		Asynchronous behavior #2 (requests)	Format a request URL with query string parameters Use GET and POST requests using an options object Explain the Promise vs async/await syntax of fetch Work with fetched data (e.g. conver to GeoJSON or chart config)
7	08 Oct	Map Tiles
8	15 Oct	Browser APIs (Geolocation)
		3rd-party APIs (Routing, Geocoding)
9	22 Oct	Browser-based data persistence (in-memory, session, and local storage)
		Firestore for data persistance
10	29 Oct	Reactive JavaScript patterns
11	05 Nov
12	12 Nov
13	19 Nov
	26 Nov	(No class)
14	03 Dec	Project presentations

Academic Integrity

In compliance with Penn's Code of Academic Integrity, blatantly and egregiously copying another student's work will not be tolerated. However, because this course is designed to help prepare students for work in professional programming environments, copying and pasting is not universally prohibited: we encourage students to work together and to freely use the internet as a resource for finding solutions to vexing problems. Citing every copied and pasted line of code is not necessary. Large patterns or multiple lines of code taken from external sources should, however, be noted with in-code comments. If an instance is unclear, you should feel free to speak with the instructors.

Note about AI tools...

I don't mind generative AI tools to help with coding -- I use them myself on a limited basis. If you use Chat GPT or any other AI tool, note that you are subject to the same guidelines around citation as above.

Also, understand that many of these tools often make mistakes that can be difficult to identify if you don't know what you're doing. If you can verify that the generated code is correct, cool. But if you come to me or any other instructor to help debug something generated with AI, it is always best to disclose the source of the code (for that matter, I'll be able to tell), as it would be with any code.