Using turf.js and d3.js to make a colored bathymetric map from pond depth point data

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Turf Concave Hull</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>

var map = L.mapbox.map('map', 'faraday2.mg6daigm')
  .setView([42.9186,-72.6833], 16);

var points_layer = L.mapbox.featureLayer().loadURL('bathymetry.geojson');

var depthColor = d3.scale.linear()
  .domain([0,12])
  .range([ '#c2a5cf','#7b3294' ]);

points_layer.on('ready', function () {
  var resolution = 75;
  var breaks = [1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,10.5,11,11.5,12,12.5,13,13.5,14,14.5,15];
  var isolines = turf.isolines(points_layer.toGeoJSON(), 'DepthMeter', resolution, breaks);
  isolines.features.forEach(function (feature) {
    feature.properties["stroke"] = depthColor(feature.properties.DepthMeter);
    feature.properties["stroke-width"] = 1;
    feature.properties["stroke-opacity"] = 0.5;
  });

L.mapbox.featureLayer().setGeoJSON(isolines).addTo(map);
});
</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js