colobas/.block

## .block
license: gpl-3.0
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    testing.

  
## graph1.json
{
  "nodes": [
    {
      "id": "a",
      "name": "A"
    },
    {
      "id": "b",
      "name": "B"
    },
    {
      "id": "c",
      "name": "C"
    },
    {
      "id": "d",
      "name": "D"
    },
    {
      "id": "e",
      "name": "E"
    },
    {
      "id": "f",
      "name": "F"
    },
    {
      "id": "g",
      "name": "G"
    },
    {
      "id": "h",
      "name": "H"
    },
    {
      "id": "i",
      "name": "I"
    },
    {
      "id": "j",
      "name": "J"
    }
  ],
  "links": [

    {
      "source": "a",
      "target": "b"
    },
    {
      "source": "a",
      "target": "e"
    },
    {
      "source": "a",
      "target": "f"
    },

    {
      "source": "b",
      "target": "c"
    },
    {
      "source": "b",
      "target": "g"
    },
    {
      "source": "c",
      "target": "d"
    },
     {
      "source": "h",
      "target": "c"
    },
    {
      "source": "d",
      "target": "e"
    },
    {
      "source": "d",
      "target": "i"
    },
    {
      "source": "e",
      "target": "j"
    }
  ]
}

## graph2.json
{
  "nodes": [
    {
      "id": 1,
      "name": 1
    },
    {
      "id": 2,
      "name": 2
    },
    {
      "id": 3,
      "name": 3
    },
    {
      "id": 4,
      "name": 4
    },
    {
      "id": 5,
      "name": 5
    },
    {
      "id": 6,
      "name": 6
    },
    {
      "id": 7,
      "name": 7
    },
    {
      "id": 8,
      "name": 8
    },
    {
      "id": 9,
      "name": 9
    },
    {
      "id": 10,
      "name": 10
    }
  ],
  "links": [

    {
      "source": 1,
      "target": 5
    },
    {
      "source": 5,
      "target": 3
    },
    {
      "source": 4,
      "target": 6
    },

    {
      "source": 7,
      "target": 2
    },
    {
      "source": 6,
      "target": 3
    },
    {
      "source": 8,
      "target": 5
    },
     {
      "source": 9,
      "target": 10
    },
    {
      "source": 9,
      "target": 7
    },
    {
      "source": 10,
      "target": 1
    },
    {
      "source": 1,
      "target": 4
    }
  ]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/*
  CSS GOES HERE
*/
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>

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

d3.json("https://gist.githubusercontent.com/colobas/74fab81157663cfa87dbfd5ee9015bfc/raw/a5f75483946e53804bd7fc65c6e0e0a90560ee63/graph1.json", function(data) {

  // Initialize the links
  var link = svg
    .selectAll("line")
    .data(data.links)
    .enter()
    .append("line")
      .style("stroke", "#aaa")

  // Initialize the nodes
  var node = svg
    .selectAll("circle")
    .data(data.nodes)
    .enter()
    .append("circle")
      .attr("r", 20)
      .style("fill", "#69b3a2")

  // Let's list the force we wanna apply on the network
  var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return d.id; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      )
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(width / 3, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);

  // This function is run at each iteration of the force algorithm, updating the nodes position.
  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("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });
  }
});

d3.json("https://gist.githubusercontent.com/colobas/74fab81157663cfa87dbfd5ee9015bfc/raw/a5f75483946e53804bd7fc65c6e0e0a90560ee63/graph2.json", function(data) {

  // Initialize the links
  var link = svg
    .selectAll("line")
    .data(data.links)
    .enter()
    .append("line")
      .style("stroke", "#aaa")

  // Initialize the nodes
  var node = svg
    .selectAll("circle")
    .data(data.nodes)
    .enter()
    .append("circle")
      .attr("r", 20)
      .style("fill", "#00b3a2")

  // Let's list the force we wanna apply on the network
  var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return d.id; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      )
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(2 * width / 3, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);

  // This function is run at each iteration of the force algorithm, updating the nodes position.
  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("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });
  }
});


</script>
	{
	"nodes": [
	{
	"id": "a",
	"name": "A"
	},
	{
	"id": "b",
	"name": "B"
	},
	{
	"id": "c",
	"name": "C"
	},
	{
	"id": "d",
	"name": "D"
	},
	{
	"id": "e",
	"name": "E"
	},
	{
	"id": "f",
	"name": "F"
	},
	{
	"id": "g",
	"name": "G"
	},
	{
	"id": "h",
	"name": "H"
	},
	{
	"id": "i",
	"name": "I"
	},
	{
	"id": "j",
	"name": "J"
	}
	],
	"links": [

	{
	"source": "a",
	"target": "b"
	},
	{
	"source": "a",
	"target": "e"
	},
	{
	"source": "a",
	"target": "f"
	},

	{
	"source": "b",
	"target": "c"
	},
	{
	"source": "b",
	"target": "g"
	},
	{
	"source": "c",
	"target": "d"
	},
	{
	"source": "h",
	"target": "c"
	},
	{
	"source": "d",
	"target": "e"
	},
	{
	"source": "d",
	"target": "i"
	},
	{
	"source": "e",
	"target": "j"
	}
	]
	}
	{
	"nodes": [
	{
	"id": 1,
	"name": 1
	},
	{
	"id": 2,
	"name": 2
	},
	{
	"id": 3,
	"name": 3
	},
	{
	"id": 4,
	"name": 4
	},
	{
	"id": 5,
	"name": 5
	},
	{
	"id": 6,
	"name": 6
	},
	{
	"id": 7,
	"name": 7
	},
	{
	"id": 8,
	"name": 8
	},
	{
	"id": 9,
	"name": 9
	},
	{
	"id": 10,
	"name": 10
	}
	],
	"links": [

	{
	"source": 1,
	"target": 5
	},
	{
	"source": 5,
	"target": 3
	},
	{
	"source": 4,
	"target": 6
	},

	{
	"source": 7,
	"target": 2
	},
	{
	"source": 6,
	"target": 3
	},
	{
	"source": 8,
	"target": 5
	},
	{
	"source": 9,
	"target": 10
	},
	{
	"source": 9,
	"target": 7
	},
	{
	"source": 10,
	"target": 1
	},
	{
	"source": 1,
	"target": 4
	}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	/*
	CSS GOES HERE
	*/
	</style>
	<svg width="960" height="600"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>

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

	d3.json("https://gist.githubusercontent.com/colobas/74fab81157663cfa87dbfd5ee9015bfc/raw/a5f75483946e53804bd7fc65c6e0e0a90560ee63/graph1.json", function(data) {

	// Initialize the links
	var link = svg
	.selectAll("line")
	.data(data.links)
	.enter()
	.append("line")
	.style("stroke", "#aaa")

	// Initialize the nodes
	var node = svg
	.selectAll("circle")
	.data(data.nodes)
	.enter()
	.append("circle")
	.attr("r", 20)
	.style("fill", "#69b3a2")

	// Let's list the force we wanna apply on the network
	var simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes
	.force("link", d3.forceLink() // This force provides links between nodes
	.id(function(d) { return d.id; }) // This provide the id of a node
	.links(data.links) // and this the list of links
	)
	.force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
	.force("center", d3.forceCenter(width / 3, height / 2)) // This force attracts nodes to the center of the svg area
	.on("end", ticked);

	// This function is run at each iteration of the force algorithm, updating the nodes position.
	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("cx", function (d) { return d.x+6; })
	.attr("cy", function(d) { return d.y-6; });
	}
	});

	d3.json("https://gist.githubusercontent.com/colobas/74fab81157663cfa87dbfd5ee9015bfc/raw/a5f75483946e53804bd7fc65c6e0e0a90560ee63/graph2.json", function(data) {

	// Initialize the links
	var link = svg
	.selectAll("line")
	.data(data.links)
	.enter()
	.append("line")
	.style("stroke", "#aaa")

	// Initialize the nodes
	var node = svg
	.selectAll("circle")
	.data(data.nodes)
	.enter()
	.append("circle")
	.attr("r", 20)
	.style("fill", "#00b3a2")

	// Let's list the force we wanna apply on the network
	var simulation = d3.forceSimulation(data.nodes) // Force algorithm is applied to data.nodes
	.force("link", d3.forceLink() // This force provides links between nodes
	.id(function(d) { return d.id; }) // This provide the id of a node
	.links(data.links) // and this the list of links
	)
	.force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
	.force("center", d3.forceCenter(2 * width / 3, height / 2)) // This force attracts nodes to the center of the svg area
	.on("end", ticked);

	// This function is run at each iteration of the force algorithm, updating the nodes position.
	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("cx", function (d) { return d.x+6; })
	.attr("cy", function(d) { return d.y-6; });
	}
	});



	</script>