~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-proposed

« back to all changes in this revision

Viewing changes to backend/stats/static/js/d3/examples/brush/brush-ordinal.html

  • Committer: Package Import Robot
  • Author(s): Evan Dandrea
  • Date: 2012-04-10 14:28:58 UTC
  • Revision ID: package-import@ubuntu.com-20120410142858-nk453o1z7t7py3bs
Tags: 0.1.26
* Take ownership of the NetworkManager state variant on setup and
  unref it, plugging a memory leak.
* Log the reason the server rejected the submitted crash report.
* Send the Whoopsie version with each crash submission.
* Delete both .upload and .uploaded files after 14 days. Thanks
  Marc Deslauriers (LP: #973687).

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE html>
 
2
<html>
 
3
  <head>
 
4
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 
5
    <title>Brush</title>
 
6
    <script type="text/javascript" src="../../d3.v2.js"></script>
 
7
    <style type="text/css">
 
8
 
 
9
svg {
 
10
  font: 10px sans-serif;
 
11
}
 
12
 
 
13
path {
 
14
  -webkit-transition: fill-opacity 250ms linear;
 
15
}
 
16
 
 
17
.selecting path {
 
18
  fill-opacity: .2;
 
19
}
 
20
 
 
21
.selecting path.selected {
 
22
  stroke: #f00;
 
23
  stroke-width: 2px;
 
24
}
 
25
 
 
26
.axis path, .axis line {
 
27
  fill: none;
 
28
  stroke: #000;
 
29
  shape-rendering: crispEdges;
 
30
}
 
31
 
 
32
.brush .extent {
 
33
  stroke: #fff;
 
34
  fill-opacity: .125;
 
35
  shape-rendering: crispEdges;
 
36
}
 
37
 
 
38
    </style>
 
39
  </head>
 
40
  <body>
 
41
    <script type="text/javascript">
 
42
 
 
43
var data = d3.svg.symbolTypes;
 
44
 
 
45
var m = [10, 10, 20, 10],
 
46
    w = 960 - m[1] - m[3],
 
47
    h = 100 - m[0] - m[2];
 
48
 
 
49
var x = d3.scale.ordinal().domain(data).rangePoints([0, w], 1);
 
50
 
 
51
var svg = d3.select("body").append("svg")
 
52
    .attr("width", w + m[1] + m[3])
 
53
    .attr("height", h + m[0] + m[2])
 
54
  .append("g")
 
55
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
56
 
 
57
svg.append("g")
 
58
    .attr("class", "x axis")
 
59
    .attr("transform", "translate(0," + h + ")")
 
60
    .call(d3.svg.axis().scale(x).orient("bottom"));
 
61
 
 
62
var symbol = svg.append("g").selectAll("path")
 
63
    .data(data)
 
64
  .enter().append("path")
 
65
    .attr("transform", function(d) { return "translate(" + x(d) + "," + (h / 2) + ")"; })
 
66
    .attr("d", d3.svg.symbol().type(String).size(200));
 
67
 
 
68
svg.append("g")
 
69
    .attr("class", "brush")
 
70
    .call(d3.svg.brush().x(x)
 
71
    .on("brushstart", brushstart)
 
72
    .on("brush", brushmove)
 
73
    .on("brushend", brushend))
 
74
  .selectAll("rect")
 
75
    .attr("height", h);
 
76
 
 
77
function brushstart() {
 
78
  svg.classed("selecting", true);
 
79
}
 
80
 
 
81
function brushmove() {
 
82
  var s = d3.event.target.extent();
 
83
  symbol.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; });
 
84
}
 
85
 
 
86
function brushend() {
 
87
  svg.classed("selecting", !d3.event.target.empty());
 
88
}
 
89
 
 
90
    </script>
 
91
  </body>
 
92
</html>