Description
1. Create a 360×360 pixel SVG element. Reproduce this plot using SVG elements:
The main plot region, excluding axis labels, should be a square 320×320 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
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
3. Use
in a 300×300 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.
use a black stroke and
you must use
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 320×320 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}]