D3 Electrocardiogram (ECG)

An example of using D3 to create a electrocardiogram/heart rate style graph, that sweeps left to right. It maintains the old graph, which is wiped as the new graph is drawn. The graph uses random data rather than proper looking heart electrical signal style for simplicity.

HTML

<body>

</body>

CSS

body {
    font: 12px Arial;
}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path, .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

JavaScript

var margin = {
      top: 30,
      right: 20,
      bottom: 30,
      left: 50
    };
    var xIndex = 0;
    var width = 600 - margin.left - margin.right;
    var height = 270 - margin.top - margin.bottom;
    var data = [];
    var x = d3.scale.linear().domain([0, 200]).range([0, width]);
    var y = d3.scale.linear().domain([0, 100]).range([height, 0]);
    var count = 0;
    var lineToDraw;

    var xAxis = d3.svg.axis().scale(x)
      .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y)
      .orient("left").ticks(5);

    var valueline = d3.svg.line()
      .x(function(d) {
        return x(d.x);
      })
      .y(function(d) {
        return y(d.y);
      });

    var svg = d3.select("body")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Render two slip paths. One will be drawn as the other is wiped. To create the wipe effect, I simply reduce the size of the clip path and translate it.
    var clipPath1 = svg.append("defs")
      .append("clipPath")
      .attr("id", "clip1");

    var clipPath2 = svg.append("defs")
      .append("clipPath")
      .attr("id", "clip2");

    var clipRect1 = clipPath1.append("rect")
      .attr("x", 0)
      .attr("width", 0)
      .attr("height", height);

    var clipRect2 = clipPath2.append("rect")
      .attr("x", 0)
      .attr("width", 0)
      .attr("height", height);

    // Append two paths. One path will be used to draw on while the other will be the previously drawn path.
    var path1 = svg.append("g")
      .attr("id", "g1")
      .append("path") // Add the valueline path.
      .attr("class", "line1")
      .attr("clip-path", "url(#clip1)")
      .data([data])
      .attr("d", valueline);

    var path2 = svg.append("g")
      .attr("id", "g2")
      .append("path")
      .attr("clip-path",...