Mercurial > hg > numerics
view numerics/templates/bar.d3.html @ 155:2a124febcd49
prepping for labels
author | Jeff Hammel <k0scist@gmail.com> |
---|---|
date | Tue, 12 May 2015 16:04:05 -0700 |
parents | ce0e1e5efe77 |
children | 69940819bc8a |
line wrap: on
line source
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>{{title}}</title> <style> .svgchart rect { fill: steelblue; } .svgchart text { fill: white; font: 10px sans-serif; text-anchor: end; } </style> <script>{{d3}}</script> <script> </script> </head> <body> <h1>{{title}}</h1> <svg class="svgchart"></svg> <script> var data = {{data}}; var labels = {}; var width = 420, barHeight = 20; var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, width]); var chart = d3.select(".svgchart") .attr("width", width) .attr("height", barHeight * data.length); var bar = chart.selectAll("g") .data(data) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); bar.append("rect") .attr("width", x) .attr("height", barHeight - 1); bar.append("text") .attr("x", function(d) { return x(d) - 3; }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function(d) { var label = labels[String(d)]; if (label == undefined) { return d; } else { return label + " : " + d; } }); </script> </body> </html>