mildronize/d3-force-graph.html

## d3-force-graph.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js" > </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
body {
  overflow:hidden;
   margin:0;
}
    .links line {
    stroke: #999;
    stroke-opacity: 0.6;
    }

    .nodes circle {
    stroke: black;
    stroke-width: 2.5px;
    }

    text {
    font-family: sans-serif;
    font-size: 15px;
    }

    .node.fixed {
  fill: #f00;
}


    .svg-container {
    border: 1px solid #000;
    display: inline-block;
}

    </style>


</head>
<body>
    <div id="container" class="svg-container">
        <svg width="1500" height="900" border="1"></svg>
    </div>

    <script>


// original =>>> https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8
// ref: https://observablehq.com/@d3/bar-chart

// https://www.youtube.com/watch?v=HnFwl-8aTmQ
// http://blog.pamelafox.org/2013/06/exporting-google-spreadsheet-as-json.html

var LEVEL_SIZE = [50,30,10,5];
var LEVEL_DISTANCE = [150,100,50,50];

var graph = {
  "nodes": [
  {"id": "DM", "group": 0, "level":0},
    {"id": "PLO1", "group": 1, "level":1},
    {"id": "PLO2", "group": 2, "level":1},

    {"id": "Module1", "group": 1, "level":2},
    {"id": "Module2", "group": 2, "level":2},
    {"id": "Module3", "group": 2, "level":2},

    {"id": "Programming", "group": 1, "level":3},
    {"id": "Drawing", "group": 2, "level":3},

    {"id": "1", "group": 2, "level":3},
    {"id": "2", "group": 2, "level":3},
    {"id": "3", "group": 2, "level":3},
    {"id": "4", "group": 2, "level":3},
    {"id": "5", "group": 2, "level":3},
    {"id": "6", "group": 2, "level":3},
  ],
  "links": [
  {"source": "DM", "target": "PLO1", "value": 80},
  {"source": "DM", "target": "PLO2", "value": 80},

    {"source": "PLO1", "target": "Module1", "value": 40},
    {"source": "PLO2", "target": "Module2", "value": 40},
    {"source": "PLO2", "target": "Module3", "value": 40},

    {"source": "Programming", "target": "Module1", "value": 1},
    {"source": "Drawing", "target": "Module2", "value": 1},
    {"source": "1", "target": "Module2", "value": 1},
    {"source": "2", "target": "Module2", "value": 1},
    {"source": "3", "target": "Module2", "value": 1},
    {"source": "4", "target": "Module2", "value": 1},
    {"source": "5", "target": "Module2", "value": 1},
    {"source": "6", "target": "Module2", "value": 1},
    // {"source": "6", "target": "Module1", "value": 1},
  ]
}


console.log('d3.version = ' + d3.version);

function ticked() {
  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; });

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

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
//   d3.select(this).classed("fixed", d.fixed = true);

}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
// Normal
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
// Stick Mode
//   if (!d3.event.active) simulation.alphaTarget(0);
//   d.fx = d.x;
//   d.fy = d.y;
}

function dblclick(d){
    console.log(d);
}

// function dblclick(d) {
//   d3.select(this).classed("fixed", d.fixed = false);
// }

// function dragstart(d) {
//   d3.select(this).classed("fixed", d.fixed = true);
// }


// MAIN

var svg = d3.select("svg")
    .style("cursor","move")
    .call(d3.zoom().on("zoom", function () {
        allObjects.attr("transform", d3.event.transform)
    }));

d3.select(window).on("resize", resize);
d3.select("svg").on("dblclick.zoom", null);
resize();

function resize() {
    var width = window.innerWidth, height = window.innerHeight;
	svg.attr("width", width).attr("height", height);
}

var    width = +svg.attr("width"),
height = +svg.attr("height");

var symbol = d3.symbol().size([1500]);
var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force('collide', d3.forceCollide(function(d){
        return LEVEL_DISTANCE[d.level]
      }))
  .force("center", d3.forceCenter(width / 2, height / 2));

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(graph.links);

var allObjects = svg.append("g")
    .attr("class", "allObjects");

var link = allObjects.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.links)
  .enter().append("line")
  .attr("stroke-width", function(d) { return Math.sqrt(d.value); });


var node = allObjects.append("g")
  .attr("class", "nodes")
  .selectAll("g")
  .data(graph.nodes)
  .enter().append("g")


var circles = node.append("circle")
  .attr("r", function(d) { return LEVEL_SIZE[d.level]; })
  .attr("fill", function(d) { return color(d.group); })
  .on("dblclick", dblclick)
  .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
       );


var lables = node.append("text")
  .text(function(d) {
    return d.id;
  })
  .attr('x', 20)
  .attr('y', 3)

node.append("title")
  .text(function(d) { return d.id; });

simulation
  .nodes(graph.nodes)
  .on("tick", ticked);

simulation.force("link")
  .links(graph.links);

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

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js" > </script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<style>
	body {
	overflow:hidden;
	margin:0;
	}
	.links line {
	stroke: #999;
	stroke-opacity: 0.6;
	}

	.nodes circle {
	stroke: black;
	stroke-width: 2.5px;
	}

	text {
	font-family: sans-serif;
	font-size: 15px;
	}

	.node.fixed {
	fill: #f00;
	}




	.svg-container {
	border: 1px solid #000;
	display: inline-block;
	}

	</style>


	</head>
	<body>
	<div id="container" class="svg-container">
	<svg width="1500" height="900" border="1"></svg>
	</div>

	<script>


	// original =>>> https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8
	// ref: https://observablehq.com/@d3/bar-chart

	// https://www.youtube.com/watch?v=HnFwl-8aTmQ
	// http://blog.pamelafox.org/2013/06/exporting-google-spreadsheet-as-json.html

	var LEVEL_SIZE = [50,30,10,5];
	var LEVEL_DISTANCE = [150,100,50,50];

	var graph = {
	"nodes": [
	{"id": "DM", "group": 0, "level":0},
	{"id": "PLO1", "group": 1, "level":1},
	{"id": "PLO2", "group": 2, "level":1},

	{"id": "Module1", "group": 1, "level":2},
	{"id": "Module2", "group": 2, "level":2},
	{"id": "Module3", "group": 2, "level":2},

	{"id": "Programming", "group": 1, "level":3},
	{"id": "Drawing", "group": 2, "level":3},

	{"id": "1", "group": 2, "level":3},
	{"id": "2", "group": 2, "level":3},
	{"id": "3", "group": 2, "level":3},
	{"id": "4", "group": 2, "level":3},
	{"id": "5", "group": 2, "level":3},
	{"id": "6", "group": 2, "level":3},
	],
	"links": [
	{"source": "DM", "target": "PLO1", "value": 80},
	{"source": "DM", "target": "PLO2", "value": 80},

	{"source": "PLO1", "target": "Module1", "value": 40},
	{"source": "PLO2", "target": "Module2", "value": 40},
	{"source": "PLO2", "target": "Module3", "value": 40},

	{"source": "Programming", "target": "Module1", "value": 1},
	{"source": "Drawing", "target": "Module2", "value": 1},
	{"source": "1", "target": "Module2", "value": 1},
	{"source": "2", "target": "Module2", "value": 1},
	{"source": "3", "target": "Module2", "value": 1},
	{"source": "4", "target": "Module2", "value": 1},
	{"source": "5", "target": "Module2", "value": 1},
	{"source": "6", "target": "Module2", "value": 1},
	// {"source": "6", "target": "Module1", "value": 1},
	]
	}


	console.log('d3.version = ' + d3.version);

	function ticked() {
	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; });

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

	function dragstarted(d) {
	if (!d3.event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	// d3.select(this).classed("fixed", d.fixed = true);

	}

	function dragged(d) {
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

	function dragended(d) {
	// Normal
	if (!d3.event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	// Stick Mode
	// if (!d3.event.active) simulation.alphaTarget(0);
	// d.fx = d.x;
	// d.fy = d.y;
	}

	function dblclick(d){
	console.log(d);
	}

	// function dblclick(d) {
	// d3.select(this).classed("fixed", d.fixed = false);
	// }

	// function dragstart(d) {
	// d3.select(this).classed("fixed", d.fixed = true);
	// }



	// MAIN

	var svg = d3.select("svg")
	.style("cursor","move")
	.call(d3.zoom().on("zoom", function () {
	allObjects.attr("transform", d3.event.transform)
	}));

	d3.select(window).on("resize", resize);
	d3.select("svg").on("dblclick.zoom", null);
	resize();

	function resize() {
	var width = window.innerWidth, height = window.innerHeight;
	svg.attr("width", width).attr("height", height);
	}

	var width = +svg.attr("width"),
	height = +svg.attr("height");

	var symbol = d3.symbol().size([1500]);
	var color = d3.scaleOrdinal(d3.schemeCategory20);

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.id; }))
	.force("charge", d3.forceManyBody())
	.force('collide', d3.forceCollide(function(d){
	return LEVEL_DISTANCE[d.level]
	}))
	.force("center", d3.forceCenter(width / 2, height / 2));

	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links);

	var allObjects = svg.append("g")
	.attr("class", "allObjects");

	var link = allObjects.append("g")
	.attr("class", "links")
	.selectAll("line")
	.data(graph.links)
	.enter().append("line")
	.attr("stroke-width", function(d) { return Math.sqrt(d.value); });


	var node = allObjects.append("g")
	.attr("class", "nodes")
	.selectAll("g")
	.data(graph.nodes)
	.enter().append("g")


	var circles = node.append("circle")
	.attr("r", function(d) { return LEVEL_SIZE[d.level]; })
	.attr("fill", function(d) { return color(d.group); })
	.on("dblclick", dblclick)
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended)
	);


	var lables = node.append("text")
	.text(function(d) {
	return d.id;
	})
	.attr('x', 20)
	.attr('y', 3)

	node.append("title")
	.text(function(d) { return d.id; });

	simulation
	.nodes(graph.nodes)
	.on("tick", ticked);

	simulation.force("link")
	.links(graph.links);

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