Force Layout (with display threshold)

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<form>
    
<h3>Threshold<br/> 0 <input type="range" id="thersholdSlider" name="points" value = 0 min="0" max="100"> 100 </h3> 
</form>
<script type="application/json" id="mis">
    {
        "nodes": [{
            "name": "A",
            "group": 0,
            "value": 100
        }, {
            "name": "B",
            "group": 0,
            "value": 25
        }, {
            "name": "C",
            "group": 0,
            "value": 35
        }, {
            "name": "D",
            "group": 0,
            "value": 45
        }, {
            "name": "E",
            "group": 0,
            "value": 30
        }, {
            "name": "F",
            "group": 0,
            "value": 75
        }, {
            "name": "G",
            "group": 0,
            "value": 20
        }, {
            "name": "H",
            "group": 0,
            "value": 10
        }, {
            "name": "I",
            "group": 0,
            "value": 37
        }],
            "links": [{
            "source": 1,
            "target": 0,
            "value": 25
        }, {
            "source": 2,
            "target": 0,
            "value": 35
        }, {
            "source": 3,
            "target": 0,
            "value": 45
        }, {
            "source": 4,
            "target": 0,
            "value": 30
        }, {
            "source": 5,
            "target": 0,
            "value": 75
        }, {
            "source": 6,
            "target": 0,
            "value": 20
        }, {
            "source": 7,
            "target": 0,
            "value": 10
        }, {
            "source": 8,
            "target": 0,
            "value": 37
    ...

CSS

<style> html {
    text-align:center;
    margin:0px;
    padding:0px;
}
body {
    margin:0px;
}
#wrapper2 {
    display:inline;
}
padding:0px 100px 0px 100px;

}
.header {
    width:100%;
    text-align:center;
}
svg {
    border:solid #999 2px;
}
a:link, a:visited, a:hover, a:active {
    color:#C93C39;
}
.d3-tip {
    line-height: 1;
    color: black;
    font-family:'Copperplate Gothic Light';
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 20px;
}
.node {
    stroke: #fff;
    stroke-width: 1.5px;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
}
.ui-widget {
    float:left;
    display:inline;
    border:solid black 2px;
}
.wrapper {
    border:solid black 2px;
}
h3 {
    color: #1ABC9C;
    text-align:center;
    font-style: italic;
    font-size: 14px;
    font-family:"Helvetica";
}
.BelowThresh {
    display:none;
}
</style>

JavaScript

//Constants for the SVG
var width = 800,
    height = 500,
    radius = 6;

//Set up the colour scale
var color = d3.scale.category20();

//Set up the force layout
var force = d3.layout.force()
    .charge(-40)
    .gravity(0.05)
    .size([width, height])
    .linkDistance(100);

//Set up tooltip
var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) {
    return d.name + "</span>";
})

//Append a SVG to the body of the html page. Assign this SVG as an object to svg
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("dblclick", threshold);

svg.call(tip);

//Read the data from the mis element
var mis = document.getElementById('mis').innerHTML;
graph = JSON.parse(mis);
graphRec = JSON.parse(JSON.stringify(graph)); //Add this line

//Creates the graph data structure out of the json data
force.nodes(graph.nodes)
    .nodes(graph.nodes)
    .links(graph.links)
    .on("tick", tick)
    .start();

function tick() {
    node.attr("cx", function (d) {
        return d.x = Math.max(radius, Math.min(width - radius, d.x));
    })
        .attr("cy", function (d) {
        return d.y = Math.max(radius, Math.min(height - radius, d.y));
    });

    link.attr("x1", function (d) {
        return d.source.x;
    })
        .attr("y1", function (d) {
        return d.source.y;
    })
        .attr("x2", function (d) {
        return d.target.x;
    })
        .attr("y2", function (d) {
        return d.target.y;
    });
}

function linkArc(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);

    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

//Create all the line svgs but without locations yet
var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", 1);

//Do the same with...