Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

Built with blockbuilder.org

forked from Utopiah's block: Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

<!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="https://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; });

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>

Modified http://vatelier.net/MyDemo/newtooling/wiki_graph_var.js to a secure url

https://d3js.org/d3.v3.min.js

https://vatelier.net/MyDemo/newtooling/wiki_graph_var.js