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.

How to Explore

Scroll to zoom
Click and drag to pan
Mouseover for author names and journal titles
Type in the search box to find and isolate nodes

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

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>

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