--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/brush/brush-y.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+ <title>Brush</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <style type="text/css">
+
+svg {
+ font: 10px sans-serif;
+}
+
+circle {
+ -webkit-transition: fill-opacity 250ms linear;
+}
+
+.selecting circle {
+ fill-opacity: .2;
+}
+
+.selecting circle.selected {
+ stroke: #f00;
+}
+
+.axis path, .axis line {
+ fill: none;
+ stroke: #000;
+ shape-rendering: crispEdges;
+}
+
+.brush .extent {
+ stroke: #fff;
+ fill-opacity: .125;
+ shape-rendering: crispEdges;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var data = d3.range(800).map(Math.random);
+
+var m = [10, 10, 10, 40],
+ w = 120 - m[1] - m[3],
+ h = 960 - m[0] - m[2];
+
+var x = d3.random.normal(w / 2, w / 8),
+ y = d3.scale.linear().range([h, 0]);
+
+var svg = d3.select("body").append("svg:svg")
+ .attr("width", w + m[1] + m[3])
+ .attr("height", h + m[0] + m[2])
+ .append("svg:g")
+ .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+svg.append("svg:g")
+ .attr("class", "y axis")
+ .call(d3.svg.axis().scale(y).orient("left"));
+
+var circle = svg.selectAll("circle")
+ .data(data)
+ .enter().append("svg:circle")
+ .attr("transform", function(d) { return "translate(" + x() + "," + y(d) + ")"; })
+ .attr("r", 3.5);
+
+svg.append("svg:g")
+ .attr("class", "brush")
+ .call(d3.svg.brush().y(y)
+ .on("brushstart", brushstart)
+ .on("brush", brush)
+ .on("brushend", brushend))
+ .selectAll("rect")
+ .attr("width", w);
+
+function brushstart() {
+ svg.classed("selecting", true);
+}
+
+function brush() {
+ var e = d3.event.target.extent();
+ circle.classed("selected", function(d) { return e[0] <= d && d < e[1]; });
+}
+
+function brushend() {
+ svg.classed("selecting", !d3.event.target.empty());
+}
+
+ </script>
+ </body>
+</html>