Data Visualization with JavaScript


  1. Due February 19, 2016
    Create a chart, graph, or other visualization using a minimum of four data points. The visualization must be created using only SVG, HTML, and CSS - no JavaScript yet.
  2. Due March 4, 2016
    Create a butterfly chart using Raphael. Assignment details (pdf).
  3. Due March 13, 2016
    Create a landing page for the course, including links to all assignments.
  4. Due April 2, 2016
    Create a chart with D3. Assignment details (pdf).

Basic Requirements

While many other means for creating a visualization exist, all projects submitted must be created (primarily) with JavaScript. Graphs and figures may not simply be displayed as an imported image, for instance. This does not necessarily mean that all projects must be interactive; this requirement would be specified in the project description.

Projects will be based on JavaScript, not HTML or CSS. You will be provided with basic HTML/CSS templates in which to place your JavaScript. Additional efforts in HTML will not be required unless specified in the project description. You will not be held responsible for reflexive design, the use of advanced frameworks, or styling options (other than those pertaining to the visualization itself) unless specified. You are also not required to use jQuery, though it is a common dependency for other libraries (so it will usually need to be included, even if your code is pure JavaScript).

Best practices for all languages used should be observed. As they are covered in class, your work will be expected to follow standard guidelines for HTML, CSS, JavaScript, and any supporting libraries or frameworks. This includes proper indentation, variable declaration, commenting, and safe coding techniques. This will be increasingly important throughout the semester.

Citing Sources

The majority of the code you submit should be your own, but in some cases, it will be appropriate to use code you've found elsewhere as a starting point or to add an additional feature to your project. Any external code must be acknowledged by including a comment in your project indicating the origin of the code. This should include the web address or text where the code was found, and the author's name (if known). Using parts of complex projects you find online may be appropriate, but you should never simply copy and paste large portions of your code (even with citation). When in doubt, ask me if your intended usage is acceptable.

In addition, respect the difference between helping a classmate and doing their work for them. You are encouraged to support each other's progress in this course. However, you may not request nor provide code to your classmates without my permission. If such code sharing is appropriate, the author of the code must be cited within a comment of the project.

Using a project from another class is permitted, with permission. If you are creating a project for another course that would also satisfy the requirements for a project in this one, you may submit the project with my permission. The project must be created this semester, be your own work (not created as a group project for another course), and you should obtain permission from the instructor of the other course as well.

Failure to cite external sources used in your project may result in a grade of 0 on the project and an academic dishonesty report. Remember that as Data Science Scholars and graduate students, you are expected to set an example for the Mercyhurst community.


Use only appropriate, legally obtained data. You are encouraged to use real world data in your projects, but only data that you have legal permission to use, does not contain sensitive information, and is appropriate for wide audiences (keep it PG-13, please). You should also be respectful of your classmates when designing your projects, particularly those that are centered on political or social data. See me if you are unsure whether or not your data or layout could be considered inappropriate. Keep in mind that your project (both data and code) will be publicly available on our server.


We will make use of a variety of JavaScript libraries in this course. Some assignments will require the use of a particular library, such as D3. In these cases, the library must actually be used to create your project (as opposed to simply including the library and using other tools to complete the assignment). While there are often several ways to achieve the same results, we will build on our knowledge of particular libraries throughout the course, so it is important that you become familiar with the required methods.

If you would like to use additional libraries in your project, including those not covered in class, you must request permission from me. In most cases, you'll be free to do so.

Project Submission

All projects must be uploaded to your public html directory on the department server. Projects submitted via email or other means may not be accepted without prior permission. Using the server is recommended while developing your projects, as you are far less likely to lose your work. It is also the fastest way for me to assist with projects as you work.

Projects will be tested on Chrome, Firefox, and Safari. You should check that your work displays properly on these browsers. Internet Explorer support will not be required unless specified, though code that functions on all four browsers will receive special consideration when grading.

Project Grading

A basis for each project's grade will be provided with the project description. You should take this criteria into account when developing your work, and note that the requirements may differ from one project to the next. For instance, some projects may prioritize code efficiency and structure, while others will have a more substantial visual component.

Complexity will be considered. Part of most project grades will be based on the overall level of effort required to produce it. Work should have an appropriate level of complexity, based on the amount of material we have covered. You will be expected to fulfill more than the bare minimum of requirements. For instance, if you are required to create a bar graph, you should pay attention to the visual aspect of the graph (color, clarity, etc). You will also be expected to go beyond some of the in class examples, which will be largely concerned with technical details.

Final Project Rubric

Late Policy

Work must be submitted on time to receive full credit. Work received within 24 hours after it is due will receive an automatic 10\% deduction. Work received within 24-28 hours after it is due will receive an automatic 20% deduction. Work will be considered submitted only when ALL required files are received.

Last Updated: March 24, 2016