Since this is the "final project" in the course, it is significantly more open-ended than previous assignments. You are welcome to visualize a data set of your choosing (perhaps one that is relevant to your own work), and the visualization can take any format that you feel is appropriate (i.e., a bar chart, a scatter plot, a network graph, or even a map). Your visualization will need to be interactive (what data is displayed and how it is displayed should be adjustable by the user), but the exact details of that user experience is up to you. See below for specific requirements that your project will need to fulfill.
- Basically: find a cool data set, think about how you might want to display and interact with that data visually, then go ahead and create that visualization!
And since is the last project and the iSchool is all about collaboration, you complete this assignment either individually or in pairs. Note that pair projects should be slightly more sophisticated visualizations (e.g., with more complex interactions).
I encourage working in pairs to keep the assignment more feasible!
By completing this assignment you will practice and master the following skills:
- Generating dynamic visualizations using D3
- Provide interaction via event-driven programming
- Using computer programs to access, analyze, and present data
- Effectively design computer programs using functions and data structures
- Learning new library techniques from examples and documentation.
Follow the below link to create your private code repo for this assignment. You will need to accept this assignment to create your code repo. Do not fork this repository!
fork this repository!
If you are working with a partner, only ONE person should accept the assignment (both partners will be working on the same code). That person will then need to add the rest the other partner as a collaborator. This will allow you both to be able to
push to the repository and collaborate on the code.
After you've accepted the assignment,
clone the repo to your local machine so you can edit the files. Make sure you don't clone it inside another repo!
This repo contains a basic web page (the
index.html file) that imports the D3 library and executes the
visualization.js script. The provided script uses D3 to create an
<svg> element to which you can
append things like
rects. Note that this is assigned to a global
svg variable that you can access from other functions you create (e.g., a
You are of course welcome to modify any or all of the provided code as you see fit.
You should definitely replace the document
<title> and displayed
<h1> title in the HTML with an actual title for your visualization. Also make sure the displayed page includes your name(s) and a citation with the source of your data. Putting other information about the visualization is also encouraged.
What you choose to implement for your visualization is up to you (and if there are any questions about appropriateness or feasibility, check in with me). However, your project does need to fulfill a couple of broad requirements:
Your program should display a visualization for some "real-world" data. This should be a significantly large data set with scores or hundreds or thousands of items; most meaningful data sets will be this size. You should be aiming at around 50-100 or more items. It is also acceptable to "mash up" and combine multiple data sets to achieve the required level of complexity.
Your program can either access the data dynamically from a web API (using an AJAX request), or you can load the data from a
The exact data set visualized is up to you. See this crowdsourced list for some potential starting points for finding data sets; you can also check in with me about other ideas!
Your visualization should graphically display some meaningful dimension of your dataset: whether a bar chart measuring data magnitude, a scatter plot mapping two dimensions to x and y, a network graph, or even a map of locations—these are all feasible. Basically, you should think about a few variables from each "item" in your dataset, think about which visual property (e.g., size, location, color, etc) that you might associate with that variable, and then plot the variable on the screen. Your plotted data should reflect at least two data properties in the element attributes.
This visualization does not need to be particularly complex! A simple line chart is sufficient
You are primarily being evaluated on your ability to implement a visualization, and less on its subjective aesthetics or data clarity. Try to pick something sensible and appropriate, but you are not required to know anything about visual design (there are other courses for that!). Just produce a visualization that you think looks nice and makes sense!
D3 is powerful but complex, and this has led to the creation of numerous more focused or "simpler" libraries. You should not use one of these libraries for this assignment; you should be working with the core D3 methods. You are welcome to use D3 plugins if you want to make a more complex visualization, you just shouldn't use an entirely separate "program". If you have any questions about what is appropriate or not, please check in with me.
Your visualization needs to be interactive: that is, the user can interact with it (click, drag, move the mouse, etc) and see it change in some meaningful way (not just randomly).
Your program should support two different kinds of interactivity:
The user should be able to change or filter what data is being displayed. For example, they could click on a
<button> (or use a search
<input>) to see different subsets of the data. Or they could click on a data item to cause the displayed visualization to shift and show more details about that item (like if you click on someone in a social network graph and then see all of their friends).
In short: the user should be able to dynamically cause the visualization to need to
exit() elements following the general update pattern.
Your visualization should support more than one change, even if this is just moving back and forth between two different presentations.
The user should be able to change how the data is being displayed. This can be as simple as having elements change color (be "highlighted") on mouse-over, or as complex as being able to "drag" nodes of a graph to new positions.
In short: the user should be able to dynamically cause the
styling of individual elements to change.
Appearance changes should be item-specific—it should be more than just a button to "make all the bars red".
You should use a transition to animate the display updating when it changes!
You are welcome to create and use a component external to the displayed visualization (i.e., an HTML
<button>) to enable one of these interactions, but at least one interaction should be caused by the user interacting with the d3-generated visualization directly (e.g., by clicking or mouseovering the items themselves).
4. Layout and Decorations
Finally, your visualization should be structured with appropriate (dynamic!) scales and margins, so that all the data fits and looks nice—even as the displayed data items are interacted with!
As a benefit of having a proper scale, your visualization should also include a descriptive axis (or more likely two axes) labeling the data. This axis should change along with the display of your data items if appropriate.
Finally, you should include at least one other kind of decoration: for example, additional text labels on the elements, or an overall legend. (I've linked to a few relative example tutorials, but you could also look around for additional explanations).
These decorations will help provide an explanation of what your visualization is showing so we can read and understand it!
You should organize your program effectively to make the code readable and re-usable.
"Decompose" your program into different functions to handle different parts of the implementation: do not create your visualization entirely at the "global" scope. Give functions appropriate names, parameters, and return values so that you can have them combine together to create the visualization (look back to what you did with the Turtle for ideas!)
Similarly, you should organize and structure the data appropriately so that the visualization work can be as simple as possible. This may require "flattening" data that is loaded from a web API, or otherwise mapping or filtering for the specific information you are interested in.
Finally, you should put visualization online for others to view and interact with! Publish your repository to GitHub Pages by creating a new
gh-pages branch and pushing that to GitHub. You should then be able to visit
in order to user your program. Note that sometimes it takes a few minutes for GitHub Pages to update with new files, so be patient if they don't show up initially (you can check that the code is pushed correctly by checking the
gh-pages branch on the GitHub web portal).
Be sure that any future changes are made on the
master branch, not on
gh-pages (we'll be grading the code on
master). If you made additional changes, you will need to then
merge them into the
gh-pages branch (watching out for any merge conflicts). If you hit any problems, ask for help!
In order to submit this assignment
Confirm that you've successfully completed the assignment and it works without errors. Loading the web page should display the visualization of the data, which can then be interacted with.
commit the final version of your work, and
push your code to your GitHub repository (to the
Publish your visualizations to the
gh-pages branch on Github, as described above. Make sure you publish the final version!
Make sure that you've filled out the Submission form for this assignment, answering all the questions. BOTH partners should fill out the form!
Submit the URL of your GitHub Repository AS WELL AS the link to your published application (2 links total) as your assignment submission on Canvas (this page, at the top).
If you complete this assignment in pairs, only one person needs to submit the link via Canvas! Just make sure that both partner's names are on the submission.