Tree layout.
From D3 in Depth book by Peter Cook.
license: gpl-3.0 | |
height: 1000 | |
border: no |
Tree layout.
From D3 in Depth book by Peter Cook.
Film | Genre | Lead Studio | Audience score % | Worldwide Gross | Year | |
---|---|---|---|---|---|---|
27 Dresses | Comedy | Fox | 71 | 160.308654 | 2008 | |
(500) Days of Summer | Comedy | Fox | 81 | 60.72 | 2009 | |
A Dangerous Method | Drama | Independent | 89 | 8.972895 | 2011 | |
A Serious Man | Drama | Universal | 64 | 30.68 | 2009 | |
Across the Universe | Romance | Independent | 84 | 29.367143 | 2007 | |
Beginners | Comedy | Independent | 80 | 14.31 | 2011 | |
Dear John | Drama | Sony | 66 | 114.97 | 2010 | |
Enchanted | Comedy | Disney | 80 | 340.487652 | 2007 | |
Fireproof | Drama | Independent | 51 | 33.467 | 2008 | |
Four Christmases | Comedy | Warner Bros. | 52 | 161.834 | 2008 | |
Ghosts of Girlfriends Past | Comedy | Warner Bros. | 47 | 102.22 | 2009 | |
Gnomeo and Juliet | Animation | Disney | 52 | 193.967 | 2011 | |
Going the Distance | Comedy | Warner Bros. | 56 | 42.05 | 2010 | |
Good Luck Chuck | Comedy | Lionsgate | 61 | 59.192128 | 2007 | |
He's Just Not That Into You | Comedy | Warner Bros. | 60 | 178.84 | 2009 | |
High School Musical 3: Senior Year | Comedy | Disney | 76 | 252.044501 | 2008 | |
I Love You Phillip Morris | Comedy | Independent | 57 | 20.1 | 2010 | |
It's Complicated | Comedy | Universal | 63 | 224.6 | 2009 | |
Jane Eyre | Romance | Universal | 77 | 30.147 | 2011 | |
Just Wright | Comedy | Fox | 58 | 21.569 | 2010 | |
Killers | Action | Lionsgate | 45 | 93.4 | 2010 | |
Knocked Up | Comedy | Universal | 83 | 219.001261 | 2007 | |
Leap Year | Comedy | Universal | 49 | 32.59 | 2010 | |
Letters to Juliet | Comedy | Summit | 62 | 79.18 | 2010 | |
License to Wed | Comedy | Warner Bros. | 55 | 69.307224 | 2007 | |
Life as We Know It | Comedy | Independent | 62 | 96.16 | 2010 | |
Love & Other Drugs | Comedy | Fox | 55 | 54.53 | 2010 | |
Love Happens | Drama | Universal | 40 | 36.08 | 2009 | |
Made of Honor | Comedy | Sony | 61 | 105.962734 | 2008 | |
Mamma Mia! | Comedy | Universal | 76 | 609.473955 | 2008 | |
Marley and Me | Comedy | Fox | 77 | 206.073 | 2008 | |
Midnight in Paris | Romance | Sony | 84 | 148.66 | 2011 | |
Miss Pettigrew Lives for a Day | Comedy | Independent | 70 | 15.173694 | 2008 | |
Monte Carlo | Romance | 20th Century Fox | 50 | 39.664 | 2011 | |
Music and Lyrics | Romance | Warner Bros. | 70 | 145.896422 | 2007 | |
My Week with Marilyn | Drama | The Weinstein Company | 84 | 8.258 | 2011 | |
New Year's Eve | Romance | Warner Bros. | 48 | 142.04 | 2011 | |
Nick and Norah's Infinite Playlist | Comedy | Sony | 67 | 33.527293 | 2008 | |
No Reservations | Comedy | 64 | 92.60105 | 2007 | ||
Not Easily Broken | Drama | Independent | 66 | 10.7 | 2009 | |
One Day | Romance | Independent | 54 | 55.241 | 2011 | |
Our Family Wedding | Comedy | Independent | 49 | 21.37 | 2010 | |
Over Her Dead Body | Comedy | New Line | 47 | 20.71 | 2008 | |
P.S. I Love You | Romance | Independent | 82 | 153.093505 | 2007 | |
Penelope | Comedy | Summit | 74 | 20.741996 | 2008 | |
Rachel Getting Married | Drama | Independent | 61 | 16.61 | 2008 | |
Remember Me | Drama | Summit | 70 | 55.86 | 2010 | |
Sex and the City | Comedy | Warner Bros. | 81 | 415.253258 | 2008 | |
Sex and the City 2 | Comedy | Warner Bros. | 49 | 288.35 | 2010 | |
She's Out of My League | Comedy | Paramount | 60 | 48.81 | 2010 | |
Something Borrowed | Romance | Independent | 60.183 | 2011 | ||
Tangled | Animation | Disney | 88 | 355.08 | 2010 | |
The Back-up Plan | Comedy | CBS | 47 | 77.09 | 2010 | |
The Curious Case of Benjamin Button | Fantasy | Warner Bros. | 81 | 285.431 | 2008 | |
The Duchess | Drama | Paramount | 68 | 43.305978 | 2008 | |
The Heartbreak Kid | Comedy | Paramount | 41 | 127.76665 | 2007 | |
The Invention of Lying | Comedy | Warner Bros. | 47 | 32.4 | 2009 | |
The Proposal | Comedy | Disney | 74 | 314.7 | 2009 | |
The Time Traveler's Wife | Drama | Paramount | 65 | 101.33 | 2009 | |
The Twilight Saga: New Moon | Drama | Summit | 78 | 709.82 | 2009 | |
The Ugly Truth | Comedy | Independent | 68 | 205.3 | 2009 | |
Twilight | Romance | Summit | 82 | 376.661 | 2008 | |
Twilight: Breaking Dawn | Romance | Independent | 68 | 702.17 | 2011 | |
Tyler Perry's Why Did I get Married | Romance | Independent | 47 | 55.862886 | 2007 | |
Valentine's Day | Comedy | Warner Bros. | 54 | 217.57 | 2010 | |
Waiting For Forever | Romance | Independent | 53 | 0.025 | 2011 | |
Waitress | Romance | Independent | 67 | 22.179483 | 2007 | |
WALL-E | Animation | Disney | 89 | 521.283432 | 2008 | |
Water For Elephants | Drama | 20th Century Fox | 72 | 117.094 | 2011 | |
What Happens in Vegas | Comedy | Fox | 72 | 219.367646 | 2008 | |
When in Rome | Comedy | Disney | 44 | 43.04 | 2010 | |
You Will Meet a Tall Dark Stranger | Comedy | Independent | 35 | 26.66 | 2010 | |
Youth in Revolt | Comedy | The Weinstein Company | 52 | 19.62 | 2010 | |
Zack and Miri Make a Porno | Romance | The Weinstein Company | 70 | 41.941 | 2008 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<title>Tree layout</title> | |
</head> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, sans-serif; | |
font-size: 9px; | |
} | |
.links path { | |
fill: none; | |
stroke: #ccc; | |
} | |
</style> | |
<body> | |
<svg width="800" height="920"> | |
<g class="wrapper" transform="translate(20, 20)"> | |
<g class="links"></g> | |
<g class="nodes"></g> | |
</g> | |
</svg> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script> | |
var treeLayout = d3.tree() | |
.size([900, 600]); | |
function link(d) { | |
return "M" + d.y + "," + d.x | |
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x | |
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x | |
+ " " + d.parent.y + "," + d.parent.x; | |
} | |
function make(root) { | |
var nodes = d3.select('.nodes') | |
.selectAll('g.node') | |
.data(root.descendants()); | |
var enteringNodes = nodes.enter() | |
.append('g') | |
.classed('node', true) | |
.attr('transform', function(d) { | |
return 'translate(' + d.y + ',' + d.x + ')'; | |
}); | |
enteringNodes | |
.append('circle') | |
.attr('r', 2); | |
enteringNodes | |
.append('text') | |
.attr('x', 5) | |
.attr('y', 4) | |
.text(function(d) { | |
switch(d.depth) { | |
case 1: | |
case 2: | |
return d.data.key; | |
case 3: | |
return d.data.Film; | |
} | |
return ''; | |
}); | |
var links = d3.select('.links') | |
.selectAll('path') | |
.data(root.descendants().slice(1)); | |
links.enter() | |
.append('path') | |
.attr('d', link); | |
} | |
function ready(err, data) { | |
var nest = d3.nest() | |
.key(function(d) { return d.Genre; }) | |
.key(function(d) { return d['Lead Studio']; }) | |
.entries(data); | |
nest = { | |
key: 'root', | |
values: nest | |
}; | |
var root = d3.hierarchy(nest, function(d) { | |
return d.values; | |
}); | |
treeLayout(root); | |
make(root); | |
} | |
d3.csv('films.csv', ready); | |
</script> | |
</body> | |
</html> |