d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a follow-on graph to the Basic Directional Force Layout Diagram and the Directional Force Layout Diagram with Node Highlighting and builds on it by couring the nodes.

  
## force.csv

          
            source
            target
            value

            
              Harry
              Sally
              1.2

            
              Harry
              Mario
              1.3

            
              Sarah
              Alice
              0.2

            
              Eveie
              Alice
              0.5

            
              Peter
              Alice
              1.6

            
              Mario
              Alice
              0.4

            
              James
              Alice
              0.6

            
              Harry
              Carol
              0.7

            
              Harry
              Nicky
              0.8

            
              Bobby
              Frank
              0.8

            
              Alice
              Mario
              0.7

            
              Harry
              Lynne
              0.5

            
              Sarah
              James
              1.9

            
              Roger
              James
              1.1

            
              Maddy
              James
              0.3

            
              Sonny
              Roger
              0.5

            
              James
              Roger
              1.5

            
              Alice
              Peter
              1.1

            
              Johan
              Peter
              1.6

            
              Alice
              Eveie
              0.5

            
              Harry
              Eveie
              0.1

            
              Eveie
              Harry
              2.0

            
              Henry
              Mikey
              0.4

            
              Elric
              Mikey
              0.6

            
              James
              Sarah
              1.5

            
              Alice
              Sarah
              0.6

            
              James
              Maddy
              0.5

            
              Peter
              Johan
              0.7

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<style>

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

path.link.twofive {
  opacity: 0.25;
}

path.link.fivezero {
  opacity: 0.50;
}

path.link.sevenfive {
  opacity: 0.75;
}

path.link.onezerozero {
  opacity: 1.0;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
<script>

// get the data
d3.csv("force.csv", function(error, links) {

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
    link.source = nodes[link.source] ||
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] ||
        (nodes[link.target] = {name: link.target});
    link.value = +link.value;
});

var width = 960,
    height = 500,
    color = d3.scale.category20c();


var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(60)
    .charge(-300)
    .on("tick", tick)
    .start();

// Set the range
var  v = d3.scale.linear().range([0, 100]);

// Scale the range of the data
v.domain([0, d3.max(links, function(d) { return d.value; })]);

// asign a type per value to encode opacity
links.forEach(function(link) {
	if (v(link.value) <= 25) {
		link.type = "twofive";
	} else if (v(link.value) <= 50 && v(link.value) > 25) {
		link.type = "fivezero";
	} else if (v(link.value) <= 75 && v(link.value) > 50) {
		link.type = "sevenfive";
	} else if (v(link.value) <= 100 && v(link.value) > 75) {
		link.type = "onezerozero";
	}
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// build the arrow.
svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

// add the links and the arrows
var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);

// add the nodes
node.append("circle")
    .attr("r", 5)
    .style("fill", function(d) { return color(d.name); });


// add the text
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

// add the curvy lines
function tick() {
    path.attr("d", function(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;
    });

    node
        .attr("transform", function(d) {
		    return "translate(" + d.x + "," + d.y + ")"; });
}

// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6);
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 12)
        .style("stroke", "none")
        .style("fill", "black")
        .style("stroke", "none")
        .style("font", "10px sans-serif");
}

});

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
source	target	value
Harry	Sally	1.2
Harry	Mario	1.3
Sarah	Alice	0.2
Eveie	Alice	0.5
Peter	Alice	1.6
Mario	Alice	0.4
James	Alice	0.6
Harry	Carol	0.7
Harry	Nicky	0.8
Bobby	Frank	0.8
Alice	Mario	0.7
Harry	Lynne	0.5
Sarah	James	1.9
Roger	James	1.1
Maddy	James	0.3
Sonny	Roger	0.5
James	Roger	1.5
Alice	Peter	1.1
Johan	Peter	1.6
Alice	Eveie	0.5
Harry	Eveie	0.1
Eveie	Harry	2.0
Henry	Mikey	0.4
Elric	Mikey	0.6
James	Sarah	1.5
Alice	Sarah	0.6
James	Maddy	0.5
Peter	Johan	0.7
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<style>

	path.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	path.link.twofive {
	opacity: 0.25;
	}

	path.link.fivezero {
	opacity: 0.50;
	}

	path.link.sevenfive {
	opacity: 0.75;
	}

	path.link.onezerozero {
	opacity: 1.0;
	}

	circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	fill: #000;
	font: 10px sans-serif;
	pointer-events: none;
	}

	</style>
	<body>
	<script>

	// get the data
	d3.csv("force.csv", function(error, links) {

	var nodes = {};

	// Compute the distinct nodes from the links.
	links.forEach(function(link) {
	link.source = nodes[link.source] \|\|
	(nodes[link.source] = {name: link.source});
	link.target = nodes[link.target] \|\|
	(nodes[link.target] = {name: link.target});
	link.value = +link.value;
	});

	var width = 960,
	height = 500,
	color = d3.scale.category20c();


	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([width, height])
	.linkDistance(60)
	.charge(-300)
	.on("tick", tick)
	.start();

	// Set the range
	var v = d3.scale.linear().range([0, 100]);

	// Scale the range of the data
	v.domain([0, d3.max(links, function(d) { return d.value; })]);

	// asign a type per value to encode opacity
	links.forEach(function(link) {
	if (v(link.value) <= 25) {
	link.type = "twofive";
	} else if (v(link.value) <= 50 && v(link.value) > 25) {
	link.type = "fivezero";
	} else if (v(link.value) <= 75 && v(link.value) > 50) {
	link.type = "sevenfive";
	} else if (v(link.value) <= 100 && v(link.value) > 75) {
	link.type = "onezerozero";
	}
	});

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// build the arrow.
	svg.append("svg:defs").selectAll("marker")
	.data(["end"]) // Different link/path types can be defined here
	.enter().append("svg:marker") // This section adds in the arrows
	.attr("id", String)
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 15)
	.attr("refY", -1.5)
	.attr("markerWidth", 6)
	.attr("markerHeight", 6)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	// add the links and the arrows
	var path = svg.append("svg:g").selectAll("path")
	.data(force.links())
	.enter().append("svg:path")
	.attr("class", function(d) { return "link " + d.type; })
	.attr("marker-end", "url(#end)");

	// define the nodes
	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter().append("g")
	.attr("class", "node")
	.on("click", click)
	.on("dblclick", dblclick)
	.call(force.drag);

	// add the nodes
	node.append("circle")
	.attr("r", 5)
	.style("fill", function(d) { return color(d.name); });


	// add the text
	node.append("text")
	.attr("x", 12)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	// add the curvy lines
	function tick() {
	path.attr("d", function(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;
	});

	node
	.attr("transform", function(d) {
	return "translate(" + d.x + "," + d.y + ")"; });
	}

	// action to take on mouse click
	function click() {
	d3.select(this).select("text").transition()
	.duration(750)
	.attr("x", 22)
	.style("stroke", "lightsteelblue")
	.style("stroke-width", ".5px")
	.style("font", "20px sans-serif");
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 16);
	}

	// action to take on mouse double click
	function dblclick() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 6);
	d3.select(this).select("text").transition()
	.duration(750)
	.attr("x", 12)
	.style("stroke", "none")
	.style("fill", "black")
	.style("stroke", "none")
	.style("font", "10px sans-serif");
	}

	});

	</script>
	</body>
	</html>