Utopiah/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

.node circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
  <script src="http://vatelier.net/MyDemo/newtooling/wiki_graph_var.js"></script>
<script>
var parameterPosition= document.URL.indexOf('page=');

console.log(document.URL);
console.log(parameterPosition);
var specifiedPage = (parameterPosition !== -1 ) ? true:false;
if (specifiedPage){
    if (!/[^a-zA-Z0-9\.]/.test(specifiedPage)) {
        console.log("page ", document.URL[parameterPosition+5]);
        // if clean use that as starting node
        // recursively load up to MaxPages neighbours
        // if nothing then next alphabetical pages
    }
}

var MaxPages = 10;
var dictionary = wiki.Nodes;
var keys = [];
keys = Object.keys(dictionary);
var links = [];
for (var i=0; i<MaxPages; i++){
  var page = dictionary[keys[i+1]];
    if (page.Targets){
    for (var j=0; j<page.Targets.length; j++){
      links.push({source: page.Id, target: page.Targets[j]});
    }
  }
}

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

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

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

var link = svg.selectAll(".link")
    .data(force.links())
  .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .call(force.drag);

node.append("circle")
    .attr("r", 8);

node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

function tick() {
  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 mouseover() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 16);
}

function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(750)
      .attr("r", 8);
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	.node circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	pointer-events: none;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="http://vatelier.net/MyDemo/newtooling/wiki_graph_var.js"></script>
	<script>
	var parameterPosition= document.URL.indexOf('page=');

	console.log(document.URL);
	console.log(parameterPosition);
	var specifiedPage = (parameterPosition !== -1 ) ? true:false;
	if (specifiedPage){
	if (!/[^a-zA-Z0-9\.]/.test(specifiedPage)) {
	console.log("page ", document.URL[parameterPosition+5]);
	// if clean use that as starting node
	// recursively load up to MaxPages neighbours
	// if nothing then next alphabetical pages
	}
	}

	var MaxPages = 10;
	var dictionary = wiki.Nodes;
	var keys = [];
	keys = Object.keys(dictionary);
	var links = [];
	for (var i=0; i<MaxPages; i++){
	var page = dictionary[keys[i+1]];
	if (page.Targets){
	for (var j=0; j<page.Targets.length; j++){
	links.push({source: page.Id, target: page.Targets[j]});
	}
	}
	}

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

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

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

	var link = svg.selectAll(".link")
	.data(force.links())
	.enter().append("line")
	.attr("class", "link");

	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter().append("g")
	.attr("class", "node")
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)
	.call(force.drag);

	node.append("circle")
	.attr("r", 8);

	node.append("text")
	.attr("x", 12)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	function tick() {
	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 mouseover() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 16);
	}

	function mouseout() {
	d3.select(this).select("circle").transition()
	.duration(750)
	.attr("r", 8);
	}

	</script>