[SOLVED] Cs/info 3300 // info 5100 homework 1 to 6 solutions

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

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

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}]

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

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