Skip to content

Instantly share code, notes, and snippets.

@tomshanley
Last active August 29, 2015 14:01
Show Gist options
  • Save tomshanley/d3185cf3bde18b223376 to your computer and use it in GitHub Desktop.
Save tomshanley/d3185cf3bde18b223376 to your computer and use it in GitHub Desktop.
Network of groups - force dircected graph

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.

{
"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}
]
}
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment