Data Visualization with JavaScript

JavaScript Syntax and Statements

Course Information

Instructor: Dr. Lauren Williams
Class Meeting: MWF 1:00 - 2:05 Old Main Advanced Lab
Office: Old Main 404 (Tower)
Office Phone: (814) 824-2226
Office Hours: Mon 2:15-3:30, Tues 11:45-1:00, Wed 2:15-3:30, Thurs 11:30-2:00

Course Description

This course will explore several modern libraries specifically created for data visualization on the web. Students will create interactive, animated, and well-designed graphics that accurately and effectively depict a data set. JavaScript libraries studied are subject to change, but students will learn to create basic charts and graphs, radar charts, trees, word clouds, cartographs, and several other styles of visualization that complement their data.

Course Objectives

On successful completion of the course, students should be able to:
  • communicate data clearly and effectively using visual representations created with JavaScript libraries
  • apply basic design principles to create attractive and appropriate visualizations of data
  • define and utilize several types of graphs, charts, and diagrams
  • create interactive visualizations, taking full advantage of JavaScript in relaying the "story" of the data

Textbook and Materials

Interactive Data Visualization for the Web, by Scott Murray. Other books and resources may be recommended, but will not be required.

No additional materials are required. You may find it useful to bring your own computer to class, but this is not necessary. If using the lab computers, you may want to invest in a flash drive to save your work. At a minimum, you will need a text editor and internet access to complete assignments and projects. Recommendations on software will be given in class.


For the first half of the semester, you will be given assignments (roughly once per week) that will reinforce the material in class. These assignments will cover a wide range of topics and types of visualization, but each assignment will focus on a single important concept.

You will be expected to adhere to the project policies, included in this syllabus, on all assignments. Be sure to read these requirements carefully.

Final Project

After you've mastered the basics of JavaScript and visualization libraries, you'll be prepared to design and implement your own final project. Sample data sets will be provided, though you're encouraged to work with data that is of particular interest to you. Further details and a rubric will be provided. Well written code, accurate depictions of data, and overall appearance will all be considered.


We will have a midterm exam and a final exam. The midterm will be a written exam (mostly multiple choice) that checks your knowledge of JavaScript and visualization libraries, as well as design principles.
  • Midterm Exam: Friday, April 1
  • Final Exam: Wednesday, May 18, 1-3 pm


Your final grade will be calculated as follows:
  • Assignments: 40%
  • Final Project: 30%
  • Midterm Exam: 10%
  • Final Exam: 20%
Quiz and exam grades will be posted on Blackboard, so you can keep track of your progress at any time.

Your letter grade will be determined according to the department grading scale:

Course Outline

The course will cover the following topics, with possible changes to the ordering. We will not adhere to a strict schedule, as we may incorporate new libraries and topics as they develop.
  • Introduction to Data Visualization: History, Definition, and Significance
  • HTML and the Document Object Model (DOM)
  • Developer Tools and the Department Server
  • Types of Visualization and Design Standards
  • Scalable Vector Graphics (SVG)
  • Introduction to JavaScript
  • Including and Using JavaScript Libraries
  • Data Types, Finding Data, and Choosing the Best Visualization for Data
  • Charting Libraries
  • Google Charts
  • D3.js
  • Interactive Visualizations

Learning Differences

In keeping with college policy, any student with a disability who needs academic accommodations must call Learning Differences Program secretary at 824-3017, to arrange a confidential appointment with the director of the Learning Differences Program during the first week of classes.

Support of the Mercy Mission

This course supports the mission of Mercyhurst University by creating students who are intellectually creative. Students will foster this creativity by: applying critical thinking and qualitative reasoning techniques to new disciplines; developing, analyzing, and synthesizing scientific ideas; and engaging in innovative problem solving strategies.