| author | Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> |
| Fri, 18 Apr 2014 14:31:58 +0200 | |
| changeset 51 | 79833eaa394a |
| parent 47 | c0b4a8b5a012 |
| permissions | -rw-r--r-- |
|
47
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
1 |
<!DOCTYPE html> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
2 |
<html> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
3 |
<head> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
4 |
<title>Hello, transition!</title> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
5 |
<script type="text/javascript" src="../../d3.js"></script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
6 |
<style type="text/css"> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
7 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
8 |
body { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
9 |
font: 14px Helvetica Neue; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
10 |
text-rendering: optimizeLegibility; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
11 |
margin: 1em; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
12 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
13 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
14 |
div { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
15 |
font-size: 42px; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
16 |
margin-top: .5em; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
17 |
background-color: steelblue; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
18 |
color: white; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
19 |
text-align: right; |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
20 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
21 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
22 |
</style> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
23 |
</head> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
24 |
<body> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
25 |
Your lucky number is:<br> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
26 |
<div></div> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
27 |
<script type="text/javascript"> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
28 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
29 |
transform(); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
30 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
31 |
function transform() { |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
32 |
d3.select("div") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
33 |
.style("width", "0%") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
34 |
.style("background-color", "steelblue") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
35 |
.text("hello\u00a0") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
36 |
.transition() |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
37 |
.ease("bounce") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
38 |
.duration(2000) |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
39 |
.style("width", "100%") |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
40 |
.style("background-color", "brown"); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
41 |
} |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
42 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
43 |
window.addEventListener("keypress", transform, false); |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
44 |
|
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
45 |
</script> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
46 |
</body> |
|
c0b4a8b5a012
add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff
changeset
|
47 |
</html> |