Basic filled 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">

// Simplified version of calculating contours based on triangular mesh between each set of 4 points.
// Contour segments are "unconnected" but collectively fill up the contour map
// Futher development might include connecting points to collapse lines and shapes
// Idea based on CONREC by Paul Bourke https://paulbourke.net/papers/conrec/

for(var x=0;x<data.length-1;x++) {
        for (var y=0;y<data[0].length-1;y++) {
            var middle = (data[x][y]+data[x+1][y]+data[x][y+1]+data[x+1][y+1])/4,
                a=[x,y,data[x][y]],
                b=[x+1,y,data[x+1][y]],
                c=[x+0.5,y+0.5,middle],
                d=[x,y+1,data[x][y+1]],
                e=[x+1,y+1,data[x+1][y+1]]
                
            checkTriangle(levels,0,[a,b,c])
            checkTriangle(levels,0,[a,c,d])
            checkTriangle(levels,0,[d,c,e])
            checkTriangle(levels,0,[b,c,e])
        }
    }   
   return {area:contour_areas,lines:contour_lines}
}

// Lets take it for a spin

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

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

zs = d3.range(-5, 3, .5)
data=contour(data,zs)
colors = d3.scale.linear().domain([-5, 3]).range(["#fff", "red"]);
areas=svg.append("svg:g").selectAll("g")
    .data(data.area)
    .enter()
    .append("svg:g")
    .style("fill",function(d,i) { return colors(zs[i])})
	.style("stroke",function(d,i) { return colors(zs[i])})
	.style("opacity",0.5)
        .selectAll("polygon")
        .data(function(d) { return d;})
        .enter()
            .append("svg:polygon")
            .attr("points",function(d) {
                var txt=""
                d.forEach(function(e) { ;txt+=x(e[0])+","+y(e[1])+" "})
                return txt
            })
        
lines=svg.append("svg:g").selectAll("g")
	.data(data.lines)
	.enter()
	.append("svg:g")
	.selectAll("g").data(function(d) { return d;})
	.enter()
	.append("svg:path")
            .style("fill","black")
            .style("stroke","black")                            
    .attr("d",d3.svg.line()
            .x(function(d) { return x(d[0])})
            .y(function(d) { return y(d[1])})
            )

</SCRIPT>
</html>

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

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