Mercurial > hg > numerics

<!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 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) { return d; });
  </script>
</body>
</html>
author	Jeff Hammel <k0scist@gmail.com>
date	Mon, 30 Mar 2015 10:35:59 -0700
parents
children	2a124febcd49