Description
CS/INFO 3300 // INFO 5100 Homework 1
Problem 0: We use a “let” statement to…
Create a zip archive containing this file and upload it to CMS before the deadline. Please
check to make sure that the data uploaded are what you intend to submit.
1. For each of the following visualizations, identify the marks used and visual channels
employed from the list provided. Be as exhaustive as possible. You do not need to supply
the precise data attribute – you only need to write the marks and visual channels used.
Possible visual channels:
Aligned Position (x or y); Unaligned Position (x or y); Aligned Length; Unaligned Length;
Area; Volume; Color Hue; Color luminosity;
EXAMPLE:
Marks: Blue rectangles
Channels: Varying the vertical aligned length and horizontal aligned position of rectangles
A)
B)
C)
(Note: The row of numbered items at the top (1.SS, 2.CoS, etc.) are individual books in the series.
Word position continues through the entire series of books from start to end)
2. For each of the following items in the list, please:
A: Identify whether it is a canonical Javascript type
B: If the type is a canonical Javascript type, please provide an example in your
CS/INFO 3300 // INFO 5100 Homework 2
Goals: Get practice using SVG elements.
Your work should be in the form of an HTML file called index.html. At the top of your
, please put your name and netID in a
tag. Include one
element per
problem. Wrap any SVG code for each problem in a element nested within the
element. For this homework we will not be using Javascript.
Since we want you to get more experience working with SVG, we would like you to
complete this assignment using handwritten SVG elements. Some problems might
require numbers like pixel positions which require calculation. Feel free to use whatever
tool you prefer in order to compute these, but they should appear in your turn-in
homework as literal numbers in the code. You can use a color picker tool to find good
colors, but once again they must appear as literal elements in the file. You may not use an
SVG authoring tool like Adobe Illustrator. We can tell if you use one, and the time it would
take to obfuscate their output is much greater than just doing the assignment yourself.
Create a zip archive containing your HTML file and upload to CMS before the deadline.
(see next page)
1. Create a 360x360 pixel SVG element. Reproduce this plot using SVG elements:
The main plot region, excluding axis labels, should be a square 320x320 pixels in size,
running from (20,20) to (340, 340). Reserve the remaining pixels on the outside as padding
for the axis labels. Data for the points are provided at the bottom of this homework file.
The chart should start with data value [0,0] in the lower left corner (pixel location (20, 340) )
and end with data value [10,10] in the upper right corner (pixel location (340, 20) ).
Create a circle mark for each data point. Circle marks should be reasonably sized and in a
dark color of your choosing. You should calculate the proper pixel positions for the [x, y]
coordinates from the data as necessary.
Remember to account for the "padding" pixels when determining positions for points.
While we recommend that you hardcode point positions using the 20-340 pixel range, we
will also accept submissions that use SVG group translations to relocate the plot region.
Add horizontal and vertical gridlines for each integer from 1 to 10 in a light grey.
Include elements for axis labels at 0, 5, and 10 as depicted in the image in Arial
typeface for both the X and Y axes. They should be *centered* to the side / underneath
gridlines using CSS properties (hint: text-anchor and dominant-baseline ).
Your result may not look exactly like the figure; we will be grading based on your accuracy
in positioning points.
(next page)
2. Examine your finished canvas (or the example image). In a
tag, please identify:
a) the marks used for each row of data
b) the two visual channels used in this visualization
(when answering, please ignore the annotations you added such as elements)
3. Use and elements to create your own version of a Piet Mondrian painting
in a 300x300 SVG canvas. Piet Mondrian was an early 20th century artist who, as a member
of the De Stijl movement, reduced his art to three primary colors and black lines in a series
of famous neoplasticist works. Here are some examples: one, two, three, four. In your own
neoplastic work, you must include at least 6 lines and 3 rectangles. elements must
use a black stroke and elements must be either white, red, yellow, or blue fill.
elements cannot have a stroke – only use a fill for them. If you want black borders,
you must use elements. No other colors will be permitted. You may use any
additional features you feel would add aesthetic value. If you use a tool to generate
coordinates for shapes, please cite that tool. Faithfulness to art history will not be
evaluated. We are not grading based on creativity, but obviously poor or incomplete
submissions will be penalized. (20pts)
Data for scatterplot
X Y
p1 1.0 9.0
p2 1.5 6.0
p3 2.5 4.0
p4 4.0 2.0
p5 5.0 1.6
p6 6.0 2.4
p7 7.0 3.0
p8 8.0 3.4
p9 9.0 3.6
Bonus problem (no extra credit offered – just for fun)
Make a Python program that automatically generates the canvas, lines, labels, and circle
marks for problem #2.
Your program should take as input a list of dictionary objects, each with “x” and “y” values.
Ideally, you should be able to configure the minimum and maximum values you want to
display on the x and y axes.
You can use min, max, and modulo functions to identify how many gridlines to create and
identify where your major axis labels (0,5,10…) should go.
Since you know the canvas area is 320x320 and you’ve defined your axis min/max values,
you can use some math to figure out where your circles should go.
Afterwards, use string composition to output some valid HTML.
Use this to check your answer to #2.
…this might also help:
data = [{"x":1.0 ,"y":9.0},
{"x":1.5 ,"y":6.0},
{"x":2.5 ,"y":4.0},
{"x":4.0 ,"y":2.0},
{"x":5.0 ,"y":1.6},
{"x":6.0 ,"y":2.4},
{"x":7.0 ,"y":3.0},
{"x":8.0 ,"y":3.4},
{"x":9.0 ,"y":3.6}]
CS/INFO 3300; INFO 5100 Homework 3
Goals: Practice using d3 to create SVG elements and set their aesthetic properties. Recognize
the effect of data transformations through direct data changes and through scale functions.
Practice working with color scales.
Your work should be in the form of an HTML file called index.html with one
element per
problem. Wrap any SVG code for each problem in a element following the
element. For this homework we will be using d3.js. In thesection of your file, pleaseimport d3 using this tag: Create a zip archive containing your HTML file and all associated data files (such asdiamonds.json) and upload it to CMS before the deadline. Submissions that do not includedata files may be penalized. Your submission will be graded using a Python web server run ina parent directory containing your zip file contents (e.g. server started in ~/student_hw, withyour homework at ~/student_hw/your_netid/hw3/index.htm) – be sure that it works.1. In your HTML, please create a 300x300 pixel SVG element. Then, select it usingd3.select() in the
CS/INFO 3300; INFO 5100 Homework 4
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.
CS/INFO 3300; INFO 5100 Homework 5
Goals: Practice using d3 to create some simple charts. Get more experience importing data and
working with data joins.
Your work should be in the form of an HTML file called index.html or index.htm 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 wines.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 along with many other students’ submissions.
(e.g. the grader has a folder, ~/hw5_cms, where they start their own web server and unzip your
assignment. If you just zip up index.htm and your data files as we ask, CMS will automatically make
a sub-directory for your netID when we download it from the system. This means that your homework
would appear at ~/hw5_cms/your_netID/index.htm on the grader’s computer. In their web
browser, it would show as https://127.0.0.1:8000/your_netID/index.htm in the URL bar.)
1. For this problem, we will be making use of a color
space available in d3, LAB. Unlike traditional HSV (hue,
saturation, value), LAB (luminosity, a, b) more closely
estimates how humans perceive colors. You will design
an interactive visualization of the color space, illustrating
what the two chroma dimensions, A and B, are about.
A. After a
tag for problem 2, place a square SVG
element 420px in height and width.
In a
CS/INFO 3300; INFO 5100 Homework 6
Goals: Practice using d3 to create a line chart
Your work should be in the form of an HTML file called index.html or index.htm with one
element per problem. For this homework we will be using d3.js. In thesection of your file,please import d3 using this tag: Create a zip file containing your HTML file and associated data files (such as erie_fishing.json ormariokart_records.json) and upload it to CMS before the deadline. Submissions that do not includedata files may be penalized. Your submission will be graded using a Python web server run in aparent directory containing your zip file contents along with many other students’ submissions.(e.g. the grader has a folder, ~/hw6_cms, where they start their own web server and unzip yourassignment. If you just zip up index.htm and your data files as we ask, CMS will automatically makea sub-directory for your netID when we download it from the system. This means that your homeworkwould appear at ~/hw6_cms/your_netID/index.htm on the grader’s computer. In their webbrowser, it would show as https://127.0.0.1:8000/your_netID/index.htm in the URL bar.)1. In this problem you have the choice of two different datasets that involve creating a line chart:• erie_fishing.json – A file containing historical fishing yields for different fish species inLake Erie (a nearby Great Lake). Fishing in the lake has shifted from sustainable indigenouspractices to commercial fishing (which led to species extinction) and finally towards anunsteady balance between conservation and commerce. This file will show how yearly fishingamounts (in 1,000s of pounds) vary for several species between the 19th and 20th centuries.• mariokart_records.json – A file containing historical ‘world record’ three lap times for theretro video game Mario Kart 64. As speedrunners continually discover unusual shortcuts andtricks, the time it takes to complete three laps of a race track may dramatically decrease. Thisfile may show those decreases as new records are set between 2007 and 2020.Both datasets have been post-processed to have similar data structures, so you will follow the samedirections regardless of which dataset you choose to process. Please pick one dataset only.A. After a
tag for problem 1, place a square SVG element 800px in height and 400px in width.
In a
