Plot vector points on a cropped raster image with d3.js

<!doctype html>
<meta charset="utf-8">
<body>
<style media="screen">
  body {
    margin: 0;
  }

.supermarket {
    fill: red;
    stroke: #c00;
  }
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="js-map map"></div>

var projection = d3.geo.mercator()
    .scale(1)
    .translate([0, 0])

var path = d3.geo.path()
    .projection(projection)

var map = el.append('svg')
    .attr('width', width)
    .attr('height', height)

map.append('image')
    .attr('xlink:href', 'raster.png')
    .attr('width', width)
    .attr('height', height)

d3.json('supermarkets.json', function(err, data) {
    var b = [projection(rasterBounds[0]), projection(rasterBounds[1])],
        s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
        t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2]

projection
      .scale(s)
      .translate(t)

map.selectAll('.supermarket')
      .data(data.features)
    .enter().append('circle')
      .attr('class', 'supermarket')
      .attr('r', 2)
      .each(function(d) {
        var lonlat = projection(d.geometry.coordinates);
        d3.select(this)
          .attr('cx', lonlat[0])
          .attr('cy', lonlat[1])
      })
  })
</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js