annotate numerics/templates/bar.d3.html @ 156:69940819bc8a

allow for labels in an assenine way
author Jeff Hammel <k0scist@gmail.com>
date Tue, 12 May 2015 16:25:37 -0700
parents 2a124febcd49
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
139
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
2 <html>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
3 <head>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
4 <title>{{title}}</title>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
5 <style>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
6 .svgchart rect {
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
7 fill: steelblue;
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
8 }
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
9 .svgchart text {
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
10 fill: white;
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
11 font: 10px sans-serif;
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
12 text-anchor: end;
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
13 }
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
14 </style>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
15 <script>{{d3}}</script>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
16 <script>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
17 </script>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
18 </head>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
19 <body>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
20 <h1>{{title}}</h1>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
21 <svg class="svgchart"></svg>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
22 <script>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
23 var data = {{data}};
156
69940819bc8a allow for labels in an assenine way
Jeff Hammel <k0scist@gmail.com>
parents: 155
diff changeset
24 var labels = {{labels}};
69940819bc8a allow for labels in an assenine way
Jeff Hammel <k0scist@gmail.com>
parents: 155
diff changeset
25 var ctr = 0;
69940819bc8a allow for labels in an assenine way
Jeff Hammel <k0scist@gmail.com>
parents: 155
diff changeset
26 var width = 960,
139
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
27 barHeight = 20;
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
28 var x = d3.scale.linear()
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
29 .domain([0, d3.max(data)])
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
30 .range([0, width]);
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
31 var chart = d3.select(".svgchart")
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
32 .attr("width", width)
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
33 .attr("height", barHeight * data.length);
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
34 var bar = chart.selectAll("g")
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
35 .data(data)
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
36 .enter().append("g")
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
37 .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
38 bar.append("rect")
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
39 .attr("width", x)
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
40 .attr("height", barHeight - 1);
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
41 bar.append("text")
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
42 .attr("x", function(d) { return x(d) - 3; })
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
43 .attr("y", barHeight / 2)
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
44 .attr("dy", ".35em")
155
2a124febcd49 prepping for labels
Jeff Hammel <k0scist@gmail.com>
parents: 139
diff changeset
45 .text(function(d) {
156
69940819bc8a allow for labels in an assenine way
Jeff Hammel <k0scist@gmail.com>
parents: 155
diff changeset
46 return labels[ctr++];
155
2a124febcd49 prepping for labels
Jeff Hammel <k0scist@gmail.com>
parents: 139
diff changeset
47 });
139
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
48 </script>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
49 </body>
ce0e1e5efe77 stubbing
Jeff Hammel <k0scist@gmail.com>
parents:
diff changeset
50 </html>