IntroductionRequirement
CS/INFO 3300; INFO 5100
Homework 2
Due 11:59pm Friday 2/10
Use the same format as Homework 1: wrap each answer in a
element, with any
SVG tags in an element instead of a element. Put your name and
netid in the . Put this file in a zip archive.
The goal of this homework is to learn about SVG. All work should be plain SVG,
with NO Javascript. Some problems require numbers, like pixel positions or
descriptive statistics. You may calculate these in any way you see fit (R, excel, ), but
they should appear in your turned-in homework as literal numbers. You may not
use an SVG authoring tool like Adobe Illustrator (no, seriously: we can tell, and it’s
easier to write from scratch than to edit it to make it look like you did).
1. Create a 200x200 pixel SVG element with the word “Cornell” in red, centered in
the exact middle (vertically and horizontally), using the Palatino typeface, with a
drop shadow for the word. Consult the SVG specification to find out how to change
color and font attributes, set text alignment, and add filters and shadows. Put a
small green circle at 100,100 so we can see that your text is centered. If you do not
have Palatino, you may use another font to test your code. (20pts)
2. Create a 200x200 pixel SVG element. Reproduce the plot in Figure 2 of the
Wickham “Layered Grammar of Graphics” reading using SVG elements. Recalculate
the pixel positions for the (x, y) coordinates in Table 2 as necessary. Remember to
account for the “padding” pixels below and to the left of the axes. You do NOT need
to include the short tick marks. Table 2 contains data values. Table 3 contains those
data values transformed into pixel coordinates. You will need to recalculate these
pixel coordinates. The result may not look exactly like Figure 2; we will know what to
expect for the data in Table 2. (20pts)
3. Use SVG elements to create a design for the course flag. You must
include three heptagrams and position them using the transform. attribute. You
may use any additional shapes or patterns you can think of. If you use a tool to
generate coordinates for shapes, please cite that tool. You must also include the
course motto: ESSE ET VIDERI using a element. Hint: for repeated shapes,
write the coordinates once, copy it several times, and then use some combination
of translate() and scale() transformations to place them. (20pts)
4. Make a bar plot that represents the frequency of numbers in this dataset:
var samples = [4, 11, 6, 7, 3, 7, 2, 4, 15, 6, 7, 5, 4, 15, 7,
5, 7];
The x-axis will correspond to values from the dataset, and the y-axis will correspond
to the frequency of those values. Figure out how to map those numbers into pixel
coordinates. Consider the following dataset:
A. Make a bar plot of the data values using SVG rectangles (labels optional). Create
one rectangle for each distinct integer in the dataset. Each one should be
positioned so that it is centered at the x-axis value that corresponds to its data
value. For example, the middle of the bar for “5” should be at the pixel coordinate
that corresponds to the value 5. In other words, leave empty space even for values
that have no observations: there should be a gap between the bars for 7 and 11.
(20pts)
B. Calculate the mean, median, mode, and standard deviation and record those
numbers in the
tag. You may use whatever tool you like, we only need to see
the result. (5 pts)
C. Add vertical lines to the plot corresponding to the mean (in red), median (in blue)
and mode (in purple). For the “mean” line, make a line from the top of the figure to
the bottom, at the x position in the figure that corresponds to the mean you
calculated. (5 pts)
D. Use an SVG rectangle with a semi-transparent fill to show the region covering one
standard deviation on both sides of the mean. In other words, make a rectangle
from the top of the figure to the bottom that is centered at the mean, and two
standard deviations wide. (5pts)
E. Calculate the probability that a randomly selected datapoint is equal to 4 and
record it in the
tag. (5pts)