D3 Examples - Dada Network (Schäfer Bibliography)

Dada Network (Schäfer Bibliography)

This is a force-directed publication network of Dada journals and authors taken from the third chapter of Jörgen Schäfer's bibliography Exquisite Dada. Orange nodes represent authors. Blue nodes represent journals. Edge weights represent number of publications.

I created this graph using the Python module NetworkX. This visualization was forked from John Ladd and Mike Bostock.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
​
.link {
  stroke: #999;
  stroke-opacity: .6;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var color = d3.scale.category10();
​
var size = d3.scale.log()
        .domain([1, 50])
        .range([5, 15]);
​
var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .gravity(.05)
    .friction(0.5)
    .size([width, height]);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
   .call(d3.behavior.zoom().on('zoom', zoomed));    
​
var container = svg.append("g");
​
var search = d3.select("body").append('form').attr('onsubmit', 'return false;');
​
var box = search.append('input')
    .attr('type', 'text')
    .attr('id', 'searchTerm')
    .attr('placeholder', 'Type to search...')
​
var button = search.append('input')
    .attr('type', 'button')
    .attr('value', 'Search')
    .on('click', function () { searchNodes(); });
​
d3.json("dada.json", function(error, graph) {
  if (error) throw error;
​
  var linkNodes = [];
​
  graph.links.forEach(function(link) {
    linkNodes.push({
      source: graph.nodes[link.source],
      target: graph.nodes[link.target]
    });
  });
​
  force
      .nodes(graph.nodes.concat(linkNodes))
      .links(graph.links)
      .start();
​
  var link = container.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.weight); });
​
  var node = container.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function (d, i) { 
        count = 0;
        graph.links.forEach(
            function(l) {
                //console.log(l.source);
                if ( l.source.index === i || l.target.index === i ) {
                    count += 1;
                };
        });
        return size(count);
    })
      .style("fill", function(d) { return color(d.bipartite); })
      .call(force.drag);
​
  node.append("title")
      .text(function(d) { return d.id; });
      
  var linkNode = svg.selectAll(".link-node")
      .data(linkNodes)
    .enter().append("circle")
      .attr("class", "link-node")
      .attr("r", 2)
      .style("fill", "#ccc");
      
  force.on("tick", function() {
    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; })
        .attr("cy", function(d) { return d.y; });
  });
});
​
function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
​
function searchNodes() {
        var term = document.getElementById('searchTerm').value;
        console.log(term);
        var selected = container.selectAll('.node').filter(function (d,i) {
                //select all nodes in class node
                return d.id.toLowerCase().search(term.toLowerCase()) == -1;
                //or you could do != -1 for what you do want
        });
        selected.style('opacity', '0');
        var link = container.selectAll('.link');
        link.style('stroke-opacity', '0');
        d3.selectAll('.node').transition()
                .duration(5000)
                .style('opacity', '1');
        d3.selectAll('.link').transition().duration(5000).style('stroke-opacity', '0.6');
​
}
​
​
</script>
​
​
    