Welcome to JavaScript Programming for Planners & Designers!
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.
Throughout this 15 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 to a large extent. Most of your practice will come through 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).
This syllabus is a living document. As the course progresses, greater detail will be added to reflect the content of each week.
There will be two structured projects that everyone will take part in:
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).
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:
There will be additional resources on topics covered in the class in the resources/ folder.
Subject to change as necessary!
| Week | Date | Topic | Project |
|---|---|---|---|
| 1 | 30 Aug | Getting started Intro to Web Tech |
Story Map |
| 2 | 06 Sep | Intro CSS (selectors) Debugging layouts |
│ |
| 3 | 13 Sep | The Box Model Flexbox and Grid Layouts |
│ |
| 4 | 20 Sep | JS Style & Linting Working with Data in JS |
┴ |
| 5 | 27 Sep | DOM Manipulation | Dashboard |
| 6 | 04 Oct | Asynchronous Behavior #1 (events) | │ |
| 7 | 11 Oct | Asynchronous behavior #2 (requests) Browser APIs |
│ |
| 8 | 18 Oct | Map Tiles | ┴ |
| 9 | 25 Oct | 3rd-party APIs | Final |
| 10 | 01 Nov | │ | |
| 11 | 08 Nov | │ | |
| 12 | 15 Nov | │ | |
| │ | |||
| 13 | 29 Nov | │ | |
| 14 | 06 Dec | Project presentations | ┴ |
| 13 Dec | Overflow presentations (if necessary) |
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.
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 and can verify that the generated code is correct, cool. But if you come to me or the TA to help debugging 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.