Mercurial > hg > numerics
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 |
| rev | line source |
|---|---|
| 139 | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| 2 <html> | |
| 3 <head> | |
| 4 <title>{{title}}</title> | |
| 5 <style> | |
| 6 .svgchart rect { | |
| 7 fill: steelblue; | |
| 8 } | |
| 9 .svgchart text { | |
| 10 fill: white; | |
| 11 font: 10px sans-serif; | |
| 12 text-anchor: end; | |
| 13 } | |
| 14 </style> | |
| 15 <script>{{d3}}</script> | |
| 16 <script> | |
| 17 </script> | |
| 18 </head> | |
| 19 <body> | |
| 20 <h1>{{title}}</h1> | |
| 21 <svg class="svgchart"></svg> | |
| 22 <script> | |
| 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 | 27 barHeight = 20; |
| 28 var x = d3.scale.linear() | |
| 29 .domain([0, d3.max(data)]) | |
| 30 .range([0, width]); | |
| 31 var chart = d3.select(".svgchart") | |
| 32 .attr("width", width) | |
| 33 .attr("height", barHeight * data.length); | |
| 34 var bar = chart.selectAll("g") | |
| 35 .data(data) | |
| 36 .enter().append("g") | |
| 37 .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); | |
| 38 bar.append("rect") | |
| 39 .attr("width", x) | |
| 40 .attr("height", barHeight - 1); | |
| 41 bar.append("text") | |
| 42 .attr("x", function(d) { return x(d) - 3; }) | |
| 43 .attr("y", barHeight / 2) | |
| 44 .attr("dy", ".35em") | |
| 155 | 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 | 47 }); |
| 139 | 48 </script> |
| 49 </body> | |
| 50 </html> |