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> |
| �PNG | |