How can I color ocean with topojson in d3 when I have coordinate info for land?

Question

I am learning topojson with d3. I have coordinate information for land, which is rendered correctly. Then, how can I add color to ocean (basically outside land)? I tried coloring graticule, but doesn't fill up the entire map and leaves empty spots.

The visualization is hosted on http://jbk1109.github.io/

var projection = d3.geo.stereographic()
    .scale(245)
    .translate([width / 2, height / 2])
    .rotate([-20, 0])
    .clipAngle(180 - 1e-4)
    .clipExtent([[0, 0], [width, height]])
    .precision(.1);

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

var g = svg.append("g")

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path)
    .style("fill","none")
    .style("stroke","#777")
    .style("stroke-width",0.2)

var land = svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path)
      .style("fill",'#cbcbcb')
      .style("opacity",0.8)

Answer 1

There's no need (and it would be pretty difficult and somewhat expensive computationally) to figure out the inverse of the landmass. But you can just color the background.

I.e you can use CSS:

svg {
  background: lightBlue;
}

or you can prepend a <rect> element with a blue fill behind the map:

svg.append('rect')
  .attr('width', mapWidth)
  .attr('height', mapHeight)
  .attr('fill', 'lightBlue')