In this assignment, you will use the SVG creation functions we developed in L04 to design simple visualizations for a dataset.
- Using these tools to generate simple visualizations of a dataset
- Developing these visualizations through the paradigm of mapping data elements to visual elements by implicitly looping over the dataset with the specified attribute getters (a key concept we’ll see in d3).
Part 1: Basics
You will submit an HTML file named
index.html, together with any other files you choose to create and reference. This file will include all visualizations you are tasked with (described below). Each visualization should be an SVG element of 500 pixels in both width and height. The id of the element containing the first visualization should be
scatterplot_1, the id of the element containing the second visualizations should be
scatterplot_2, and so on. I found it easiest to append these svg elements to div elements that I created with the ids
chart_2, and so on, but you are welcome to deviate from this and arrange the charts in the HTML file as you see fit.
For this assignment, you are NOT allowed to use any source code other than the files we provide in links from this document. Do not use d3 or other helper libraries. I suggest that you create a file
a03.js that is loaded by
index.html and use this as your main development file.
svg.js source file included in the starter repo. These are the functions we developed in class to create SVG elements, together with a helper function for you to create RGB triplets (in order to give your visualization data-driven colors)
This dataset ref contains standardized scores for all Calvin College 2004 seniors that have taken both the ACT and the SAT, together with their GPAs. There are 271 data points and 4 dimensions.
scores.js. The dataset looks like this:
Part 2: Visualizations
You will create three different visualizations of this dataset:
Create a scatterplot of circles, showing SAT’s verbal scores (
SATV column) versus SAT’s mathematics scores (
SATM column). In other words, the \(x\)-coordinate of the plot should encode the
SATV variable, and the \(y\)-coordinate should encode
SATM. All circles should have a fixed radius and color (please customize these as you see fit).
Next, create a different scatterplot, now showing the relationship between:
- GPA scores (
GPAcolumn) on the \(x\)-axis,
- ACT scores (
ACTcolumn) on the \(y\)-axis,
- the radius of the circles to represent
- color to represent
SATM. When selecting colors, you will have to map the range of
SATMvalues to possible shades of colors. Note that the function
svg.jsexpects values for
bin the range \([0,1]\). See iteration_8.js for an example of how one might do this mapping, but you are encouraged to experiment.
Finally, create a third scatterplot where:
- the sum of the SAT scores specifies the \(x\)-coordinate,
- GPA scores are on the \(y\)-axis,
- radius is fixed
- color represents ACT.
You should use git to submit all source code files. The expectation is that your code will be graded by cloning your repo and then executing it within a modern browser (Chrome, Firefox, etc.)
Please provide a
README.md file that provides a text description of how to run your program and any parameters that you used. Also document any idiosyncrasies, behaviors, or bugs of note that you want us to be aware of.
To summarize, my expectation is that your repo will contain:
- (Optionally) any
.cssfiles containing style information
|Bugs or syntax errors||-10 each bug at grader's discretion to fix|
Point Breakdown of Features
|Consistent modular coding style||5|
|External documentation (README.md) following the template provided in the base repository||5|
|Header documentation, Internal documentation (Block for functions and Inline descriptive comments). Wherever applicable / for all files||10|
Cumulative Relationship to Final Grade
Worth 5% of your final grade
Implementing features above and beyond the specification may result in extra credit, please document these in your README.md. In addition, here are some concrete suggestions to consider:
Improve and Justify Visualization 2 (worth up to 10% extra credit)
Think about the above specifications for the visualizations: is it the best way to portray the interesting features of the data? (Answer: It’s fine, but not ideal.)
Your goal for the final visualization is to improve upon Visualization 2. Since we have we have not discussed perceptual principles in class yet, you do not need to give serious justifications for your choices. This option is mostly a chance for you to explore different variants: try your best to justify your decisions.
Together with the improved visualization, submit no more than two paragraphs of text describing your changes and reasoning. This text should be embedded in the submitted HTML. For this improved visualization, you should use an element with id attribute equal to scatterplot_2b. Improved visualizations without reasoning and justification will not receive any extra credit.
Visualizations 2 and 3 suffer from some amount of overplotting. How would you solve it? (Overplotting is what happens when the second shape your draw goes entirely over the first shape. As a result, you cannot tell if the first point was there to begin with, or, more generally, how many points are “hiding”) It might help to consider ways in which more than one shape can contribute to the final color of each pixel.
Axis Annotations (worth up to 40% extra credit)
Add axis lines, labels and tick marks to the \(x\) and \(y\) axes of your visualizations. In other words, to get this extra credit, instead of looking like this:
your plots should look like this:
(Of course, the dataset I just used in the example above is not the same as the one you have, so the values for the tick marks, labels, etc. will all be different).
Some things you will need to consider:
- margins for your axes, tick marks, and axis labels
- try to pick good values for the tick marks, and a good number of them: not too many, and not too few.