Skip to content

Commit

Permalink
assignment 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthewberger
matthewberger committed Aug 29, 2018
1 parent 1b8a303 commit 5e06501
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 0 deletions.
34 changes: 34 additions & 0 deletions assignment1/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Assignment 1

This assignment is a D3 Workout of sorts. You will be using D3 to create a visualization using basic shapes and styling of these shapes. The objective is to produce the following static image through your visualization:

![alt text](https://github.com/matthewberger/vis-fall2018-assignments/tree/master/assignment1/decline.jpg "Target Visualization")

There are two parts to the assignment, both of which have the same objective: produce the above image. First, kick off a local web server via python, in the top-level directory (**vis-fall2018-assignments**), the same way you did in the previous assignment.

## Part 1

Go to [http://localhost:8000/assignment1/part1.html](http://localhost:8000/assignment1/part1.html) for part1. You should see a black rectangle. However, all of the shapes are indeed present in the DOM, but they lack a `fill` color. It is your job to assign these elements the appropriate color. In the code you will see **TODOs** indicating what needs to be selected and what color to assign to the selection. You are to only use D3 functions to complete this part.

Additionally, there is a question at the very end for which you need to provide an answer, in the appropriate Javascript comment.

## Part 2

Go to [http://localhost:8000/assignment1/part2.html](http://localhost:8000/assignment1/part2.html) for part2. You should not see anything here. Indeed, the DOM is mostly empty! Only a single SVG element exists. However, this time the data corresponding to the shapes has been provided. It is your responsibility to join the data with elements to produce the correct visualization. You will see a set of **TODOs** indicating what operations need to be accomplished.

## Hand-in

Zip up the `assignment1` directory with `part1.html` and `part2.html` completed, and submit it to Brightspace.

## Grading Criteria

### Part 1 - 35%

* 30%: perform D3 selections to assign attributes to elements so that the visualization exactly matches the target image
* 5%: correctly answer the provided question

### Part 2 - 65%

* 30%: correcty join data and assign element attributes for the background and `bar` data
* 10%: correcty join data and assign element attributes for the `box` data and `main_circles` data
* 20%: correcty join data and assign attributes for the `eight_circles` data
Binary file added assignment1/decline.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions assignment1/part1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Assignment 1 - D3 Workout Pt. 1</title>
<script type='text/javascript' src='../d3.js'></script>
</head>
<body>
<svg width="1200" height="1200">
<rect id="backgroundrect" x="0" y="0" width="1200" height="1200"></rect>
<rect class="bar" x="29" y="613" width="31" height="587"></rect>
<rect class="bar" x="102" y="613" width="37" height="587"></rect>
<rect class="bar" x="197" y="619" width="45" height="581"></rect>
<rect class="bar" x="292" y="650" width="56" height="550"></rect>
<rect class="bar" x="398" y="702" width="47" height="498"></rect>
<rect class="bar" x="503" y="722" width="34" height="478"></rect>
<rect class="bar" x="570" y="793" width="54" height="407"></rect>
<rect class="bar" x="679" y="809" width="47" height="391"></rect>
<rect class="bar" x="811" y="814" width="29" height="386"></rect>
<rect class="bar" x="905" y="822" width="28" height="378"></rect>
<rect class="bar" x="1016" y="787" width="58" height="413"></rect>
<rect class="bar" x="1123" y="712" width="58" height="488"></rect>
<rect id="mainbox" x="24" y="444" width="119" height="135"></rect>
<g class="maingroup">
<circle class="outer" cx="702.6" cy="769" r="20.4"></circle>
<circle class="inner" cx="702.6" cy="769" r="8.4"></circle>
</g>
<g class="leftgroup" transform="translate(70,507)">
<circle class="outer" r="23"></circle>
<circle class="inner" r="11"></circle>
</g>
<g class="rightgroup" transform="translate(104.5,507)">
<circle class="outer" r="21"></circle>
<circle class="inner" r="8.4"></circle>
</g>
</svg>

<script type='text/javascript'>
{
var bg_color = '#ed8369';
var black_color = '#000000';
var bar_color_1 = '#ffecbf';
var bar_color_2 = '#e2ca9e';

// TODO: assign `rect` with id "backgroundrect" a fill of `bg_color`

// TODO: assign all `rect`s with class "bar" a fill of `bar_color_1` if the i'th bar is even, and `bar_color_2` if the i'th bar is odd

// TODO: assign `rect` with id "mainbox" a fill of `black_color`

// TODO: assign `circle` with class "outer", and whose parent is the group element with class "maingroup", a fill of `black_color`
// TODO: assign `circle` with class "inner", and whose parent is the group element with class "maingroup", a fill of `bg_color`

// NOTE: for each selection below, the transformation should be achieved with a single selection that specifies multiple class selectors
// TODO: assign `circle` with class "outer", and whose parent is the group element with class "leftgroup" or "rightgroup", a fill of `bg_color`
// TODO: assign `circle` with class "inner", and whose parent is the group element with class "leftgroup" or "rightgroup", a fill of `black_color`

// Q: Does the resulting visualization depend on the order in which we select elements and supply fill colors? Why or why not?
// A:
}
</script>

</body>
</html>
63 changes: 63 additions & 0 deletions assignment1/part2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Assignment 1 - D3 Workout Pt. 2</title>
<script type='text/javascript' src='../d3.js'></script>
</head>
<body>

<script type='text/javascript'>
{
var bg_color = '#ed8369';
var black_color = '#000000';
var bar_color_1 = '#ffecbf';
var bar_color_2 = '#e2ca9e';

// each bar is: x,height,width -> the baseline should be at the very bottom
var bars = [
[29,613,60-29],
[102,613,139-102],
[197,619,242-197],
[292,650,348-292],
[398,702,445-398],
[503,722,537-503],
[570,793,624-570],
[679,809,726-679],
[811,814,840-811],
[905,822,933-905],
[1016,787,1074-1016],
[1123,712,1181-1123]
];

var box = [[24,444,143-24,579-444]]; // x,y,width,height

// x,y,radius,fill
var main_circles = [
[702.6,769,20.4,black_color],
[702.6,769,8.4,bg_color],
];

// grouped according to left, right: 'position' is where the circles are centered, children formated as [radius,color]
var eight_circles = [
{'position':[70,507], 'children':[[23,bg_color],[11,black_color]]},
{'position':[104.5,507], 'children':[[21,bg_color],[8.4,black_color]]}
];

d3.select('body').append('svg').attr('width', '1200').attr('height', '1200');

// TODO: create a `rect` with fill `bg_color`, and whose shape matches that of the svg element

// TODO: create `rect`s from the `bars` data, with fill `bar_color_1` when the i'th bar is even and `bar_color_2` if the i'th bar is odd

// TODO: create `rect` from the `box` data, with fill `black_color`

// TODO: create `circle`s from `main_circles`, using colors in the data for fill

// TODO: first create group elements from the outer array, using the position field to define the transformation
// then, create a nested selection using the children field to propagate data
}
</script>

</body>
</html>

0 comments on commit 5e06501

Please sign in to comment.