Basic contours in D3

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="multiplot.js"></script>
</head>
<body></body>
    
<script type="text/javascript">

Array.prototype.unique = function() {
    var o = {}, i, l = this.length, r = [];
    for(i=0; i<l;i+=1) o[this[i]] = this[i];
    for(i in o) r.push(o[i]);
    return r;
};

// Simplified version of calculating contours based on triangular mesh between each set of 4 points.
// Contour segments are "unconnected" and therefore not suitable for filling (yet)
// Based on CONREC by Paul Bourke https://paulbourke.net/papers/conrec/

// Lets take it for a spin

xs = d3.range(0, data[0].length),
ys = d3.range(0, data.length),
w = 500, h = 500;
x=d3.scale.linear().range([0,w]).domain([0,data[0].length]),
yy=d3.scale.linear().range([0,h]).domain([0,data.length]),

svg=d3.select("body").append("svg:svg")
    .attr("width",w)
    .attr("height",h)

var current=-0,step=0.1;
setInterval(plotContour,50)

function plotContour() {
    if (current > 1) {step = -0.1} 
    if (current <-3.5) {step = 0.1};
    current +=step
    svg.selectAll("path").remove()
    path = svg.selectAll("path").data(contour(data,current))
    
    path.exit().remove()
    path.enter()
        .append("svg:path")
            .style("fill","black")
            .style("stroke","black")                            
    path.attr("d",d3.svg.line()
            .x(function(d) { return x(d[0])})
            .y(function(d) { return yy(d[1])})
            )    
}
          
</SCRIPT>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js