d3 sample 'sparkline'

by jwstott

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.chart rect {
    stroke: white;
    fill: salmon;
}

JavaScript

var t = 1297110663, // start time (seconds since epoch)
      v = 70, // startalue (subscribers)
      data = d3.range(30).map(next); // starting dataset

  function next() {
      return {
          time: ++t,
          value: v = ~~Math.max(2, Math.min(90, v + 30 * (Math.random() - .5)))
      };
  }

  setInterval(function () {
      //data.shift();
      //data.push(next());
      redraw2(next());
  }, 1500);

  var w = 20,
      h = 80;

  var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);

  var y = d3.scale.linear()
      .domain([0, 100])
      .rangeRound([0, h]);

  var chart = d3.select("body").append("svg")
      .attr("class", "chart")
      .attr("width", w * data.length -1)
      .attr("height", h);

  chart.selectAll("rect")
      .data(data)
      .enter().append("rect")
      .attr("x", function (d, i) {
      return x(i) ;
  })
      .attr("y", function (d) {
      return h - y(d.value) - .5;
  })
      .attr("width", w)
      .attr("height", function (d) {
      return y(d.value);
  });
/*
  chart.append("line")
      .attr("x1", 0)
      .attr("x2", w * data.length)
      .attr("y1", h - .5)
      .attr("y2", h - .5)
      .style("stroke", "#000");
*/
  function redraw2(data) {
      chart.select("rect:nth-of-type(1)")
          .data([data])
          .transition()
          .duration(600)
          .attr("y", function (d) {
          return h - y(d.value);
      })
          .attr("height", function (d) {
          return y(d.value);
      });
  }

  function redraw() {

      // Update…
      chart.selectAll("rect")
          .data(data)
          .transition()
          .duration(1000)
          .attr("y", function (d) {
          return h - y(d.value);
      })
          .attr("height", function (d) {
          return y(d.value);
      });

  }