Function renderHistogram

modules/toc/toc.js:108–152

()

  }

  function renderHistogram() {
    var histogram = module.sel.selectAll("div.histogram").data([stats.histogram]);
    histogram.enter().append("div.histogram")
      .on("mousemove", function() {
        var mouseOffset = pixelsToPercentage(window.innerHeight)/100*this.offsetHeight / 2;
        stats.windows.hover = pixelsToPercentage.invert(100 * (d3.mouse(this)[1] - mouseOffset) / this.offsetHeight);
        renderWindows();
      })
      .on("mouseout", function() {
        stats.windows.hover = null;
        renderWindows();
      })
      .on("click", function() {
        stats.windows.previous = stats.windows.current;
        var mouseOffset = pixelsToPercentage(window.innerHeight)/100*this.offsetHeight / 2;
        var target = pixelsToPercentage.invert(100 * (d3.mouse(this)[1] - mouseOffset) / this.offsetHeight);
        d3.select("body").transition().duration(500)
            .tween("smoothscroll", scrollTopTween(target));
      });

    var windows = histogram.selectAll("div.window")
        .data(Object.keys(stats.windows));
    
    windows.enter()
        .append("div.window")
        .style("height", pixelsToPercentage(window.innerHeight)+"%")
        .attr("data-window", _.identity);
    renderWindows();
    
    var bars = histogram.selectAll("div.bar")
        .data(stats.histogram);
    
    bars.enter()
        .append("div.bar")
        .style("height", function(d) { return pixelsToPercentage(d.dx) + "%"; })
        .style("top", function(d) { return pixelsToPercentage(d.x) + "%"; })
        .on("click", function(d) { 
          d3.select("body").transition().duration(500)
            .tween("smoothscroll", scrollTopTween(d.x));
        });

    bars
      .style("opacity", function(d) { return Math.min(d.y/15, 1); });

  }

  function renderWindows() {
    stats.windows.current = document.getElementsByTagName('body')[0].scrollTop;