Network of groups - force dircected graph

readme.md

This is a graph of groups within a programme of work, and the members of the groups. You can toggle whether you see all members, or just those who are members of two or more groups.

groups.json

{
"nodes":[
{"name":"Agnes Partee","group":"Organisation 1","single":"no"},
{"name":"Ellyn Arzola","group":"Organisation 1","single":"no"},
{"name":"Antone Milazzo","group":"Organisation 1","single":"no"},
{"name":"Francina Schnee","group":"Organisation 1","single":"no"},
{"name":"Lia Fetzer","group":"Organisation 1","single":"no"},
{"name":"Heike Maurice","group":"Organisation 1","single":"no"},
{"name":"Gertrude Hayek","group":"Organisation 1","single":"no"},
{"name":"Aurea Gayer","group":"Organisation 1","single":"no"},
{"name":"Sylvia Pellham","group":"Organisation 1","single":"no"},
{"name":"Katerine Lough","group":"Organisation 1","single":"no"},
{"name":"Ute Moss","group":"Organisation 10","single":"no"},
{"name":"Jerrica Raatz","group":"Organisation 2","single":"no"},
{"name":"Maggie Lamacchia","group":"Organisation 4","single":"no"},
{"name":"Suanne Wesely","group":"Organisation 1","single":"yes"},
{"name":"Ida Golston","group":"Organisation 5","single":"yes"},
{"name":"Danuta Haggett","group":"Organisation 6","single":"yes"},
{"name":"Owen Elms","group":"Organisation 8","single":"yes"},
{"name":"Evelynn Lovin","group":"Organisation 2","single":"yes"},
{"name":"Jacqulyn Demello","group":"Organisation 3","single":"yes"},
{"name":"Fredia Ashbrook","group":"Organisation 7","single":"yes"},
{"name":"Elena Fout","group":"Organisation 3","single":"no"},
{"name":"Porfirio Bengston","group":"Organisation 5","single":"no"},
{"name":"Yi Lounsbury","group":"Organisation 8","single":"no"},
{"name":"Santina Kong","group":"Organisation 4","single":"no"},
{"name":"Juana Krogh","group":"Organisation 1","single":"no"},
{"name":"Emmy Cornman","group":"Organisation 1","single":"no"},
{"name":"Ivory Whitsitt","group":"Organisation 1","single":"yes"},
{"name":"Yevette Ullery","group":"Organisation 1","single":"yes"},
{"name":"Yesenia Stillwell","group":"Organisation 2","single":"yes"},
{"name":"Brett Haar","group":"Organisation 7","single":"no"},
{"name":"Buford Garraway","group":"Organisation 8","single":"no"},
{"name":"Lou Christon","group":"Organisation 2","single":"yes"},
{"name":"Kanisha Keaney","group":"Organisation 1","single":"yes"},
{"name":"Janise Fish","group":"Organisation 1","single":"yes"},
{"name":"Adalberto Dombrosky","group":"Organisation 1","single":"yes"},
{"name":"Emma Vernon","group":"Organisation 2","single":"yes"},
{"name":"Stephania Stringham","group":"Organisation 2","single":"yes"},
{"name":"Shila Hurlbut","group":"Organisation 4","single":"yes"},
{"name":"Ciera Dube","group":"Organisation 4","single":"yes"},
{"name":"Lauran Hardesty","group":"Organisation 3","single":"yes"},
{"name":"Ila Jiminez","group":"Organisation 8","single":"yes"},
{"name":"Elise Jovel","group":"Organisation 8","single":"yes"},
{"name":"Tarah Mcdavid","group":"Organisation 8","single":"yes"},
{"name":"Julietta Raap","group":"Organisation 1","single":"no"},
{"name":"Herlinda Hagel","group":"Organisation 8","single":"no"},
{"name":"Mauro Canez","group":"Organisation 1","single":"no"},
{"name":"Arthur Farias","group":"Organisation 1","single":"no"},
{"name":"Reyes Fey","group":"Organisation 8","single":"no"},
{"name":"Oretha Huisman","group":"Organisation 5","single":"yes"},
{"name":"Lucie Fettig","group":"Organisation 2","single":"yes"},
{"name":"Maribel Ericsson","group":"Organisation 2","single":"yes"},
{"name":"Estelle Speight","group":"Organisation 4","single":"yes"},
{"name":"Krysta Wahlen","group":"Organisation 4","single":"yes"},
{"name":"Marielle Geibel","group":"Organisation 3","single":"yes"},
{"name":"Jackelyn Fonda","group":"Organisation 8","single":"yes"},
{"name":"Roxanna Swink","group":"Organisation 8","single":"yes"},
{"name":"Adena Defrancisco","group":"Organisation 4","single":"yes"},
{"name":"Veronique Farrington","group":"Organisation 8","single":"no"},
{"name":"Bud Teeters","group":"Organisation 9","single":"yes"},
{"name":"Allyn Ibarra","group":"Organisation 10","single":"yes"},
{"name":"Clemmie Stultz","group":"Organisation 2","single":"yes"},
{"name":"Mayra Fluellen","group":"Organisation 4","single":"yes"},
{"name":"Malia Saffer","group":"Organisation 7","single":"yes"},
{"name":"Tressa Heacock","group":"Organisation 3","single":"no"},
{"name":"Jeannine Weise","group":"Organisation 10","single":"yes"},
{"name":"Reagan Stonecipher","group":"Organisation 4","single":"yes"},
{"name":"Madlyn Moretti","group":"Organisation 3","single":"yes"},
{"name":"Alfonso Letendre","group":"Organisation 1","single":"yes"},
{"name":"Alissa Sabatini","group":"Organisation 1","single":"yes"},
{"name":"Kimbra Olson","group":"Organisation 2","single":"yes"},
{"name":"Earline Bergen","group":"Organisation 4","single":"yes"},
{"name":"Sheilah Gill","group":"Organisation 3","single":"yes"},
{"name":"Coretta Hine","group":"Organisation 7","single":"yes"},
{"name":"German Arata","group":"Organisation 5","single":"yes"},
{"name":"Alleen Jaco","group":"Organisation 10","single":"no"},
{"name":"Qiana Gaskamp","group":"Organisation 4","single":"no"},
{"name":"Lynelle Fairbairn","group":"Organisation 4","single":"no"},
{"name":"Blanch Brain","group":"Organisation 11","single":"yes"},
{"name":"Mamie Stampley","group":"Organisation 4","single":"yes"},
{"name":"Brianna Haycock","group":"Organisation 4","single":"yes"},
{"name":"Kirstie Price","group":"Organisation 1","single":"yes"},
{"name":"Takako Macleod","group":"Organisation 2","single":"yes"},
{"name":"Gerry Schiffer","group":"Organisation 12","single":"no"},
{"name":"Cinderella Smithwick","group":"Organisation 1","single":"no"},
{"name":"Ambrose Foronda","group":"Organisation 10","single":"yes"},
{"name":"Geraldine Kaczorowski","group":"Organisation 1","single":"yes"},
{"name":"Shonna Severs","group":"Organisation 11","single":"yes"},
{"name":"Rona Hakim","group":"Organisation 2","single":"yes"},
{"name":"Jewel Verrill","group":"Organisation 7","single":"yes"},
{"name":"Genevive Thibeau","group":"Organisation 7","single":"yes"},
{"name":"Machelle Rahimi","group":"Organisation 13","single":"yes"},
{"name":"Kymberly Ashlock","group":"Organisation 4","single":"yes"},
{"name":"Elmo Upson","group":"Organisation 4","single":"yes"},
{"name":"Yuri Alonso","group":"Organisation 1","single":"yes"},
{"name":"Jacinto Dowdle","group":"Organisation 5","single":"yes"},
{"name":"Shannan Finger","group":"Organisation 2","single":"yes"},
{"name":"Cori Perrin","group":"Organisation 7","single":"yes"},
{"name":"Tamica Akers","group":"Organisation 14","single":"yes"},
{"name":"Geneva Mogensen","group":"Organisation 9","single":"yes"},
{"name":"Gladis Flemings","group":"Organisation 5","single":"yes"},
{"name":"Helena Chamlee","group":"Organisation 8","single":"yes"},
{"name":"Tereasa Wold","group":"Organisation 2","single":"yes"},
{"name":"Alton Santini","group":"Organisation 8","single":"no"},
{"name":"Estella Savory","group":"Organisation 10","single":"yes"},
{"name":"Adrianna Mader","group":"Organisation 10","single":"yes"},
{"name":"Anastasia Blass","group":"Organisation 1","single":"yes"},
{"name":"Dominic Wilborn","group":"Organisation 2","single":"yes"},
{"name":"Xavier Liddell","group":"Organisation 4","single":"yes"},
{"name":"Franchesca Eggert","group":"Organisation 4","single":"yes"},
{"name":"Rubye Boze","group":"Organisation 4","single":"yes"},
{"name":"Avelina Vannostrand","group":"Organisation 3","single":"yes"},
{"name":"Lucille Witty","group":"Organisation 7","single":"yes"},
{"name":"Chanelle Trew","group":"Organisation 15","single":"yes"},
{"name":"Alta Neuner","group":"Organisation 15","single":"yes"},
{"name":"Carroll Mcglade","group":"Organisation 2","single":"yes"},
{"name":"Albert Almanza","group":"Organisation 9","single":"yes"},
{"name":"Lillia Reaper","group":"Organisation 10","single":"yes"},
{"name":"Wilma Veach","group":"Organisation 13 NZ","single":"yes"},
{"name":"Shantae Torgrimson","group":"Organisation 11","single":"yes"},
{"name":"Adrienne Poovey","group":"Organisation 11","single":"yes"},
{"name":"Carey Vonderheide","group":"Organisation 2","single":"yes"},
{"name":"Jerilyn Rochon","group":"Organisation 4","single":"yes"},
{"name":"Shanita Stanfield","group":"Organisation 14","single":"yes"},
{"name":"Miesha Franklin","group":"Organisation 16","single":"yes"},
{"name":"Lucien Bevan","group":"Organisation 17","single":"yes"},
{"name":"Elana Kain","group":"Organisation 2","single":"yes"},
{"name":"Britany Dominique","group":"Organisation 2","single":"yes"},
{"name":"Garnet Lazos","group":"Organisation 17","single":"yes"},
{"name":"Cody Carrasquillo","group":"Organisation 17","single":"yes"},
{"name":"Catarina Ullery","group":"Organisation 17","single":"yes"},
{"name":"Group 1","group":"Group","single":"no"},
{"name":"Group 2","group":"Group","single":"no"},
{"name":"Group 3","group":"Group","single":"no"},
{"name":"Group 4","group":"Group","single":"no"},
{"name":"Group 5","group":"Group","single":"no"},
{"name":"Group 6","group":"Group","single":"no"},
{"name":"Group 7","group":"Group","single":"no"},
{"name":"Group 8","group":"Group","single":"no"},
{"name":"Group 9","group":"Group","single":"no"},
{"name":"Group 10","group":"Group","single":"no"},
{"name":"Group 11","group":"Group","single":"no"},
{"name":"Group 12","group":"Group","single":"no"},
{"name":"Group 13","group":"Group","single":"no"},
{"name":"Group 14","group":"Group","single":"no"},
{"name":"Group 15","group":"Group","single":"no"},
{"name":"Group 16","group":"Group","single":"no"},
{"name":"Group 17","group":"Group","single":"no"},
{"name":"Group 18","group":"Group","single":"no"},
{"name":"Group 19","group":"Group","single":"no"}
],

"links":[
{"source":0,"target":130,"value":1},
{"source":0,"target":131,"value":1},
{"source":0,"target":148,"value":1},
{"source":1,"target":130,"value":1},
{"source":1,"target":132,"value":1},
{"source":1,"target":135,"value":1},
{"source":2,"target":130,"value":1},
{"source":2,"target":133,"value":1},
{"source":2,"target":148,"value":1},
{"source":3,"target":130,"value":1},
{"source":3,"target":134,"value":1},
{"source":4,"target":130,"value":1},
{"source":4,"target":136,"value":1},
{"source":5,"target":130,"value":1},
{"source":5,"target":137,"value":1},
{"source":6,"target":130,"value":1},
{"source":6,"target":138,"value":1},
{"source":7,"target":130,"value":1},
{"source":7,"target":135,"value":1},
{"source":7,"target":139,"value":1},
{"source":8,"target":130,"value":1},
{"source":8,"target":140,"value":1},
{"source":9,"target":130,"value":1},
{"source":9,"target":140,"value":1},
{"source":10,"target":131,"value":1},
{"source":10,"target":132,"value":1},
{"source":11,"target":131,"value":1},
{"source":11,"target":141,"value":1},
{"source":11,"target":143,"value":1},
{"source":11,"target":144,"value":1},
{"source":12,"target":131,"value":1},
{"source":12,"target":143,"value":1},
{"source":12,"target":144,"value":1},
{"source":13,"target":131,"value":1},
{"source":14,"target":131,"value":1},
{"source":15,"target":131,"value":1},
{"source":16,"target":131,"value":1},
{"source":17,"target":131,"value":1},
{"source":18,"target":131,"value":1},
{"source":19,"target":131,"value":1},
{"source":20,"target":132,"value":1},
{"source":20,"target":134,"value":1},
{"source":20,"target":137,"value":1},
{"source":20,"target":148,"value":1},
{"source":21,"target":132,"value":1},
{"source":21,"target":137,"value":1},
{"source":21,"target":148,"value":1},
{"source":22,"target":132,"value":1},
{"source":22,"target":137,"value":1},
{"source":23,"target":132,"value":1},
{"source":23,"target":145,"value":1},
{"source":23,"target":148,"value":1},
{"source":24,"target":132,"value":1},
{"source":24,"target":146,"value":1},
{"source":25,"target":132,"value":1},
{"source":25,"target":147,"value":1},
{"source":26,"target":132,"value":1},
{"source":27,"target":132,"value":1},
{"source":28,"target":132,"value":1},
{"source":29,"target":133,"value":1},
{"source":29,"target":134,"value":1},
{"source":29,"target":148,"value":1},
{"source":30,"target":133,"value":1},
{"source":30,"target":138,"value":1},
{"source":31,"target":133,"value":1},
{"source":32,"target":133,"value":1},
{"source":33,"target":133,"value":1},
{"source":34,"target":133,"value":1},
{"source":35,"target":133,"value":1},
{"source":36,"target":133,"value":1},
{"source":37,"target":133,"value":1},
{"source":38,"target":133,"value":1},
{"source":39,"target":133,"value":1},
{"source":40,"target":133,"value":1},
{"source":41,"target":133,"value":1},
{"source":42,"target":133,"value":1},
{"source":43,"target":134,"value":1},
{"source":43,"target":137,"value":1},
{"source":44,"target":134,"value":1},
{"source":44,"target":139,"value":1},
{"source":45,"target":134,"value":1},
{"source":45,"target":148,"value":1},
{"source":46,"target":134,"value":1},
{"source":46,"target":148,"value":1},
{"source":47,"target":134,"value":1},
{"source":47,"target":148,"value":1},
{"source":48,"target":134,"value":1},
{"source":49,"target":134,"value":1},
{"source":50,"target":134,"value":1},
{"source":51,"target":134,"value":1},
{"source":52,"target":134,"value":1},
{"source":53,"target":134,"value":1},
{"source":54,"target":134,"value":1},
{"source":55,"target":134,"value":1},
{"source":56,"target":134,"value":1},
{"source":57,"target":137,"value":1},
{"source":57,"target":142,"value":1},
{"source":57,"target":143,"value":1},
{"source":57,"target":144,"value":1},
{"source":58,"target":137,"value":1},
{"source":59,"target":137,"value":1},
{"source":60,"target":137,"value":1},
{"source":61,"target":137,"value":1},
{"source":62,"target":137,"value":1},
{"source":63,"target":138,"value":1},
{"source":63,"target":140,"value":1},
{"source":63,"target":145,"value":1},
{"source":64,"target":138,"value":1},
{"source":65,"target":138,"value":1},
{"source":66,"target":138,"value":1},
{"source":67,"target":139,"value":1},
{"source":68,"target":139,"value":1},
{"source":69,"target":139,"value":1},
{"source":70,"target":139,"value":1},
{"source":71,"target":139,"value":1},
{"source":72,"target":139,"value":1},
{"source":73,"target":139,"value":1},
{"source":74,"target":140,"value":1},
{"source":74,"target":141,"value":1},
{"source":75,"target":140,"value":1},
{"source":75,"target":141,"value":1},
{"source":76,"target":140,"value":1},
{"source":76,"target":142,"value":1},
{"source":77,"target":140,"value":1},
{"source":78,"target":140,"value":1},
{"source":79,"target":140,"value":1},
{"source":80,"target":140,"value":1},
{"source":81,"target":140,"value":1},
{"source":82,"target":141,"value":1},
{"source":82,"target":142,"value":1},
{"source":82,"target":143,"value":1},
{"source":82,"target":144,"value":1},
{"source":83,"target":141,"value":1},
{"source":83,"target":143,"value":1},
{"source":83,"target":144,"value":1},
{"source":84,"target":141,"value":1},
{"source":85,"target":141,"value":1},
{"source":86,"target":141,"value":1},
{"source":87,"target":141,"value":1},
{"source":88,"target":141,"value":1},
{"source":89,"target":141,"value":1},
{"source":90,"target":142,"value":1},
{"source":91,"target":142,"value":1},
{"source":92,"target":142,"value":1},
{"source":93,"target":145,"value":1},
{"source":94,"target":145,"value":1},
{"source":95,"target":145,"value":1},
{"source":96,"target":145,"value":1},
{"source":97,"target":145,"value":1},
{"source":98,"target":145,"value":1},
{"source":99,"target":145,"value":1},
{"source":100,"target":145,"value":1},
{"source":101,"target":145,"value":1},
{"source":102,"target":147,"value":1},
{"source":102,"target":148,"value":1},
{"source":103,"target":147,"value":1},
{"source":104,"target":147,"value":1},
{"source":105,"target":147,"value":1},
{"source":106,"target":147,"value":1},
{"source":107,"target":147,"value":1},
{"source":108,"target":147,"value":1},
{"source":109,"target":147,"value":1},
{"source":110,"target":147,"value":1},
{"source":111,"target":147,"value":1},
{"source":112,"target":147,"value":1},
{"source":113,"target":147,"value":1},
{"source":114,"target":147,"value":1},
{"source":115,"target":148,"value":1},
{"source":116,"target":148,"value":1},
{"source":117,"target":148,"value":1},
{"source":118,"target":148,"value":1},
{"source":119,"target":148,"value":1},
{"source":120,"target":148,"value":1},
{"source":121,"target":148,"value":1},
{"source":122,"target":148,"value":1},
{"source":123,"target":148,"value":1},
{"source":124,"target":148,"value":1},
{"source":125,"target":148,"value":1},
{"source":126,"target":148,"value":1},
{"source":127,"target":148,"value":1},
{"source":128,"target":148,"value":1},
{"source":129,"target":148,"value":1}
]
}

index.html

<!DOCTYPE html>


<html>
<meta charset="utf-8">
<title>Group Members</title>
<style>
<style>

.link {
    stroke: #000;
  stroke-opacity: 1;
}

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

</style>
<body>
<h1>Group membership</h1>

<div class="options">
	<span><label for="hideSingles"><input type="checkbox" name="hideSingles" value="hideSingles"></input> Hide members of only one group</label></span>
</div>

<div id="viz"></div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 1600,
    height = 800
	radius = 5;

var svg = d3.select("#viz").append("svg")
    .attr("width", width)
    .attr("height", height);
	
	svg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .style("stroke", "#000")
	.style("fill", "#fff");
	
var k = Math.sqrt(98 / (width * height));


    

var force = d3.layout.force()
	//.charge(-10 / k)
    //.gravity(100 * k)

    .gravity(.07)
    .distance(75)
    .charge(-200)
    .size([width, height]);
	
var color = d3.scale.category20();


d3.json("groups.json", function(error, json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();
	  
d3.selectAll("input[name='hideSingles']")
	.on("click", hideSingles);
	  
	  var drag = force.drag()
    .on("dragstart", dragstart);

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
	  .style("stroke", "Black")
	  .style("stroke-opacity", ".3")
	  .style("stroke-width", 2 );

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

  node.append("circle")
      .attr("class", "node")
      .attr("r", radius)
	  //.on("click", hideclick) //hide this if
	  .style("fill", function(d) { return color(d.group); });

   d3.selectAll("circle")
		.attr("r", function(d) { 
			if (d.group === "Group") { return "10"}
			else return "5" });
  
  node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

  force.on("tick", function() {
  
    node.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
        .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
    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 dblclick(d) {
	  d3.select(this).classed("fixed", d.fixed = false);
	}

	function dragstart(d) {
	  d3.select(this).classed("fixed", d.fixed = true);
	}
	

var singlesHidden = false;

function hideSingles() {

	if (singlesHidden) { //if singlesHidden is True
		console.log("before " +singlesHidden)
		
		d3.selectAll("circle")
			.style("visibility", "visible");
		
		d3.selectAll("text")
			.style("display", "block");
		
		d3.selectAll("line")
			.style("stroke-opacity", "0.3")
		
		singlesHidden = false;
		console.log("after " +singlesHidden)
	}
	
	else { //if singlesHidden is False 
		console.log("before " +singlesHidden)
		
		d3.selectAll("circle")
			.style("visibility", function(d) {
				if (d.single === "yes") { return "hidden";} 
				else {return "visible";}
			});
		
		d3.selectAll("text")
			.style("display", function(d) {
				if (d.single === "yes") { return "none";} 
				else {return "visible";}
			});
			
			
		d3.selectAll("line")
			.style("stroke-opacity", function(d) {
				if (d.source.single === "yes") { console.log("got here"); return 0; }
				else if (d.target.single === "yes") { return 0; }
				else { console.log("got 0.2"); return 0.3;}
			});
		
		
		singlesHidden = true;
		console.log("after " +singlesHidden)
	}
}
	
});

</script>

thumbnail.png