← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/d3/examples/hello-world/hello-transition.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/hello-world/hello-transition.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <title>Hello, transition!</title>
5
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
6
 
    <style type="text/css">
7
 
 
8
 
body {
9
 
  font: 14px Helvetica Neue;
10
 
  text-rendering: optimizeLegibility;
11
 
  margin: 1em;
12
 
}
13
 
 
14
 
div {
15
 
  font-size: 42px;
16
 
  margin-top: .5em;
17
 
  background-color: steelblue;
18
 
  color: white;
19
 
  text-align: right;
20
 
}
21
 
 
22
 
    </style>
23
 
  </head>
24
 
  <body>
25
 
    Your lucky number is:<br>
26
 
    <div></div>
27
 
    <script type="text/javascript">
28
 
 
29
 
transform();
30
 
 
31
 
function transform() {
32
 
  d3.select("div")
33
 
      .style("width", "0%")
34
 
      .style("background-color", "steelblue")
35
 
      .text("hello\u00a0")
36
 
    .transition()
37
 
      .ease("bounce")
38
 
      .duration(2000)
39
 
      .style("width", "100%")
40
 
      .style("background-color", "brown");
41
 
}
42
 
 
43
 
window.addEventListener("keypress", transform, false);
44
 
 
45
 
    </script>
46
 
  </body>
47
 
</html>