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 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.
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 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. 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)
