-
Notifications
You must be signed in to change notification settings - Fork 2
/
2.html
80 lines (73 loc) · 2.48 KB
/
2.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
<!DOCTYPE html>
<title>D3D3CONF</title>
<body>
<script src="assets/d3.v3.min.js" charset="utf-8"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script>
/* Set up some preliminary definitions. We're going to make some circular rings
* that cover the entire screen, so calculate its dimensions and the number and
* size of the circles.
*/
var body = d3.select("body"),
width = body.property("offsetWidth"),
height = body.property("offsetHeight"),
n = 30, // How many rings?
dr = width / n, // Width of one ring
dt = 10; // How fast to animate (bigger == slower)
var svg = body.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + [width / 2 + 30, height / 2 + 100] + ")");
/* The fundamental concept in D3 is a data join -- a connection between _DOM Elements_
* and _data_. So we need some data to work with. In this case, we want to generate
* a series of n concentric circles. `d3.range(n)` generates an array `[0, 1, ..., n]`,
* and then for each element, `.enter().append("circle")` creates an SVG `circle`
* element.
*/
var circles = svg.selectAll("circle")
.data(d3.range(n))
.enter().append("circle")
.attr("cx", 0)
.attr("cy", 0);
/* d3.timer lets you do things on every frame. You give it a function, and it gets
* called with a time value `t` which is a constantly increasing number of milliseconds.
* Usually using the raw value is too fast for animations, so you probably want to
* divide it by a constant factor `dt`.
*/
d3.timer(function(t) {
t /= dt;
circles.attr("r", function(d) {
return width - d * (width / n) - t % dr;
});
circles.attr("fill", function(d) {
if (t % (2 * dr) > dr) {
return d % 2 ? "#fff" : "#000";
} else {
return d % 2 ? "#000" : "#fff";
}
});
});
var img = body.append("img")
.attr("src", "assets/octophone.png")
.style("position", "absolute")
.style("top", "50%")
.style("left", "50%")
.style("margin-top", "-227px")
.style("margin-left", "-402px");
var attribution = body.append("div")
.style("position", "absolute")
.style("right", "25px")
.style("bottom", "25px")
.style("background", "rgba(255,255,255,0.7)")
.style("padding", "10px")
.style("font-family", "Futura")
.html("After Francis Picabia, <i>Octophone I</i>")
</script>