davidgutierrez/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
  background: #eee;
}

path {
  stroke:black;
}  </style>
</head>

<body>
  <h3>D3 Force Tutorial</h3>
<div id="chart"></div>
  <script>
var nodes=[
	{name:"John", age:35, city:"Pereira"},
	{name:"Jose", age:53, city:"Bogotá"},
	{name:"Mafe", age:15, city:"Pereira"},
	{name:"Mario", age:23, city:"Bogotá"},
	{name:"Pedro", age:45, city:"Neiva"},
	{name:"Jose", age:22, city:"Neiva"},
	{name:"Karla", age:12, city:"Bogotá"}
];
var links = [
	{source:"John", target:"Mafe", weight:10},
	{source:"John", target:"Jose", weight:2},
	{source:"Jose", target:"Mario", weight:5},
	{source:"Mario", target:"Mafe", weight:8},
  {source:"Mario", target:"Karla", weight:8}
];

var width=300,
	height=300;
var svg = d3.select("#chart")
	.append("svg")
  .attr("width", width)
  .attr("height", height);

var rScale = d3.scaleLinear()
	.range([2, 20]);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var simulation = d3.forceSimulation()
//    .force("charge", d3.forceManyBody()
//    	.strength(-1))
	.force("center", d3.forceCenter(width/2,height/2));

function update(nodes, links) {
	rScale.domain(d3.extent(nodes,
  	function (d) {
    	return d.age;
    }));
  simulation
  	.force("link",
    	d3.forceLink()
      	.id(function(d) {
        return d.name;
      }));

  simulation.nodes(nodes);
  simulation.force("link")
      .links(links);
  simulation.on("tick", ticked)
    .force("collide", d3.forceCollide(
		function (d) {
    	return rScale(d.age);
    }
  ).strength(0.7))

	var nodesSel = svg.selectAll(".nodes")
  	.data(nodes);

  var nodesEnter = nodesSel.enter()
  	.append("g")
    .attr("class","nodes")
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  nodesEnter.append("circle")
  	.attr("r", function (d) {
    	return rScale(d.age);
    })
    .style("fill", function (d) {
    	return color(d.city);
    });

	var linksSel = svg.selectAll(".links")
  	.data(links);

  var linksEnter = linksSel.enter()
  	.append("path")
    .attr("class","links");


	function ticked() {
  	//console.log("ticked!");
    linksSel
    	.merge(linksEnter)
      .attr("d", function (d) {
      	return "M" + d.source.x +
        	" " + d.source.y +
          " L " + d.target.x +
          " " + d.target.y;
      });
    nodesSel
    	.merge(nodesEnter)
    	.attr("transform",
    	function (d) {
      	return "translate(" + d.x +"," + d.y + ")";
      });
  }
}

update(nodes, links);


function dragstarted(d) {
  if (!d3.event.active) simulation.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) simulation.alphaTarget(0);
  d.fx = null, d.fy = null;
}

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg {
	background: #eee;
	}

	path {
	stroke:black;
	} </style>
	</head>

	<body>
	<h3>D3 Force Tutorial</h3>
	<div id="chart"></div>
	<script>
	var nodes=[
	{name:"John", age:35, city:"Pereira"},
	{name:"Jose", age:53, city:"Bogotá"},
	{name:"Mafe", age:15, city:"Pereira"},
	{name:"Mario", age:23, city:"Bogotá"},
	{name:"Pedro", age:45, city:"Neiva"},
	{name:"Jose", age:22, city:"Neiva"},
	{name:"Karla", age:12, city:"Bogotá"}
	];
	var links = [
	{source:"John", target:"Mafe", weight:10},
	{source:"John", target:"Jose", weight:2},
	{source:"Jose", target:"Mario", weight:5},
	{source:"Mario", target:"Mafe", weight:8},
	{source:"Mario", target:"Karla", weight:8}
	];

	var width=300,
	height=300;
	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var rScale = d3.scaleLinear()
	.range([2, 20]);
	var color = d3.scaleOrdinal(d3.schemeCategory10);
	var simulation = d3.forceSimulation()
	// .force("charge", d3.forceManyBody()
	// .strength(-1))
	.force("center", d3.forceCenter(width/2,height/2));

	function update(nodes, links) {
	rScale.domain(d3.extent(nodes,
	function (d) {
	return d.age;
	}));
	simulation
	.force("link",
	d3.forceLink()
	.id(function(d) {
	return d.name;
	}));

	simulation.nodes(nodes);
	simulation.force("link")
	.links(links);
	simulation.on("tick", ticked)
	.force("collide", d3.forceCollide(
	function (d) {
	return rScale(d.age);
	}
	).strength(0.7))

	var nodesSel = svg.selectAll(".nodes")
	.data(nodes);

	var nodesEnter = nodesSel.enter()
	.append("g")
	.attr("class","nodes")
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));

	nodesEnter.append("circle")
	.attr("r", function (d) {
	return rScale(d.age);
	})
	.style("fill", function (d) {
	return color(d.city);
	});

	var linksSel = svg.selectAll(".links")
	.data(links);

	var linksEnter = linksSel.enter()
	.append("path")
	.attr("class","links");


	function ticked() {
	//console.log("ticked!");
	linksSel
	.merge(linksEnter)
	.attr("d", function (d) {
	return "M" + d.source.x +
	" " + d.source.y +
	" L " + d.target.x +
	" " + d.target.y;
	});
	nodesSel
	.merge(nodesEnter)
	.attr("transform",
	function (d) {
	return "translate(" + d.x +"," + d.y + ")";
	});
	}
	}

	update(nodes, links);


	function dragstarted(d) {
	if (!d3.event.active) simulation.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) simulation.alphaTarget(0);
	d.fx = null, d.fy = null;
	}

	</script>
	</body>