-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart2.html
149 lines (129 loc) · 4.79 KB
/
part2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<<<<<<< HEAD
<!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');
d3.select('svg').append('rect')
.attr('width', 1200).attr('height', 1200).attr('fill',bg_color);
// TODO: create a `rect` with fill `bg_color`, and whose shape matches that of the svg element
d3.select('svg').selectAll('a').data(bars).enter().append('rect')
.attr('fill',(d,i)=>i%2?bar_color_2:bar_color_1)
.attr('x',d=>d[0])
.attr('y', d=>d[1])
.attr('width',d=>d[2])
.attr('height',d=>1200-d[1]);
// 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
d3.select('svg').selectAll('a').data(box).enter().append('rect')
.attr('fill', black_color)
.attr('x',d=>d[0])
.attr('y',d=>d[1])
.attr('width',d=>d[2])
.attr('height',d=>d[3]);
// TODO: create `rect` from the `box` data, with fill `black_color`
d3.select('svg').selectAll('a').data(main_circles).enter().append('circle')
.attr('fill',d=>d[3])
.attr('cx',d=>d[0])
.attr('cy',d=>d[1])
.attr('r',d=>d[2]);
// TODO: create `circle`s from `main_circles`, using colors in the data for fill
var g = d3.select('svg').selectAll('a').data(eight_circles).enter().append('g')
.attr('transform', d=>'translate('+d.position[0]+','+d.position[1]+')');
// TODO: first create group elements from the outer array, using the position field to define the transformation
var d= g.selectAll('a').data(d=>d.children).enter().append('circle')
.attr('r',d=>d[0])
.attr('fill',d=>d[1]);
// then, create a nested selection using the children field to propagate data
}
</script>
</body>
</html>
=======
<!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,y,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>
>>>>>>> ddccec34d0d8095392dc0a7fe23f1be3d23699a8