toolkit/javascript/d3/examples/hello-world/hello-event.html
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--
set up second level for navigation
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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, world!</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
  </head>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
     7
  <body>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
     8
    Your lucky numbers are:<br>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
     9
    <span></span>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    10
    <script type="text/javascript">
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    11
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    12
var data = [4, 8, 15, 16, 23, 42];
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
d3.select("span")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    15
  .selectAll("svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    16
    .data(data)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    17
  .enter().append("svg:svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    18
    .attr("width", 100)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    19
    .attr("height", 100)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    20
  .append("svg:text")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    21
    .attr("x", "50%")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    22
    .attr("y", "50%")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    23
    .attr("dy", ".35em")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    24
    .attr("text-anchor", "middle")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    25
    .attr("fill", "white")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    26
    .attr("stroke", "black")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    27
    .attr("stroke-width", 1.5)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    28
    .attr("cursor", "pointer")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    29
    .style("font", "36pt Comic Sans MS")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    30
    .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    31
    .text(function(d) { return d; })
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    32
    .on("click", click)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    33
    .on("mouseover", mouseover)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    34
    .on("mouseout", mouseout);
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    35
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    36
function click(d, i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    37
  console.log("click", d, i);
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    38
}
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    39
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    40
function mouseover(d, i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    41
  d3.select(this)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    42
      .attr("fill", "brown")
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    43
      .attr("stroke", "grey");
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
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    46
function mouseout(d, i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    47
  d3.select(this)
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    48
      .attr("fill", "orange");
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    49
}
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    50
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    51
    </script>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    52
  </body>
c0b4a8b5a012 add toolkit.html + démonstrateurs
Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
parents:
diff changeset
    53
</html>