This class is about learning to program for the web. We will use a combination of HTML, CSS, Javascript, and the D3 library to create interactive data visualizations for a variety of datasets. Each week, we will work on introducing new programming concepts to build your repertoire of skills, in addition to developing your own ideas for a final project.
The course work for this class assumes that you will have no prior programming experience. If you do, great - take this as an opportunity to stretch yourself by taking the assignments to a higher level. If you've never programmed before, don't worry; it's not as bad as it sounds. That said, we do need to move fast to cover all the things you need to know, so it is critically important that you do the assigned readings prior to class, and that you complete all homework on time. This will help to make sure that you're prepared for the next class, so that you don't fall behind.
At the end of the course, students will be able to:
Please download and install the following before the first class.
A note on versions: We will be using only d3.v4 in this class. Many of the examples available online are written for version 3 or earlier, but can be "translated" to version 4 relatively easily once you become familiar with the differences. If you are working from sample code found on the internet and it isn't working, check to make sure that it uses the right version of the library!
There are many excellent tutorials, reference books, and other resources available online. Often, your best resource will be a Google search window. This will often point you to Stack Overflow or another online forum. Learning how to search for the right information is half the battle in programming; never underestimate the resources available to you online. If you have a problem, chances are that someone else has had it, too. Be judicious in taking advice found online, and make sure that you understand what the code you found actually does.
I have found the following resources to be particularly helpful:
The final project is an opportunity for you to create a visualization related to a topic that you find interesting. Ideally, it will serve as a portfolio piece that you can present to future employers. The project is very broadly defined: you will choose a topic, locate data related to that topic, and clean and present the data in a website using d3. Final projects must include at least two different views of a dataset, and may incorporate any of the graphical forms that we encounter in class (bar, line or area charts, scatterplots, maps, network diagrams, etc). Animation, annotation and interactivity that support graph function are encouraged. You will work throughout the semester to identify data, rough out concepts, and create a final visualization that presents your data in a clear and interesting form.
There are tons of interesting data sets out there to explore. Here are a few to get you started:
Each class will begin with a brief introduction to the day's topics, followed by a session where we code together to demo a particular feature of interest. If time allows, students will then work in pairs to experiment with the new capabilities on their own. The last half hour of each class will be dedicated to working on final projects: brainstorming topics, finding and cleaning data, sketching ideas, critiquing designs, and testing out code.
Expected topics for each week are listed below (click on a date to see more details). All assignments should be completed before the following class period, and all code should be published in the correct Git repository by midnight of the Monday before the next class.
Readings should be completed before class, to ensure that you are prepared for in-class exercises (see page linked in the schedule above for each week for a list of readings)
Assignments should be completed after class, and submitted using GitHub by midnight on Monday before the next class. Late or missing assignments will negatively impact your grade.
Grades for this course will be assigned based on the quality and timely completion of all class assignments, participation in class activities and group work, and the final project. Frequent absence or tardiness will negatively impact your grade, as will missing or late assignments.
High quality class participation, thoughtful and constructive criticism during peer critiques, going the extra mile in your assignments, putting in consistent effort in preparing for class, working independently to solve problems (i.e. remembering to use Google before asking for help), and thoroughly commenting your code will all contribute to a high grade.