diff --git a/v7_pickle_web_interface/flask/templates/_d3_js.html b/v7_pickle_web_interface/flask/templates/_d3_js.html
index b7aad101..ddd9ce86 100644
--- a/v7_pickle_web_interface/flask/templates/_d3_js.html
+++ b/v7_pickle_web_interface/flask/templates/_d3_js.html
@@ -165,7 +165,7 @@
     .force("link", d3.forceLink(label.links).distance(0).strength(2));
 
 var graphLayout = d3.forceSimulation(graph.nodes)
-    .force("charge", d3.forceManyBody().strength(-3000))
+    .force("charge", d3.forceManyBody().strength(-3000)) // strength of clustering; -1000 is very tight; -6000 is loose
     .force("center", d3.forceCenter(width / 2.5, height / 2)) // skew left since images are on the right of the node center
     .force("x", d3.forceX(width / 2).strength(1)) // increasing strength makes the oval tall and skinny
     .force("y", d3.forceY(height / 2).strength(1))
diff --git a/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v1_static-y.html b/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v1_static-y.html
new file mode 100644
index 00000000..2bc5fb02
--- /dev/null
+++ b/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v1_static-y.html
@@ -0,0 +1,499 @@
+
+<script src="{{ url_for('static', filename='d3.min.js') }}"></script>
+<!--
+<script src='https://d3js.org/d3.v5.min.js'></script>
+-->
+
+<!-- code below is based on  https://bl.ocks.org/mapio/53fed7d84cd1812d6a6639ed7aa83868
+     and is better than https://bl.ocks.org/mbostock/950642
+     because mapio's implementation features zoom and node coloring -->
+<!-- I would like to add node enhancement on mouse-over
+      http://bl.ocks.org/eesur/be2abfb3155a38be4de4 -->
+<script>
+
+var collisionStrength = 1; // for prevention of node overlap
+var border = 1;
+var bordercolor="black";
+var color = d3.scaleOrdinal(d3.schemeCategory10); // coloring of nodes
+
+d3.json("{{ url_for('static', filename=json_for_d3js) }}").then(function(graph) {
+
+var node_count = graph["nodes"].length;
+
+  // the following does not automatically resize as the window changes size
+  // see https://bl.ocks.org/rudedogg187/8c86bae1f1eb0ac4008c5f7ff5f172a6
+  // and https://bl.ocks.org/curran/3a68b0c81991e2e94b19
+  if (node_count <= 10) {
+    // https://github.com/allofphysicsgraph/proofofconcept/issues/163
+    console.log("inside if")
+    var width = 600;
+    var height = 350;
+  } else {
+    console.log("inside else")
+    var width = window.innerWidth*0.9;
+    var height = window.innerHeight*0.8;
+  }
+
+
+var label = {
+    "nodes": [],
+    "links": []
+};
+
+graph.nodes.forEach(function(d, i) {
+    label.nodes.push({node: d});
+    label.nodes.push({node: d});
+    label.links.push({
+        source: i * 2,
+        target: i * 2 + 1
+    });
+});
+
+// the following is from Vitaliy on Freelancer; written on 20200605
+// COLLISION DETECT AND FIX; intended to minimize overlap of images
+function rectCollide() {
+    var nodes, sizes, masses
+    var size = constant([0, 0])
+    var strength = 1
+    var iterations = 1
+
+    function force() {
+        var node, size, mass, xi, yi
+        var i = -1
+        while (++i < iterations) { iterate() }
+
+        function iterate() {
+            var j = -1
+            var tree = d3.quadtree(nodes, xCenter, yCenter).visitAfter(prepare)
+
+            while (++j < nodes.length) {
+                node = nodes[j]
+                size = sizes[j]
+                mass = masses[j]
+                xi = xCenter(node)
+                yi = yCenter(node)
+
+                tree.visit(apply)
+            }
+        }
+
+        function apply(quad, x0, y0, x1, y1) {
+            var data = quad.data
+            var xSize = (size[0] + quad.size[0]) / 2
+            var ySize = (size[1] + quad.size[1]) / 2
+            if (data) {
+                if (data.index <= node.index) { return }
+
+                var x = xi - xCenter(data)
+                var y = yi - yCenter(data)
+                var xd = Math.abs(x) - xSize
+                var yd = Math.abs(y) - ySize
+
+                if (xd < 0 && yd < 0) {
+                    var l = Math.sqrt(x * x + y * y)
+                    var m = masses[data.index] / (mass + masses[data.index])
+
+                    if (Math.abs(xd) < Math.abs(yd)) {
+                        node.vx -= (x *= xd / l * strength) * m
+                        data.vx += x * (1 - m)
+                    } else {
+                        node.vy -= (y *= yd / l * strength) * m
+                        data.vy += y * (1 - m)
+                    }
+                }
+            }
+
+            return x0 > xi + xSize || y0 > yi + ySize ||
+                x1 < xi - xSize || y1 < yi - ySize
+        }
+
+        function prepare(quad) {
+            if (quad.data) {
+                quad.size = sizes[quad.data.index]
+            } else {
+                quad.size = [0, 0]
+                var i = -1
+                while (++i < 4) {
+                    if (quad[i] && quad[i].size) {
+                        quad.size[0] = Math.max(quad.size[0], quad[i].size[0])
+                        quad.size[1] = Math.max(quad.size[1], quad[i].size[1])
+                    }
+                }
+            }
+        }
+    }
+
+    function xCenter(d) { return d.x + d.vx + sizes[d.index][0] / 2 }
+    function yCenter(d) { return d.y + d.vy + sizes[d.index][1] / 2 }
+
+    force.initialize = function (_) {
+        sizes = (nodes = _).map(size)
+        masses = sizes.map(function (d) { return d[0] * d[1] })
+    }
+
+    force.size = function (_) {
+        return (arguments.length
+            ? (size = typeof _ === 'function' ? _ : constant(_), force)
+            : size)
+    }
+
+    force.strength = function (_) {
+        return (arguments.length ? (strength = +_, force) : strength)
+    }
+
+    force.iterations = function (_) {
+        return (arguments.length ? (iterations = +_, force) : iterations)
+    }
+
+    return force
+}
+
+function constant(_) {
+    return function () { return _ }
+}
+
+
+var collisionForce = rectCollide()
+    .size(function (d) { return [d.width, d.height] })
+    .strength(collisionStrength)
+
+// end of code by Vitaliy
+
+
+var labelLayout = d3.forceSimulation(label.nodes)
+    .force("charge", d3.forceManyBody().strength(-50))
+    .force("link", d3.forceLink(label.links).distance(0).strength(2));
+
+var graphLayout = d3.forceSimulation(graph.nodes)
+    .force("charge", d3.forceManyBody().strength(-3000))
+    .force("center", d3.forceCenter(width / 2.5, height / 2)) // skew left since images are on the right of the node center
+    .force("x", d3.forceX(width / 2).strength(1)) // increasing strength makes the oval tall and skinny
+    .force("y", d3.forceY(height / 2).strength(1))
+    // https://github.com/d3/d3-force#simulation_alphaDecay
+    .alphaDecay(0.04) // added by BHP 20200526; default is 0.0228; 0.8 makes the graph cool too fast; 0.01 cools too slowly
+    .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
+    .force('collision', collisionForce)
+    .on("tick", ticked);
+
+var adjlist = [];
+
+graph.links.forEach(function(d) {
+    adjlist[d.source.index + "-" + d.target.index] = true;
+    adjlist[d.target.index + "-" + d.source.index] = true;
+});
+
+function neigh(a, b) {
+    return a == b || adjlist[a + "-" + b];
+}
+
+
+var svg = d3.select("#viz").attr("width", width).attr("height", height);
+// https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/
+//var svg = d3.select("div#container")
+//  .append("svg")
+//  .attr("preserveAspectRatio", "xMinYMin meet")
+//  .attr("viewBox", "0 0 300 300")
+//  .attr("border",border)
+//  .classed("svg-content", true);
+
+
+// http://bl.ocks.org/rkirsling/5001347
+// define arrow markers for graph links
+svg.append("svg:defs").append("svg:marker")
+    .attr("id", "end-arrow")
+    .attr("viewBox", "0 -5 5 10") // min-x, min-y, width, height; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
+    .attr("refX", 8) // x coordinate of an element's reference point; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refX
+    .attr("markerWidth", 20) // width of the viewport; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerWidth
+    .attr("markerHeight", 20)
+    .attr("orient", "auto")
+    .append("svg:path")
+    .attr("d", "M0,-3L6,0L0,3") // draw line starting at 0,-5; connect to 8,0, connect to 0,5
+    .attr("fill", "gray");
+
+// http://bl.ocks.org/AndrewStaroscik/5222370
+           	var borderPath = svg.append("rect")
+       			.attr("x", 0)
+       			.attr("y", 0)
+       			.attr("height", height)
+       			.attr("width", width)
+       			.style("stroke", bordercolor)
+       			.style("fill", "none")
+       			.style("stroke-width", border);
+
+var container = svg.append("g");
+
+svg.call(
+    d3.zoom()
+        .scaleExtent([.1, 4])
+        .on("zoom", function() { container.attr("transform", d3.event.transform); })
+);
+
+var link = container.append("g").attr("class", "links")
+    .selectAll("line")
+    .data(graph.links)
+    .enter()
+    .append("line")
+    .attr("stroke", "#aaa")
+    .attr("stroke-width", "2px")
+    .attr("marker-end","url(#end-arrow)");
+
+
+var node = container.append("g").attr("class", "nodes")
+            .selectAll("g")
+            .data(graph.nodes)
+            .enter() // https://www.d3indepth.com/enterexit/
+            // to hyperlink the node circle, uncomment the next three lines
+        //  .append("a")
+        //  .attr('href', function(d) { return d.url })
+        //  .attr('target', '_blank')
+            .append("circle")
+            .attr("r", 10)
+            .attr("fill", function(d) { return color(d.group); });
+
+node.on("mouseover", focus).on("mouseout", unfocus);
+
+node.call(
+    d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended)
+);
+// written by https://www.freelancer.com/u/Wawa27 for $20 on Freelancer
+var labelNode = container.append("g").attr("class", "labelNodes")
+    .selectAll("text")
+    .data(label.nodes)
+    .enter() // https://www.d3indepth.com/enterexit/
+    // the following three lines hyperlink the image
+    .append("a")
+    .attr('href', function(d, i) { return d.node.url })
+    .attr('target', '_blank')
+    .append("image")
+    // alternative option, unverified: https://stackoverflow.com/questions/39908583/d3-js-labeling-nodes-with-image-in-force-layout
+    // BHP does not know why the i%2 is needed; without it the graph gets two images per node
+    // see "label.links.push" above which uses this even/odd identifier
+    // switching between i%2==1 and i%2==0 produces different image locations (?)
+    .attr("xlink:href", function(d, i) { return i % 2 == 1 ? "" : d.node.img; } )
+    .attr("x", 4)
+    .attr("y", 0)
+    // the following alter the image size
+    .attr("width", function(d, i) { return d.node.width/2; })
+    .attr("height", function(d, i) { return d.node.height/2; });
+//    .append("text")
+//    .text(function(d, i) { return i % 2 == 0 ? "" : d.node.id; })
+//    .style("fill", "#555")
+//    .style("font-family", "Arial")
+//    .style("font-size", 12)
+//    .style("pointer-events", "none");
+
+
+// get nodes, images and links for top and bottom linear indices
+var minLinear = Infinity, maxLinear = 0;
+
+graph.nodes.forEach(function(d) {
+    if (d['linear index'] > 0) {
+        if (d['linear index'] < minLinear) {
+            minLinear = d['linear index'];
+        }
+        
+        if (d['linear index'] > maxLinear) {
+            maxLinear = d['linear index'];
+        }
+    }
+});
+
+var topNode = d3.selectAll('.nodes circle')
+    .filter(function(d) {
+        return d['linear index'] > 0 && d['linear index'] == minLinear;
+    });
+
+var bottNode = d3.selectAll('.nodes circle')
+    .filter(function(d) {
+        return d['linear index'] > 0 && d['linear index'] == maxLinear;
+    });
+
+var topId = topNode.data()[0].id;
+var bottId = bottNode.data()[0].id;
+
+var topLabel = d3.selectAll('.labelNodes image')
+    .filter(function(d) {
+        return d.node.id == topId;
+    });
+
+var bottLabel = d3.selectAll('.labelNodes image')
+    .filter(function(d) {
+        return d.node.id == bottId;
+    });
+
+var topSourceLink = d3.selectAll('.links line')
+    .filter(function(d) {
+        return d.source.id == topId;
+    });
+
+var topTargetLink = d3.selectAll('.links line')
+    .filter(function(d) {
+        return d.target.id == topId;
+    });
+
+var bottSourceLink = d3.selectAll('.links line')
+    .filter(function(d) {
+        return d.source.id == bottId;
+    });
+
+var bottTargetLink = d3.selectAll('.links line')
+    .filter(function(d) {
+        return d.target.id == bottId;
+    });
+
+var minY = Infinity, maxY = -Infinity;
+node.on("mouseover", focus).on("mouseout", unfocus);
+
+node.call(
+    d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended)
+);
+
+node.on("mouseover", focus).on("mouseout", unfocus);
+
+function ticked() {
+    minY = Infinity;
+    maxY = -Infinity;
+
+    node.call(updateNode);
+    link.call(updateLink);
+
+    // repositioning top and bottom nodes and links: start
+    topNode.fixed = true;
+    topNode.attr('transform', function(d) {
+        return 'translate(' + fixna(d.x) + ',' + (minY - 30) + ')'
+    });
+    bottNode.fixed = true;
+    bottNode.attr('transform', function(d) {
+        return 'translate(' + fixna(d.x) + ',' + (maxY + 30) + ')'
+    });
+
+    topSourceLink.attr("y1", function (d) { 
+        return (minY - 30); 
+    });
+
+    topTargetLink.attr("y2", function (d) { 
+        return (minY - 30); 
+    });
+
+    bottSourceLink.attr("y1", function (d) { 
+        return (maxY + 30); 
+    });
+
+    bottTargetLink.attr("y2", function (d) { 
+        return (maxY + 30); 
+    });
+    // repositioning top and bottom nodes and links: end
+    labelLayout.alphaTarget(0.3).restart();
+    labelNode.each(function(d, i) {
+        if(i % 2 == 0) {
+            d.x = d.node.x;
+            d.y = d.node.y;
+        } else {
+            var b = this.getBBox();
+
+            var diffX = d.x - d.node.x;
+            var diffY = d.y - d.node.y;
+
+            var dist = Math.sqrt(diffX * diffX + diffY * diffY);
+
+            var shiftX = b.width * (diffX - dist) / (dist * 2);
+            shiftX = Math.max(-b.width, Math.min(0, shiftX));
+            var shiftY = 16;
+            this.setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
+        }
+    });
+    labelNode.call(updateNode);
+
+    // repositioning top and bottom labels: start
+    topLabel.each(function(d) {
+        d.fixed = true;
+
+        if (this.getAttribute('transform')) {
+            var tx = +this.getAttribute('transform').split(/[(),]/)[1];
+            var ty = +this.getAttribute('transform').split(/[(),]/)[2];
+            this.setAttribute("transform", "translate(" + tx + "," + (ty - d.node.y + minY - 10) + ")");
+        }
+    });
+    bottLabel.each(function(d) {
+        d.fixed = true;
+
+        if (this.getAttribute('transform')) {
+            var tx = +this.getAttribute('transform').split(/[(),]/)[1];
+            var ty = +this.getAttribute('transform').split(/[(),]/)[2];
+            this.setAttribute("transform", "translate(" + tx + "," + (ty - d.node.y + maxY + 16) + ")");
+        }
+    });
+    // repositioning top and bottom labels: start
+}
+
+function fixna(x) {
+    if (isFinite(x)) return x;
+    return 0;
+}
+
+function focus(d) {
+    var index = d3.select(d3.event.target).datum().index;
+    node.style("opacity", function(o) {
+        return neigh(index, o.index) ? 1 : 0.1;
+    });
+    labelNode.attr("display", function(o) {
+      return neigh(index, o.node.index) ? "block": "none";
+    });
+    link.style("opacity", function(o) {
+        return o.source.index == index || o.target.index == index ? 1 : 0.1;
+    });
+}
+
+function unfocus() {
+   labelNode.attr("display", "block");
+   node.style("opacity", 1);
+   link.style("opacity", 1);
+}
+
+function updateLink(link) {
+    link.attr("x1", function(d) { return fixna(d.source.x); })
+        .attr("y1", function(d) { return fixna(d.source.y); })
+        .attr("x2", function(d) { return fixna(d.target.x); })
+        .attr("y2", function(d) { return fixna(d.target.y); });
+}
+
+function updateNode(node) {
+    node.attr("transform", function(d) {
+        if (fixna(d.y) < minY) {
+            minY = fixna(d.y);
+        }
+
+        if (fixna(d.y) > maxY) {
+            maxY = fixna(d.y);
+        }
+
+        return "translate(" + fixna(d.x) + "," + fixna(d.y) + ")";
+    });
+}
+
+function dragstarted(d) {
+    d3.event.sourceEvent.stopPropagation();
+    if (!d3.event.active) graphLayout.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+}
+
+function dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+}
+
+function dragended(d) {
+    if (!d3.event.active) graphLayout.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+}
+
+}); // d3.json
+</script>
diff --git a/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v2_varible-y.html b/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v2_varible-y.html
new file mode 100644
index 00000000..022d6bad
--- /dev/null
+++ b/v7_pickle_web_interface/flask/templates/_d3_js_pinned_v2_varible-y.html
@@ -0,0 +1,414 @@
+
+<script src="{{ url_for('static', filename='d3.min.js') }}"></script>
+<!--
+<script src='https://d3js.org/d3.v5.min.js'></script>
+-->
+
+<!-- code below is based on  https://bl.ocks.org/mapio/53fed7d84cd1812d6a6639ed7aa83868
+     and is better than https://bl.ocks.org/mbostock/950642
+     because mapio's implementation features zoom and node coloring -->
+<!-- I would like to add node enhancement on mouse-over
+      http://bl.ocks.org/eesur/be2abfb3155a38be4de4 -->
+<script>
+
+var collisionStrength = 1; // for prevention of node overlap
+var border = 1;
+var bordercolor="black";
+var color = d3.scaleOrdinal(d3.schemeCategory10); // coloring of nodes
+
+d3.json("{{ url_for('static', filename=json_for_d3js) }}").then(function(graph) {
+
+var node_count = graph["nodes"].length;
+
+  // the following does not automatically resize as the window changes size
+  // see https://bl.ocks.org/rudedogg187/8c86bae1f1eb0ac4008c5f7ff5f172a6
+  // and https://bl.ocks.org/curran/3a68b0c81991e2e94b19
+  if (node_count <= 10) {
+    // https://github.com/allofphysicsgraph/proofofconcept/issues/163
+    console.log("inside if")
+    var width = 600;
+    var height = 350;
+  } else {
+    console.log("inside else")
+    var width = window.innerWidth*0.9;
+    var height = window.innerHeight*0.8;
+  }
+
+
+var label = {
+    "nodes": [],
+    "links": []
+};
+
+graph.nodes.forEach(function(d, i) {
+    label.nodes.push({node: d});
+    label.nodes.push({node: d});
+    label.links.push({
+        source: i * 2,
+        target: i * 2 + 1
+    });
+});
+
+// the following is from Vitaliy on Freelancer; written on 20200605
+// COLLISION DETECT AND FIX; intended to minimize overlap of images
+function rectCollide() {
+    var nodes, sizes, masses
+    var size = constant([0, 0])
+    var strength = 1
+    var iterations = 1
+
+    function force() {
+        var node, size, mass, xi, yi
+        var i = -1
+        while (++i < iterations) { iterate() }
+
+        function iterate() {
+            var j = -1
+            var tree = d3.quadtree(nodes, xCenter, yCenter).visitAfter(prepare)
+
+            while (++j < nodes.length) {
+                node = nodes[j]
+                size = sizes[j]
+                mass = masses[j]
+                xi = xCenter(node)
+                yi = yCenter(node)
+
+                tree.visit(apply)
+            }
+        }
+
+        function apply(quad, x0, y0, x1, y1) {
+            var data = quad.data
+            var xSize = (size[0] + quad.size[0]) / 2
+            var ySize = (size[1] + quad.size[1]) / 2
+            if (data) {
+                if (data.index <= node.index) { return }
+
+                var x = xi - xCenter(data)
+                var y = yi - yCenter(data)
+                var xd = Math.abs(x) - xSize
+                var yd = Math.abs(y) - ySize
+
+                if (xd < 0 && yd < 0) {
+                    var l = Math.sqrt(x * x + y * y)
+                    var m = masses[data.index] / (mass + masses[data.index])
+
+                    if (Math.abs(xd) < Math.abs(yd)) {
+                        node.vx -= (x *= xd / l * strength) * m
+                        data.vx += x * (1 - m)
+                    } else {
+                        node.vy -= (y *= yd / l * strength) * m
+                        data.vy += y * (1 - m)
+                    }
+                }
+            }
+
+            return x0 > xi + xSize || y0 > yi + ySize ||
+                x1 < xi - xSize || y1 < yi - ySize
+        }
+
+        function prepare(quad) {
+            if (quad.data) {
+                quad.size = sizes[quad.data.index]
+            } else {
+                quad.size = [0, 0]
+                var i = -1
+                while (++i < 4) {
+                    if (quad[i] && quad[i].size) {
+                        quad.size[0] = Math.max(quad.size[0], quad[i].size[0])
+                        quad.size[1] = Math.max(quad.size[1], quad[i].size[1])
+                    }
+                }
+            }
+        }
+    }
+
+    function xCenter(d) { return d.x + d.vx + sizes[d.index][0] / 2 }
+    function yCenter(d) { return d.y + d.vy + sizes[d.index][1] / 2 }
+
+    force.initialize = function (_) {
+        sizes = (nodes = _).map(size)
+        masses = sizes.map(function (d) { return d[0] * d[1] })
+    }
+
+    force.size = function (_) {
+        return (arguments.length
+            ? (size = typeof _ === 'function' ? _ : constant(_), force)
+            : size)
+    }
+
+    force.strength = function (_) {
+        return (arguments.length ? (strength = +_, force) : strength)
+    }
+
+    force.iterations = function (_) {
+        return (arguments.length ? (iterations = +_, force) : iterations)
+    }
+
+    return force
+}
+
+function constant(_) {
+    return function () { return _ }
+}
+
+
+var collisionForce = rectCollide()
+    .size(function (d) { return [d.width, d.height] })
+    .strength(collisionStrength)
+
+// end of code by Vitaliy
+
+
+var labelLayout = d3.forceSimulation(label.nodes)
+    .force("charge", d3.forceManyBody().strength(-50))
+    .force("link", d3.forceLink(label.links).distance(0).strength(2));
+
+var graphLayout = d3.forceSimulation(graph.nodes)
+    .force("charge", d3.forceManyBody().strength(-3000))
+    .force("center", d3.forceCenter(width / 2.5, height / 2)) // skew left since images are on the right of the node center
+    .force("x", d3.forceX(width / 2).strength(1)) // increasing strength makes the oval tall and skinny
+    .force("y", d3.forceY(height / 2).strength(1))
+    // https://github.com/d3/d3-force#simulation_alphaDecay
+    .alphaDecay(0.04) // added by BHP 20200526; default is 0.0228; 0.8 makes the graph cool too fast; 0.01 cools too slowly
+    .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
+    .force('collision', collisionForce)
+    .on("tick", ticked);
+
+var adjlist = [];
+
+graph.links.forEach(function(d) {
+    adjlist[d.source.index + "-" + d.target.index] = true;
+    adjlist[d.target.index + "-" + d.source.index] = true;
+});
+
+function neigh(a, b) {
+    return a == b || adjlist[a + "-" + b];
+}
+
+
+var svg = d3.select("#viz").attr("width", width).attr("height", height);
+// https://chartio.com/resources/tutorials/how-to-resize-an-svg-when-the-window-is-resized-in-d3-js/
+//var svg = d3.select("div#container")
+//  .append("svg")
+//  .attr("preserveAspectRatio", "xMinYMin meet")
+//  .attr("viewBox", "0 0 300 300")
+//  .attr("border",border)
+//  .classed("svg-content", true);
+
+
+// http://bl.ocks.org/rkirsling/5001347
+// define arrow markers for graph links
+svg.append("svg:defs").append("svg:marker")
+    .attr("id", "end-arrow")
+    .attr("viewBox", "0 -5 5 10") // min-x, min-y, width, height; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
+    .attr("refX", 8) // x coordinate of an element's reference point; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/refX
+    .attr("markerWidth", 20) // width of the viewport; https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/markerWidth
+    .attr("markerHeight", 20)
+    .attr("orient", "auto")
+    .append("svg:path")
+    .attr("d", "M0,-3L6,0L0,3") // draw line starting at 0,-5; connect to 8,0, connect to 0,5
+    .attr("fill", "gray");
+
+// http://bl.ocks.org/AndrewStaroscik/5222370
+           	var borderPath = svg.append("rect")
+       			.attr("x", 0)
+       			.attr("y", 0)
+       			.attr("height", height)
+       			.attr("width", width)
+       			.style("stroke", bordercolor)
+       			.style("fill", "none")
+       			.style("stroke-width", border);
+
+var container = svg.append("g");
+
+svg.call(
+    d3.zoom()
+        .scaleExtent([.1, 4])
+        .on("zoom", function() { container.attr("transform", d3.event.transform); })
+);
+
+var link = container.append("g").attr("class", "links")
+    .selectAll("line")
+    .data(graph.links)
+    .enter()
+    .append("line")
+    .attr("stroke", "#aaa")
+    .attr("stroke-width", "2px")
+    .attr("marker-end","url(#end-arrow)");
+
+
+var node = container.append("g").attr("class", "nodes")
+            .selectAll("g")
+            .data(graph.nodes)
+            .enter() // https://www.d3indepth.com/enterexit/
+            // to hyperlink the node circle, uncomment the next three lines
+        //  .append("a")
+        //  .attr('href', function(d) { return d.url })
+        //  .attr('target', '_blank')
+            .append("circle")
+            .attr("r", 10)
+            .attr("fill", function(d) { return color(d.group); });
+
+
+
+node.call(
+    d3.drag()
+        .on("start", dragstarted)
+        .on("drag", dragged)
+        .on("end", dragended)
+);
+// written by https://www.freelancer.com/u/Wawa27 for $20 on Freelancer
+var labelNode = container.append("g").attr("class", "labelNodes")
+    .selectAll("text")
+    .data(label.nodes)
+    .enter() // https://www.d3indepth.com/enterexit/
+    // the following three lines hyperlink the image
+    .append("a")
+    .attr('href', function(d, i) { return d.node.url })
+    .attr('target', '_blank')
+    .append("image")
+    // alternative option, unverified: https://stackoverflow.com/questions/39908583/d3-js-labeling-nodes-with-image-in-force-layout
+    // BHP does not know why the i%2 is needed; without it the graph gets two images per node
+    // see "label.links.push" above which uses this even/odd identifier
+    // switching between i%2==1 and i%2==0 produces different image locations (?)
+    .attr("xlink:href", function(d, i) { return i % 2 == 1 ? "" : d.node.img; } )
+    .attr("x", 4)
+    .attr("y", 0)
+    // the following alter the image size
+    .attr("width", function(d, i) { return d.node.width/2; })
+    .attr("height", function(d, i) { return d.node.height/2; });
+//    .append("text")
+//    .text(function(d, i) { return i % 2 == 0 ? "" : d.node.id; })
+//    .style("fill", "#555")
+//    .style("font-family", "Arial")
+//    .style("font-size", 12)
+//    .style("pointer-events", "none");
+
+
+
+node.on("mouseover", focus).on("mouseout", unfocus);
+
+// get nodes, images and links for top and bottom linear indices
+var topIndex = 0, bottIndex = 0;
+
+graph.nodes.forEach(function(d, i) {
+    if (d['linear index'] > 0) {
+        if (d['linear index'] < graph.nodes[topIndex]['linear index']) {
+            topIndex = i;
+        }
+        if (d['linear index'] > graph.nodes[bottIndex]['linear index']) {
+            bottIndex = i;
+        }
+    }
+});
+
+var isDragging = false;
+
+node.on("mouseover", focus).on("mouseout", unfocus);
+
+function ticked() {
+    if (!isDragging) {
+        var minY = Infinity, maxY = -Infinity;
+
+        graph.nodes.forEach(function(d, i) {
+            if (i !== topIndex && d.y < minY) {
+                minY = d.y;
+            }
+        
+            if (i !== bottIndex && d.y > maxY) {
+                maxY = d.y;
+            }
+        });
+        minY -= 30;
+        maxY += 30;
+        if(graph.nodes[topIndex].y !== minY) {
+            graph.nodes[topIndex].y = minY;
+        }
+        if(graph.nodes[bottIndex].y !== maxY) {
+            graph.nodes[bottIndex].y = maxY;
+        }
+    }
+    node.call(updateNode);
+    link.call(updateLink);
+
+    labelLayout.alphaTarget(0.3).restart();
+    labelNode.each(function(d, i) {
+        if(i % 2 == 0) {
+            d.x = d.node.x;
+            d.y = d.node.y;
+        } else {
+            var b = this.getBBox();
+
+            var diffX = d.x - d.node.x;
+            var diffY = d.y - d.node.y;
+
+            var dist = Math.sqrt(diffX * diffX + diffY * diffY);
+
+            var shiftX = b.width * (diffX - dist) / (dist * 2);
+            shiftX = Math.max(-b.width, Math.min(0, shiftX));
+            var shiftY = 16;
+            this.setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
+        }
+    });
+    labelNode.call(updateNode);
+
+}
+
+function fixna(x) {
+    if (isFinite(x)) return x;
+    return 0;
+}
+
+function focus(d) {
+    var index = d3.select(d3.event.target).datum().index;
+    node.style("opacity", function(o) {
+        return neigh(index, o.index) ? 1 : 0.1;
+    });
+    labelNode.attr("display", function(o) {
+      return neigh(index, o.node.index) ? "block": "none";
+    });
+    link.style("opacity", function(o) {
+        return o.source.index == index || o.target.index == index ? 1 : 0.1;
+    });
+}
+
+function unfocus() {
+   labelNode.attr("display", "block");
+   node.style("opacity", 1);
+   link.style("opacity", 1);
+}
+
+function updateLink(link) {
+    link.attr("x1", function(d) { return fixna(d.source.x); })
+        .attr("y1", function(d) { return fixna(d.source.y); })
+        .attr("x2", function(d) { return fixna(d.target.x); })
+        .attr("y2", function(d) { return fixna(d.target.y); });
+}
+
+function updateNode(node) {
+    node.attr("transform", function(d) {
+        return "translate(" + fixna(d.x) + "," + fixna(d.y) + ")";
+    });
+}
+
+function dragstarted(d) {
+    d3.event.sourceEvent.stopPropagation();
+    if (!d3.event.active) graphLayout.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+}
+
+function dragged(d) {
+    d.fx = d3.event.x;
+    d.fy = d3.event.y;
+}
+
+function dragended(d) {
+    if (!d3.event.active) graphLayout.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+}
+
+}); // d3.json
+</script>