Skip to content

Instantly share code, notes, and snippets.

@stimms

stimms/Readme.md

Last active December 14, 2015 10:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stimms/5069532 to your computer and use it in GitHub Desktop.
Save stimms/5069532 to your computer and use it in GitHub Desktop.
Download ZIP
This visualization represents people who have collaborated with Joss Whedon in his various ventures.
Raw
Readme.md

Collaborators of Joss Whedon

This visualization represents people who have collaborated with Joss Whedon in his various ventures.

Raw
data.json
{
"nodes": [
{
"Name": "Nathan Fillion",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Firefly"
},
{
"Type": "Internet",
"Name": "Dr. Horrible's Sing-Along Blog"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Amy Acker",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Dollhouse"
},
{
"Type": "Movie",
"Name": "The Cabin in the Woods"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Tom Lenk",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "Movie",
"Name": "The Cabin in the Woods"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Summer Glau",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Eliza Dushku",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Fran Kranz",
"Productions": [
{
"Type": "TV",
"Name": "Dollhouse"
},
{
"Type": "Movie",
"Name": "The Cabin in the Woods"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Alan Tudyk",
"Productions": [
{
"Type": "TV",
"Name": "Firefly"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Felicia Day",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "Internet",
"Name": "Dr. Horrible's Sing-Along Blog"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Sean Maher",
"Productions": [
{
"Type": "TV",
"Name": "Firefly"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Adam Baldwin",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Gina Torres",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Jonathan M. Woodward",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Carlos Jacott",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Andy Umberger",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Ashley Johnson",
"Productions": [
{
"Type": "TV",
"Name": "Dollhouse"
},
{
"Type": "Movie",
"Name": "The Avengers"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Jeff Ricketts",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Bob Fimiani",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Reed Diamond",
"Productions": [
{
"Type": "TV",
"Name": "Dollhouse"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Mark Sheppard",
"Productions": [
{
"Type": "TV",
"Name": "Firefly"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Jeremy Renner",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "Movie",
"Name": "The Avengers"
}
]
},
{
"Name": "Chris Hemsworth",
"Productions": [
{
"Type": "Movie",
"Name": "The Avengers"
},
{
"Type": "Movie",
"Name": "The Cabin in the Woods"
}
]
},
{
"Name": "Clark Gregg",
"Productions": [
{
"Type": "Movie",
"Name": "The Avengers"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Enver Gjokaj",
"Productions": [
{
"Type": "TV",
"Name": "Dollhouse"
},
{
"Type": "Movie",
"Name": "The Avengers"
}
]
},
{
"Name": "Christina Hendricks",
"Productions": [
{
"Type": "TV",
"Name": "Angel"
},
{
"Type": "TV",
"Name": "Firefly"
}
]
},
{
"Name": "Riki Lindhome",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Stacey Scowley",
"Productions": [
{
"Type": "TV",
"Name": "Buffy the Vampire Slayer"
},
{
"Type": "TV",
"Name": "Dollhouse"
}
]
},
{
"Name": "Romy Rosemont",
"Productions": [
{
"Type": "Movie",
"Name": "The Avengers"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
},
{
"Name": "Jillian Morgese",
"Productions": [
{
"Type": "Movie",
"Name": "The Avengers"
},
{
"Type": "Movie",
"Name": "Much Ado About Nothing"
}
]
}
]}
Raw
graph.js
var Graphing;
(function (Graphing) {
var ForceGraph = (function () {
function ForceGraph(width, height) {
this.width = width;
this.height = height;
}
ForceGraph.prototype.render = function () {
var _this = this;
var force = d3.layout.force().charge(-220).linkDistance(220).size([
this.width,
this.height
]);
var svg = d3.select("body").append("svg").attr("width", this.width).attr("height", this.height);
d3.json("data.json", function (error, graph) {
var links = _this.setUpLinks(graph);
force.nodes(graph.nodes).links(links).start();
var link = svg.selectAll(".link").data(links).enter().append("line").attr("class", "link").style("stroke-width", function (d) {
return Math.sqrt(d.value);
});
var node = svg.selectAll(".node").data(graph.nodes).enter().append("circle").attr("class", "node").attr("r", 15).attr("data-types", function (d) {
var result = "";
$.each(d.Productions, function (_, production) {
result += production.Type + " ";
});
return result;
}).attr("data-productions", function (d) {
var result = "";
$.each(d.Productions, function (_, production) {
result += production.Name.replace(/\s/g, "").replace("'", "") + " ";
});
return result;
}).style("fill", "steelblue").call(force.drag);
node.append("title").text(function (d) {
return d.Name;
});
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;
});
});
});
};
ForceGraph.prototype.setUpLinks = function (graph) {
var links = new Array();
for(var i = 0; i < graph.nodes.length; i++) {
for(var j = i; j < graph.nodes.length; j++) {
if(i != j) {
var strength = 0;
$.each(graph.nodes[i].Productions, function (_, source) {
$.each(graph.nodes[j].Productions, function (_, target) {
if(source.Name == target.Name) {
strength += 1;
}
});
});
if(strength > 0) {
links.push({
"source": i,
"target": j,
"value": strength
});
}
}
}
}
return links;
};
return ForceGraph;
})();
Graphing.ForceGraph = ForceGraph;
})(Graphing || (Graphing = {}));
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="graph.js"></script>
<script>
$(function(){
var graph = new Graphing.ForceGraph(900, 600);
graph.render();
$("input").click(function() {
$("[data-productions]").css("fill", "steelblue");
$("[data-productions*='" + $(this).attr("data-production") + "']").css("fill", "green");
});
});
</script>
</head>
<body>
<input type="button" data-production="Firefly" value="Firefly"></input>
<input type="button" data-production="BuffytheVampireSlayer" value="Buffy the Vampire Slayer"></input>
<input type="button" data-production="Dr.HorriblesSing-AlongBlog" value="Dr. Horrible's Sing-Along Blog"></input>
<input type="button" data-production="MuchAdoAboutNothing" value="Much Ado About Nothing"></input>
<input type="button" data-production="Dollhouse" value="Dollhouse"></input>
<input type="button" data-production="Angel" value="Angel"></input>
<input type="button" data-production="TheCabinintheWoods" value="The Cabin in the Woods"></input>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment