|
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}};
|
|
|
24 var width = 420,
|
|
|
25 barHeight = 20;
|
|
|
26 var x = d3.scale.linear()
|
|
|
27 .domain([0, d3.max(data)])
|
|
|
28 .range([0, width]);
|
|
|
29 var chart = d3.select(".svgchart")
|
|
|
30 .attr("width", width)
|
|
|
31 .attr("height", barHeight * data.length);
|
|
|
32 var bar = chart.selectAll("g")
|
|
|
33 .data(data)
|
|
|
34 .enter().append("g")
|
|
|
35 .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
|
|
|
36 bar.append("rect")
|
|
|
37 .attr("width", x)
|
|
|
38 .attr("height", barHeight - 1);
|
|
|
39 bar.append("text")
|
|
|
40 .attr("x", function(d) { return x(d) - 3; })
|
|
|
41 .attr("y", barHeight / 2)
|
|
|
42 .attr("dy", ".35em")
|
|
|
43 .text(function(d) { return d; });
|
|
|
44 </script>
|
|
|
45 </body>
|
|
|
46 </html>
|
