Description
Goals: Practice using d3 to create some simple charts. Get more experience importing data
and working with loops.
Your work should be in the form of an HTML file called index.html with one
element per
problem. If you must add any SVG canvases programmatically, we suggest that you add a
homework we will be using d3.js. In thesection of your file, please import d3 using
this tag:
Create a zip archive containing your HTML file and all associated data files (such as
diamonds.json) and upload it to CMS before the deadline. Submissions that do not include
data files may be penalized. Your submission will be graded using a Python web server run in
a parent directory containing your zip file contents (e.g. server started in ~/student_hw, with
your homework at ~/student_hw/your_netid/hw3/index.html) – be sure that it works.
1. In this problem we’re going to plot some data about diamond sales. The file
diamonds.json contains a JSON block that defines an array of objects. Each object
represents a particular diamond sold in a marketplace. These have been randomly sampled
from a much larger dataset. In addition to numeric columns for price and size (carats), the
dataset contains a color rating value where 1 is the best value.
A. Load the data file using an asynchronous request with d3.json. You can use .then() to
handle the promise. Make sure all of your code for this problem is within the .then() function!
B. Create a 400x400px SVG element using d3 functions.
Create two linear scale functions: an x scale for “carat”
and a y scale for the “price”. Make the domain start at 0
and end at the maximum value for each respective
attribute. Choose the “range” attributes to be
appropriate for the size of your plot. The plot can use the
entire SVG canvas, but reserve 5 pixels at the top and
right as padding using your range to make space for the
maximum points so they do not clip at the edges.
Remember to consider for the way SVG coordinates
handle Y when using your y scale; we don’t want any
upside-down charts. Using any kind of loop you prefer,
use d3 and the scales you build to construct element gridlines, including 0, for every integer for the x axis and every $1,000 for the y axis
on the SVG canvas. Do not create any text labels. Style lines however you want.
C. Using a forEach loop in Javascript, create a 3px radius circle for each point in the dataset,
located at its proper place on the chart. Use your scales to place the points and employ
Math.floor() to make sure you place each circle on an integer pixel location. Fill each point
in a dark blue color of your choice. Set the opacity SVG attribute of each circle to 0.4 to make
them translucent and show point density.
D. Now let’s look at the color rating of each gem. Create
a second 400x400px SVG element using d3 functions.
Instead of charting “carat” on the x axis, chart the
“color_rating” variable using an appropriate scale (hint:
modify a copy of step C rather than starting from scratch).
Recall that color_rating=1 is the best value. While
color_rating ranges from 1 to 7, set the domain of your
new x scale to [0,8] so that you have more space for
columns of points. Create vertical gridlines for integers in
range [1,7]. If you feel that including a gridline at 0
would make the chart look better, feel free to do so. You
will not need any padding on this axis since you reserved
space in the domain. As in part B, create horizontal gridlines for every $1000 on the y axis.
Finally, create a 3px radius circle for each point in the dataset. To locate the points, use your
scales and add a random 5px jitter to each point location (i.e. location +
(Math.random()*10)-5 ). Make sure to Math.floor() that result so that you place each circle
on an integer pixel location. Fill each point in a dark green color of your choice. Set the opacity
SVG attribute of each circle to 0.3 to make them translucent.
E. There’s not much of a trend to see in this chart? This is
because the new plot combines points of all sorts of
different carats together. A low quality gem might be
priced the same as a rank 1 gem if it is absolutely gigantic.
Create a third 400x400px SVG element using d3
functions. Instead of charting “price” on the y axis, create
a new measure that shows the price per carat of each
point (hint: modify a copy of step D rather than starting
from scratch). You do not need to record this new
measure into the data; rather, just build it on the fly as you
construct scales, gridlines, and circles. Create a new y
scale to account for this new measure, and draw gridlines
every $1000 per carat, starting at 0. Create a 3px radius circle for each point in the dataset. To
locate the points, use your scales and add a random 5px jitter to each point location (i.e.
location + (Math.random()*10)-5 ). Make sure to Math.floor() that result so that you
place each circle on an integer pixel location. Fill each point in a dark red color of your choice.
Set the opacity SVG attribute of each circle to 0.3 to make them translucent. This view ought to
suggest a relationship between price per carat and quality. Unfortunately, statistical testing
shows no such relation. In the
tag of your submission, briefly discuss why this chart might
mislead a viewer into seeing a pattern that isn’t present.
2. For this problem we have processed a
public dataset of NCAA Basketball games
from the 2018-2019 and 2020-2021 seasons
(aggregated from data scraped by Luke Benz).
Our goal is to recreate a popular heatmap
visualization made by Max Woolf. You can see
our final version of it to the right. Areas of high
activity in the game are colored yellow and
areas of low activity are black. Marks are
individual squares and channels are
aligned position and color hue+luminosity.
To make this visualization we have added up
all the shot attempts made by players at
different locations in the court. A shot attempt
refers to when a player throws the ball
attempting to get it into the opposing team’s basket to score points (where and when they can
throw is influenced by rules and team strategy). You can see the basketball hoop in the middle
bottom and an arc created by the “3 point line” that dictates where players can throw the ball
to earn more points.
A. In your HTML, create a 500x500px SVG element. Use CSS styles to give it a black
background. Now load the included data file NCAA_shots.csv by using an asynchronous
request (i.e. d3.csv().then()). Implement the rest of this problem in the promise function.
Use console.log() to check out the data you’re using for this problem. You will notice that each
element contains x, y, width, and height values for making the colored rectangles. The other
keys contain different kinds of count data about what shots happened in a specific area of the
court. For this assignment we’ll start by examining the total number of all successful and missed
shots at a location: attempt.
We have one challenge to tackle first. The dataset comes with x and y positions ranging from
0 to 100, but our SVG is 500 pixels in size. We need to adjust the x, y, width, and height values
so that they match. At the top of your promise function, use a forEach() loop to alter the data.
For each point in the dataset, multiply x, y, width, and height by 5 so that they range from 0
to 500. You could also do this with scales, but this is far more convenient.
Now create a new sequential color scale for the heatmap. Use d3.extent() to figure out the
extent of attempt in the dataset. Then, make a sequential color scale using that as your domain.
Use the d3.interpolateViridis color scale in your sequential scale (hint: docs).
Finally, use a for or forEach loop to create new elements for each row of data in your
dataset. As the dataset already now has correct x, y, width, and height values, configuring the
rect elements should be straightforward. Adjust the fill of the rectangles using your color scale
and the attempt value. Please note that at this stage, your final visualization will not look like
the example image. It will be mostly dark blue.
B. There is something odd with the visualization you’ve created. If you’ve done it properly,
you should see an intensely yellow blob and not much else. This is because the data have an
exponential distribution. Close to the basket there are many, many more attempts than far away.
This causes the color scale to assign yellow to a large value while all other values are so small
that they receive virtually the same color at the bottom of the scale. One common approach
for resolving this issue is to use a logarithmic scale instead of a linear scale (which
scaleSequential uses). While there are ways to do this with d3 scales, they are needlessly
complex. Instead, we have provided for you another data attribute: log_attempt.
Adjust your code so that you use log_attempt instead of attempt for your rectangle fill color.
You should only need to change your d3.extent() call and “fill” setter.
Compare that result with your previous visualization. In 2-3 sentences in your
tag, please
describe one advantage and one disadvantage of the logarithmic color scale as compared to
the original, linear scale.
You do not need to submit both versions of #3. Only submit the version that uses log_attempt.
