--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-event.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hello, world!</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ </head>
+ <body>
+ Your lucky numbers are:<br>
+ <span></span>
+ <script type="text/javascript">
+
+var data = [4, 8, 15, 16, 23, 42];
+
+d3.select("span")
+ .selectAll("svg")
+ .data(data)
+ .enter().append("svg:svg")
+ .attr("width", 100)
+ .attr("height", 100)
+ .append("svg:text")
+ .attr("x", "50%")
+ .attr("y", "50%")
+ .attr("dy", ".35em")
+ .attr("text-anchor", "middle")
+ .attr("fill", "white")
+ .attr("stroke", "black")
+ .attr("stroke-width", 1.5)
+ .attr("cursor", "pointer")
+ .style("font", "36pt Comic Sans MS")
+ .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
+ .text(function(d) { return d; })
+ .on("click", click)
+ .on("mouseover", mouseover)
+ .on("mouseout", mouseout);
+
+function click(d, i) {
+ console.log("click", d, i);
+}
+
+function mouseover(d, i) {
+ d3.select(this)
+ .attr("fill", "brown")
+ .attr("stroke", "grey");
+}
+
+function mouseout(d, i) {
+ d3.select(this)
+ .attr("fill", "orange");
+}
+
+ </script>
+ </body>
+</html>