d3noob · January 22, 2024 12:29
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/force.csv b/force.csv
diff --git a/index.html b/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;

 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);

 // 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("fill", "steelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16)
        .style("fill", "lightsteelblue");
 }

 // action to take on mouse double click
 function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6)
        .style("fill", "#ccc");
    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>
diff --git a/thumbnail.png b/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;

	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);

	// 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("fill", "steelblue")
	.style("stroke", "lightsteelblue")
	.style("stroke-width", ".5px")
	.style("font", "20px sans-serif");
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 16)
	.style("fill", "lightsteelblue");
	}

	// action to take on mouse double click
	function dblclick() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 6)
	.style("fill", "#ccc");
	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>