JoelGallagher/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

    .node {
        fill: #ccc;
        stroke: #fff;
        stroke-width: 2px;
    }
    /*add css for links*/

    .link {
        stroke: #777;
        stroke-width: 2px;
    }

</style>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script>

// set a width and height for our SVG
var width = 700,
    height = 700;

var links = [
    { source: 'PortalX', target:'PaymentGateway', distance:105 },
    { source: 'PortalX', target:'StarRezWeb',distance:400 },
    { source: 'PaymentGateway', target:'StarRezWeb', distance:330 },
    { source: 'StarRezWeb', target:'Conference',distance:501 },
];


    // create empty nodes array
    var nodes = {};

    // compute nodes from links data
    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});
    });


    // add a SVG to the body for our viz
    var svg=d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

    // use the force
    var force = d3.layout.force()
        .size([width, height])
        .nodes(d3.values(nodes))
        .links(links)
        .on("tick", tick)
        .linkDistance(function(d){

          // ERICA : This bit is what returns the different distances, you may want to apply a transition factor here
          return d.distance;
        })
        .start();

    // add links
    var link = svg.selectAll('.link')
        .data(links)
        .enter().append('line')
        .attr('class', 'link');

    // add nodes
    var node = svg.selectAll('.node')
        .data(force.nodes())
        .enter()
    		.append('circle')
        .attr('class', 'node')
        .attr('r', width * 0.03);


    // what to do
    function tick(e) {

        node.attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; })
            .call(force.drag);

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

    }

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 2px;
	}
	/add css for links/

	.link {
	stroke: #777;
	stroke-width: 2px;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<script>

	// set a width and height for our SVG
	var width = 700,
	height = 700;

	var links = [
	{ source: 'PortalX', target:'PaymentGateway', distance:105 },
	{ source: 'PortalX', target:'StarRezWeb',distance:400 },
	{ source: 'PaymentGateway', target:'StarRezWeb', distance:330 },
	{ source: 'StarRezWeb', target:'Conference',distance:501 },
	];


	// create empty nodes array
	var nodes = {};

	// compute nodes from links data
	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});
	});


	// add a SVG to the body for our viz
	var svg=d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	// use the force
	var force = d3.layout.force()
	.size([width, height])
	.nodes(d3.values(nodes))
	.links(links)
	.on("tick", tick)
	.linkDistance(function(d){

	// ERICA : This bit is what returns the different distances, you may want to apply a transition factor here
	return d.distance;
	})
	.start();

	// add links
	var link = svg.selectAll('.link')
	.data(links)
	.enter().append('line')
	.attr('class', 'link');

	// add nodes
	var node = svg.selectAll('.node')
	.data(force.nodes())
	.enter()
	.append('circle')
	.attr('class', 'node')
	.attr('r', width * 0.03);



	// what to do
	function tick(e) {

	node.attr('cx', function(d) { return d.x; })
	.attr('cy', function(d) { return d.y; })
	.call(force.drag);

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

	}

	</script>