Skip to content

Instantly share code, notes, and snippets.

@atmccann

atmccann/index.html

Last active August 29, 2015 13:56
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 atmccann/8829957 to your computer and use it in GitHub Desktop.
Save atmccann/8829957 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<style type="text/css">
#graphic_container {
margin:20px auto;
width:1200px;
}
.slice text {
font-size: 11pt;
font-family: Arial;
}
</style>
</head>
<body>
<div id="graphic_container">
</div>
<script type="text/javascript">
data = [
{"category": "Best Actor", "name": "MorganFreeman", "movie_title": "The Shawshank Redemption", "character_name":"Red", "value":1 },
{"category": "Best Actor", "name": "Tom Hanks", "movie_title": "Forrest Gump", "character_name":"Forrest Gump", "value":1 },
{"category": "Best Actor", "name": "Nigel Hawthorne" , "movie_title":"The Madness of King George", "character_name":"King George III", "value":1 },
{"category": "Best Actor", "name": "Paul Newman" , "movie_title":"Nobody's Fool", "character_name":"Sully", "value":1 },
{"category": "Best Actor", "name": "John Travolta", "movie_title": "Pulp Fiction", "character_name":"Vincent Vega", "value":1 },
{"category": "Best Supporting Actor", "name": "Samuel L.Jackson", "movie_title": "Pulp Fiction", "character_name":"Jules Winnfield", "value":1 },
{"category": "Best Supporting Actor", "name": "Martin Landau" , "movie_title": "Ed Wood", "character_name":"Bela Lugosi", "value":1 },
{"category": "Best Supporting Actor", "name": "Chazz Palminteri" , "movie_title": "Bullets over Broadway", "character_name":"Cheech", "value":1 },
{"category": "Best Supporting Actor", "name": "Paul Scofield" , "movie_title": "Quiz Show", "character_name":"Mark Van Doren", "value":1 },
{"category": "Best Supporting Actor", "name": "Gary Sinise", "movie_title": "Forrest Gump", "character_name":"Lieutenant Dan", "value":1 },
{"category": "Best Actress", "name": "Jodie Foster", "movie_title": "Nell", "character_name":"Nell", "value":1 },
{"category": "Best Actress", "name": "Jessica Lange", "movie_title": "Blue Sky", "character_name":"Carly Marshall", "value":1 },
{"category": "Best Actress", "name": "Miranda Richardson", "movie_title": "Tom & Viv", "character_name":"Viv", "value":1 },
{"category": "Best Actress", "name": "WinonaRyder", "movie_title": "Little Women", "character_name":"Jo March", "value":1 },
{"category": "Best Actress", "name":"SusanSarandon", "movie_title": "The Client", "character_name":"Reggie Love", "value":1 },
{"category": "Best Supporting Actress" , "name": "Rosemary Harris", "movie_title": "Tom & Viv", "character_name":"Rose Haigh-Wood", "value":1 },
{"category": "Best Supporting Actress" , "name":"Helen Mirren", "movie_title": "The Madness of King George", "character_name":"Queen Charlotte", "value":1 },
{"category": "Best Supporting Actress" , "name":"Uma Thurman", "movie_title":"Pulp Fiction", "character_name":"Mia", "value":1 },
{"category": "Best Supporting Actress" , "name":"Jennifer Tilly", "movie_title": "Bullets over Broadway", "character_name":"Olive Neal", "value":1 },
{"category": "Best Supporting Actress" , "name":"Dianne Wiest", "movie_title": "Bullets over Broadway", "character_name":"Helen Sinclair", "value":1 },
{"category": "Best Director", "name": "Woody Allen", "movie_title" : "Bullets over Broadway", "character_name":null, "value":1 },
{"category": "Best Director", "name": "Robert Zemeckis", "movie_title" : "Forrest Gump", "character_name":null, "value":1 },
{"category": "Best Director", "name": "Quentin Tarantino", "movie_title" : "Pulp Fiction", "character_name":null, "value":1 },
{"category": "Best Director", "name": "Robert Redford", "movie_title" : "Quiz Show", "character_name":null, "value":1 },
{"category": "Best Director", "name": "Krzysztof Kieslowski", "movie_title" : "Red", "character_name":null, "value":1 },
{"category": "Best Picture", "name": "Wendy Finerman, Steve Tisch and Steve Starkey", "movie_title" : "Forrest Gump", "character_name":null, "value":1 },
{"category": "Best Picture", "name": "Duncan Kenworthy", "movie_title" : "Four Weddings and a Funeral", "character_name":null, "value":1 },
{"category": "Best Picture", "name": "Lawrence Bender", "movie_title" : "Pulp Fiction", "character_name":null, "value":1 },
{"category": "Best Picture", "name": "Robert Redford Michael Jacobs, Julian Krainin and Michael Nozik", "movie_title" : "Quiz Show", "character_name":null, "value":1 },
{"category": "Best Picture", "name": "Niki Marvin", "movie_title" : "The Shawshank Redemption", "character_name":null, "value":1 }
];
var w = 300,
h = 300,
r = 100;
var titles = d3.nest()
.key(function(d){ return d.movie_title; }).map(data)
var color = d3.scale.ordinal()
.range(colorbrewer.Set3[12]);
var vis = d3.select("#graphic_container")
.append("svg:svg")
.data([data])
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + r + "," + r + ")")
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie)
.enter()
.append("svg:g");
arcs.append("svg:path")
.attr("fill", function(d) { console.log(titles[d.data.movie_title].length);
if (titles[d.data.movie_title].length > 1)
{ return color(d.data.movie_title); }
else {return "none"}
;})
.attr("stroke","#000")
.attr("stroke-width",0.2) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment