Blocks Graph VI

this iteration centers the network on the page for more pleasant full-screen viewing. it also converts the code to ES2015 in the Airbnb style

a fork of alexmacy‘s Blocks Graph - w/thumbnails

Original README.md

This is an attempt to add thumbnail images to Mike Bostock](twitter.com/mbostock)’s version of Micah Stubbs‘ block. The tooltip also utilizes some code from the tooltip on Daniel Overstreet‘s Beijing Air Quality 3.

Hovering over a node loads that block’s thumbnail in a tooltip. There are a couple issues that need fixing:

• Need to add a placeholder of sorts for blocks that don’t have a thumbnail.

forked from mbostock‘s block: Blocks Graph

I added some CSS in the head for the tooltip and then defined the tooltip @ line 36:

var tooltip = d3.select("body")
    .append("div")
      .attr("class", "tooltip")
      .style("position", "absolute")
      .style("z-index", "10")
      .style("visibility", "hidden");

Also made a function for fetching and displaying the image @ line 126:

function loadTooltipThumb(d) {
    tooltip.select('*').remove();

    var thumbnailURL = 'https://bl.ocks.org/' + (d.user ? d.user + "/" : "") + 'raw/' + d.id + '/thumbnail.png';

    var top = d3.event.pageY - 150;

    tooltip.style("top", top + "px")
        .style("left", d3.event.pageX + 40 + "px")
        .style("visibility", "visible")
        .append('img')
        .attr('src', thumbnailURL)
}

…which gets called in the ‘mousemoved’ event @ line 98

There’s also something in the logic at line 93 and shrunk the searchRadius @ line 26 to hide the tooltip when not hovering over a node.