index_v1.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.vector {
  fill-opacity: 0;
  fill-color: gray;
  stroke: black;
}
.tooltip {
  color: black;
  font-family: sans-serif;
  font-size: 80%;
  background-color: white;
  padding: .5em;
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 2px;
  opacity: 0.8;
  position: absolute;
  border-style: solid;
  border-width: 0.5px;
}

.ttname {
  font-weight: bold;
  display: block;
}
.ttinc {
  font-weight: normal;
  display: block;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.tile.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

// pre-projected topojson, no projection
var path = d3.geo.path()
    .projection(null);

// contains the tile number for a coordinate
var tileM3d = d3.geo.tile()
    .size([width, height]);

var initialScale = 256;
// zoom values for raster tiles of 256px
var zoomListener = d3.behavior.zoom()
    .scale(initialScale)
    .scaleExtent([256, 4096])
    .on("zoom", zoomHandler);

var body = d3.select("body");
var tooltip = body.append("div")
    .attr("class", "tooltip")
    .attr("id", "tooltip");

var svg = body.append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoomListener)
    .on("mousemove", mmHandler)
    .on("mouseout", mmHandler);

var vectorLayer = svg.append("g")
    .attr("class", "vector");
var rasterLayer = svg.append("g")
    .attr("class", "raster");

// call once to load raster images
zoomHandler();

d3.json("https://raw.githubusercontent.com/stefanborchardt/SFTrees/master/data/sfshtr.json", function(error, sfshtr) {
  if (error) throw error;
  var sftracts = topojson.feature(sfshtr, sfshtr.objects.__sftracts);
  vectorLayer.append("g")
    // transform on group to align vector with raster layer
    .attr("transform", "rotate(" + -1.2 + ")scale(" + .953 + ")translate(" + [-111, -40] + ")")
    .attr("id", "alignGroup")
    .selectAll("path")
    .data(sftracts.features) 
    .enter()
    .append("path")     
    .attr("d", path)
    .attr("data-tooltip-name", function(d) {
      return d.properties.NAME; 
      })
    .attr("data-tooltip-inc-est", function(d) {
      return d.properties.INC_EST;
      })
    .attr("id", function(d) {
        return "_" + d.id;
      })
    .style("fill-opacity", function(d) {
        return +d.properties.INC_EST/200000;
      });
});

var idDisplayed = null;

function mmHandler() {
  // vector layer is under raster layer, so find the path element and put data in tooltip
  var pos = d3.mouse(svg.node());
  var posrect = svg.node().createSVGRect();
  posrect.x = pos[0];
  posrect.y = pos[1];
  posrect.width = posrect.height = 1;
  var elems = svg.node().getIntersectionList(posrect, null);
  if (elems.length == 0 || elems[0].nodeName !== "path") {
    tooltip.style("visibility", "hidden");
    return;
  } 
  var pathElem = elems[0];
  if (idDisplayed == pathElem.id) {
    return;
  } 
  idDisplayed = pathElem.id;
  // glow 
  var op = pathElem.style.fillOpacity;
  d3.select(pathElem)
    .transition()
    .styleTween("fill", function() { return d3.interpolate("gray", "orange");
      })
    .transition()
    .styleTween("fill", function() { return d3.interpolate("orange", "gray");
      })
    .style("fill", null);

  var name = pathElem.attributes["data-tooltip-name"].value;
  var inc_est = pathElem.attributes["data-tooltip-inc-est"].value;
  tooltip
    .style({"visibility": "visible", "top": pos[1]-20+"px", "left": pos[0]+10+"px"})
    .selectAll("span")
    .remove();
  tooltip  
    .append("span").classed("ttname", true)
    .text(name)
    .append("span").classed("ttinc", true)
    .text("Median Household Income: $ " + (+inc_est).toLocaleString());
}

function zoomHandler() {

  var translate = zoomListener.translate(),
      scale = zoomListener.scale();

  vectorLayer
      // transform for zoom on vector layer, the alignment stays the same; adjust scaling
      .attr("transform", "translate(" + translate + ")scale(" + scale/initialScale + ")")
      .style("stroke-width", initialScale/scale);

  // get the tile numbers to display    
  var tiles = tileM3d
      .scale(scale)
      .translate(translate)
      ();
  var images = rasterLayer
      .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
      .selectAll("image")
      .data(tiles, function(d) { return d; });

  images.exit()
      .remove();

  images.enter()
      .append("image")
      // calculate my tile number from the d3 tile number
      .attr("xlink:href", function(d) { 
        var baseUrl = "https://storage.googleapis.com/sfutc_t_tls/";
        var x = d[0];
        var y = d[1];
        if (x < 0 || y < 0) {
          return baserUrl + "white.png";
        }
        var f = Math.pow(2, d[2]);
        if (f == 1 && (x > 3 || y > 3) 
          ||  f == 2 && (x > 7 || y > 6) 
          ||  f == 4 && (x > 14 || y > 12 || y == 0) 
          ||  f == 8 && (x > 29 || y > 24) 
          ||  f == 16 && (x > 57 || y > 49) ) {
         return baseUrl + "white.png";
        }
        var z = d[2] + 13;
        return baseUrl + z + "/" + (x+1308*f) + "/" + (y+3165*f) + ".png";
       })
      .attr("width", 1)
      .attr("height", 1)
      .attr("x", function(d) { return d[0]; })
      .attr("y", function(d) { return d[1]; });

}

d3.select(self.frameElement).style("height", height + "px");
</script>
</body>
</html>