Created
September 13, 2015 01:56
-
-
Save tayden/a7723066b3c2fab8eb69 to your computer and use it in GitHub Desktop.
Top 250 IMDB Movies Treemap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| .node { | |
| border: solid 1px black; | |
| font: 10px sans-serif; | |
| line-height: 12px; | |
| overflow: hidden; | |
| position: absolute; | |
| text-indent: 2px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script type="text/javascript" src="treemap.js"></script> | |
| <script type="text/javascript"> | |
| d3.csv("top250.csv", function (error, data){ | |
| if (error) throw error; | |
| var treeChart = treemap("body"); | |
| var margin = {top: 40, right: 10, bottom: 10, left: 10}, | |
| width = 960 - margin.left - margin.right, | |
| height = 4000 - margin.top - margin.bottom; | |
| treeChart | |
| .width(width) | |
| .height(height) | |
| .margin(margin) | |
| .data(data) | |
| .keyAccessor(d => d.Title) | |
| .valueAccessor(d => +d.Votes) | |
| .colorAccessor(d => +d.Rank) | |
| .titleAccessor(d => d.Title + ": " + d.Rank); | |
| treeChart(); | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Votes | Rank | Title | |
|---|---|---|---|
| 1519957 | 9.2 | The Shawshank Redemption (1994) | |
| 1041652 | 9.2 | The Godfather (1972) | |
| 703589 | 9.0 | The Godfather: Part II (1974) | |
| 1495423 | 8.9 | The Dark Knight (2008) | |
| 391599 | 8.9 | 12 Angry Men (1957) | |
| 772813 | 8.9 | Schindler's List (1993) | |
| 1184065 | 8.9 | Pulp Fiction (1994) | |
| 454283 | 8.9 | Il buono il brutto il cattivo (1966) | |
| 1089783 | 8.9 | The Lord of the Rings: The Return of the King (2003) | |
| 1196251 | 8.8 | Fight Club (1999) | |
| 1114283 | 8.8 | The Lord of the Rings: The Fellowship of the Ring (2001) | |
| 710995 | 8.7 | Star Wars: Episode V - The Empire Strikes Back (1980) | |
| 1097707 | 8.7 | Forrest Gump (1994) | |
| 1294125 | 8.7 | Inception (2010) | |
| 614587 | 8.7 | One Flew Over the Cuckoo's Nest (1975) | |
| 981908 | 8.7 | The Lord of the Rings: The Two Towers (2002) | |
| 653651 | 8.7 | Goodfellas (1990) | |
| 1089450 | 8.7 | The Matrix (1999) | |
| 780806 | 8.7 | Star Wars (1977) | |
| 208752 | 8.7 | Shichinin no samurai (1954) | |
| 482801 | 8.6 | Cidade de Deus (2002) | |
| 910050 | 8.6 | Se7en (1995) | |
| 780662 | 8.6 | The Silence of the Lambs (1991) | |
| 666403 | 8.6 | The Usual Suspects (1995) | |
| 245560 | 8.6 | It's a Wonderful Life (1946) | |
| 365190 | 8.6 | La vita Ë bella (1997) | |
| 645233 | 8.6 | LÈon (1994) | |
| 194915 | 8.6 | C'era una volta il West (1968) | |
| 718987 | 8.6 | Interstellar (2014) | |
| 782309 | 8.5 | Saving Private Ryan (1998) | |
| 704491 | 8.5 | American History X (1998) | |
| 363704 | 8.5 | Sen to Chihiro no Kamikakushi (2001) | |
| 354793 | 8.5 | Casablanca (1942) | |
| 593817 | 8.5 | Raiders of the Lost Ark (1981) | |
| 377429 | 8.5 | Psycho (1960) | |
| 94152 | 8.5 | City Lights (1931) | |
| 284368 | 8.5 | Rear Window (1954) | |
| 425946 | 8.5 | Intouchables (2011) | |
| 124059 | 8.5 | Modern Times (1936) | |
| 282090 | 8.5 | Whiplash (2014) | |
| 668495 | 8.5 | Terminator 2: Judgment Day (1991) | |
| 685157 | 8.5 | The Green Mile (1999) | |
| 439233 | 8.5 | The Pianist (2002) | |
| 762751 | 8.5 | Memento (2000) | |
| 775737 | 8.5 | The Departed (2006) | |
| 876223 | 8.5 | Gladiator (2000) | |
| 409008 | 8.5 | Apocalypse Now (1979) | |
| 636253 | 8.5 | Back to the Future (1985) | |
| 125721 | 8.5 | Sunset Blvd. (1950) | |
| 312694 | 8.5 | Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb (1964) | |
| 745687 | 8.5 | The Prestige (2006) | |
| 504127 | 8.5 | Alien (1979) | |
| 559621 | 8.4 | The Lion King (1994) | |
| 108156 | 8.4 | Inside Out (2015/I) | |
| 232624 | 8.4 | Das Leben der Anderen (2006) | |
| 119763 | 8.4 | The Great Dictator (1940) | |
| 134234 | 8.4 | Nuovo Cinema Paradiso (1988) | |
| 541139 | 8.4 | The Shining (1980) | |
| 107623 | 8.4 | Paths of Glory (1957) | |
| 820282 | 8.4 | Django Unchained (2012) | |
| 1013514 | 8.4 | The Dark Knight Rises (2012) | |
| 630163 | 8.4 | WALL∑E (2008) | |
| 744555 | 8.4 | American Beauty (1999) | |
| 118265 | 8.4 | Hotaru no haka (1988) | |
| 442148 | 8.4 | Aliens (1986) | |
| 272094 | 8.4 | Citizen Kane (1941) | |
| 201211 | 8.4 | North by Northwest (1959) | |
| 221863 | 8.4 | Vertigo (1958) | |
| 195440 | 8.4 | Mononoke-hime (1997) | |
| 315941 | 8.4 | Oldeuboi (2003) | |
| 153135 | 8.4 | Das Boot (1981) | |
| 89448 | 8.4 | M (1931) | |
| 565824 | 8.4 | Star Wars: Episode VI - Return of the Jedi (1983) | |
| 197899 | 8.4 | Once Upon a Time in America (1984) | |
| 480531 | 8.4 | Le fabuleux destin d'AmÈlie Poulain (2001) | |
| 54301 | 8.3 | Witness for the Prosecution (1957) | |
| 587959 | 8.3 | Reservoir Dogs (1992) | |
| 478783 | 8.3 | Toy Story 3 (2010) | |
| 663093 | 8.3 | Braveheart (1995) | |
| 497607 | 8.3 | A Clockwork Orange (1971) | |
| 87920 | 8.3 | Double Indemnity (1944) | |
| 451337 | 8.3 | Taxi Driver (1976) | |
| 518026 | 8.3 | Requiem for a Dream (2000) | |
| 191328 | 8.3 | To Kill a Mockingbird (1962) | |
| 172686 | 8.3 | Lawrence of Arabia (1962) | |
| 597718 | 8.3 | Eternal Sunshine of the Spotless Mind (2004) | |
| 432078 | 8.3 | Full Metal Jacket (1987) | |
| 157864 | 8.3 | The Sting (1973) | |
| 243567 | 8.3 | Amadeus (1984) | |
| 83303 | 8.3 | Ladri di biciclette (1948) | |
| 134769 | 8.3 | Singin' in the Rain (1952) | |
| 347577 | 8.3 | Monty Python and the Holy Grail (1975) | |
| 543292 | 8.3 | Snatch. (2000) | |
| 379168 | 8.3 | 2001: A Space Odyssey (1968) | |
| 57032 | 8.3 | The Kid (1921) | |
| 91704 | 8.3 | RashÙmon (1950) | |
| 380837 | 8.3 | L.A. Confidential (1997) | |
| 137859 | 8.3 | Per qualche dollaro in pi˘ (1965) | |
| 545407 | 8.3 | Toy Story (1995) | |
| 75165 | 8.3 | All About Eve (1950) | |
| 97541 | 8.3 | The Apartment (1960) | |
| 768864 | 8.3 | Inglourious Basterds (2009) | |
| 71912 | 8.3 | The Treasure of the Sierra Madre (1948) | |
| 135860 | 8.3 | Jodaeiye Nader az Simin (2011) | |
| 460714 | 8.3 | Indiana Jones and the Last Crusade (1989) | |
| 100100 | 8.3 | Metropolis (1927) | |
| 66324 | 8.3 | YÙjinbÙ (1961) | |
| 103130 | 8.3 | The Third Man (1949) | |
| 864848 | 8.3 | Batman Begins (2005) | |
| 482642 | 8.3 | Scarface (1983) | |
| 158475 | 8.3 | Some Like It Hot (1959) | |
| 251769 | 8.3 | Unforgiven (1992) | |
| 171629 | 8.2 | 3 Idiots (2009) | |
| 577967 | 8.2 | Up (2009) | |
| 314260 | 8.2 | Mad Max: Fury Road (2015) | |
| 213497 | 8.2 | Raging Bull (1980) | |
| 226606 | 8.2 | Der Untergang (2004) | |
| 140632 | 8.2 | Jagten (2012) | |
| 195476 | 8.2 | Chinatown (1974) | |
| 149637 | 8.2 | The Great Escape (1963) | |
| 536197 | 8.2 | Die Hard (1988) | |
| 537428 | 8.2 | Good Will Hunting (1997) | |
| 392914 | 8.2 | Heat (1995) | |
| 90485 | 8.2 | On the Waterfront (1954) | |
| 422006 | 8.2 | El laberinto del fauno (2006) | |
| 70394 | 8.2 | Mr. Smith Goes to Washington (1939) | |
| 134451 | 8.2 | The Bridge on the River Kwai (1957) | |
| 145811 | 8.2 | Tonari no Totoro (1988) | |
| 70205 | 8.2 | Ran (1985) | |
| 59580 | 8.2 | The Gold Rush (1925) | |
| 37279 | 8.2 | Ikiru (1952) | |
| 100345 | 8.2 | Det sjunde inseglet (1957) | |
| 420592 | 8.2 | Blade Runner (1982) | |
| 56667 | 8.2 | Smultronst‰llet (1957) | |
| 111653 | 8.2 | El secreto de sus ojos (2009) | |
| 47112 | 8.2 | The General (1926) | |
| 377959 | 8.2 | Lock Stock and Two Smoking Barrels (1998) | |
| 147367 | 8.2 | The Elephant Man (1980) | |
| 298976 | 8.2 | Casino (1995) | |
| 641714 | 8.2 | The Wolf of Wall Street (2013) | |
| 186068 | 8.2 | Hauru no ugoku shiro (2004) | |
| 293522 | 8.2 | Warrior (2011) | |
| 509381 | 8.2 | Gran Torino (2008) | |
| 711126 | 8.2 | V for Vendetta (2005) | |
| 480863 | 8.2 | The Big Lebowski (1998) | |
| 79272 | 8.2 | Rebecca (1940) | |
| 38449 | 8.1 | Judgment at Nuremberg (1961) | |
| 535389 | 8.1 | A Beautiful Mind (2001) | |
| 109543 | 8.1 | Cool Hand Luke (1967) | |
| 423910 | 8.1 | How to Train Your Dragon (2010) | |
| 212290 | 8.1 | The Deer Hunter (1978) | |
| 195246 | 8.1 | Gone with the Wind (1939) | |
| 402058 | 8.1 | Fargo (1996) | |
| 424960 | 8.1 | Trainspotting (1996) | |
| 57694 | 8.1 | It Happened One Night (1934) | |
| 93842 | 8.1 | Dial M for Murder (1954) | |
| 378532 | 8.1 | Into the Wild (2007) | |
| 459813 | 8.1 | Gone Girl (2014) | |
| 639536 | 8.1 | The Sixth Sense (1999) | |
| 265005 | 8.1 | Rush (2013/I) | |
| 602671 | 8.1 | Finding Nemo (2003) | |
| 102953 | 8.1 | The Maltese Falcon (1941) | |
| 104674 | 8.1 | Mary and Max (2009) | |
| 548387 | 8.1 | No Country for Old Men (2007) | |
| 231287 | 8.1 | The Thing (1982) | |
| 66693 | 8.1 | Incendies (2010) | |
| 657234 | 8.1 | Kill Bill: Vol. 1 (2003) | |
| 240404 | 8.1 | Hotel Rwanda (2004) | |
| 246124 | 8.1 | Life of Brian (1979) | |
| 265903 | 8.1 | Platoon (1986) | |
| 31493 | 8.1 | Le salaire de la peur (1953) | |
| 136514 | 8.1 | Butch Cassidy and the Sundance Kid (1969) | |
| 336057 | 8.1 | There Will Be Blood (2007) | |
| 92970 | 8.1 | Network (1976) | |
| 66203 | 8.1 | Touch of Evil (1958) | |
| 62630 | 8.1 | Les quatre cents coups (1959) | |
| 245784 | 8.1 | Stand by Me (1986) | |
| 368138 | 8.1 | 12 Years a Slave (2013) | |
| 267605 | 8.1 | The Princess Bride (1987) | |
| 172556 | 8.1 | Annie Hall (1977) | |
| 53534 | 8.1 | Persona (1966) | |
| 382257 | 8.1 | The Grand Budapest Hotel (2014) | |
| 157818 | 8.1 | Amores perros (2000) | |
| 96851 | 8.1 | In the Name of the Father (1993) | |
| 431484 | 8.1 | Million Dollar Baby (2004) | |
| 143704 | 8.1 | Ben-Hur (1959) | |
| 56600 | 8.1 | The Grapes of Wrath (1940) | |
| 125347 | 8.1 | Hachi: A Dog's Tale (2009) | |
| 83381 | 8.1 | Kaze no tani no Naushika (1984) | |
| 683338 | 8.1 | Shutter Island (2010) | |
| 37326 | 8.1 | Les diaboliques (1955) | |
| 604231 | 8.1 | Sin City (2005) | |
| 263135 | 8.1 | The Wizard of Oz (1939) | |
| 154065 | 8.1 | Gandhi (1982) | |
| 60172 | 8.1 | Stalker (1979) | |
| 36496 | 8.1 | The Best Years of Our Lives (1946) | |
| 439659 | 8.1 | The Bourne Ultimatum (2007) | |
| 528865 | 8.1 | Donnie Darko (2001) | |
| 70929 | 8.0 | 8Ω (1963) | |
| 52361 | 8.0 | Relatos salvajes (2014) | |
| 86318 | 8.0 | Strangers on a Train (1951) | |
| 530890 | 8.0 | Jurassic Park (1993) | |
| 877280 | 8.0 | The Avengers (2012) | |
| 161616 | 8.0 | Before Sunrise (1995) | |
| 421164 | 8.0 | Twelve Monkeys (1995) | |
| 535747 | 8.0 | The Terminator (1984) | |
| 83493 | 8.0 | Mou gaan dou (2002) | |
| 370066 | 8.0 | Jaws (1975) | |
| 32907 | 8.0 | La battaglia di Algeri (1966) | |
| 389908 | 8.0 | Groundhog Day (1993) | |
| 55948 | 8.0 | Salinui chueok (2003) | |
| 546078 | 8.0 | Guardians of the Galaxy (2014) | |
| 510857 | 8.0 | Monsters Inc. (2001) | |
| 474867 | 8.0 | Harry Potter and the Deathly Hallows: Part 2 (2011) | |
| 26729 | 8.0 | Kumonosu-jÙ (1957) | |
| 38586 | 8.0 | Fanny och Alexander (1982) | |
| 592261 | 8.0 | The Truman Show (1998) | |
| 91123 | 8.0 | Barry Lyndon (1975) | |
| 324093 | 8.0 | Rocky (1976) | |
| 166553 | 8.0 | Dog Day Afternoon (1975) | |
| 341413 | 8.0 | The Imitation Game (2014) | |
| 141033 | 8.0 | Yip Man (2008) | |
| 442940 | 8.0 | The King's Speech (2010) | |
| 72978 | 8.0 | High Noon (1952) | |
| 92216 | 8.0 | La haine (1995) | |
| 127185 | 8.0 | Per un pugno di dollari (1964) | |
| 729397 | 8.0 | Pirates of the Caribbean: The Curse of the Black Pearl (2003) | |
| 67584 | 8.0 | Notorious (1946) | |
| 85624 | 8.0 | Tenk˚ no shiro Rapyuta (1986) | |
| 320985 | 8.0 | Prisoners (2013) | |
| 286609 | 8.0 | The Help (2011) | |
| 50871 | 8.0 | Who's Afraid of Virginia Woolf? (1966) | |
| 88926 | 8.0 | Roman Holiday (1953) | |
| 56325 | 8.0 | Bom yeoreum gaeul gyeoul geurigo bom (2003) | |
| 58838 | 8.0 | The Night of the Hunter (1955) | |
| 43059 | 8.0 | La strada (1954) | |
| 273009 | 8.0 | Beauty and the Beast (1991) | |
| 89207 | 8.0 | Papillon (1973) | |
| 439506 | 8.0 | X-Men: Days of Future Past (2014) | |
| 149915 | 8.0 | Before Sunset (2004) | |
| 41514 | 8.0 | Anatomy of a Murder (1959) | |
| 58660 | 8.0 | The Hustler (1961) | |
| 196820 | 8.0 | The Graduate (1967) | |
| 40178 | 8.0 | Underground (1995) | |
| 61116 | 8.0 | Lagaan: Once Upon a Time in India (2001) | |
| 60359 | 8.0 | The Big Sleep (1946) | |
| 36009 | 8.0 | Gangs of Wasseypur (2012) | |
| 60264 | 8.0 | Tropa de Elite 2: O Inimigo Agora È Outro (2010) | |
| 44253 | 8.0 | La dolce vita (1960) | |
| 28551 | 8.0 | Le samouraÔ (1967) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function treemap(parent){ | |
| // Set default values | |
| var width = 800; | |
| var height = 500; | |
| var margin = {top: 20, right: 0, bottom: 0, left: 20}; | |
| // Generate chart | |
| function _chart(){ | |
| var color = d3.scale.linear().domain([d3.min(_data, i => +i.Rank), 10]).range(['#ffffff', '#000000']); | |
| var treemap = d3.layout.treemap() | |
| .size([_width, _height]) | |
| // .sticky(true) | |
| .value(_valueAccessor); | |
| var div = d3.select(parent).append("div") | |
| .style("position", "relative") | |
| .style("width", (_width + _margin.left + _margin.right) + "px") | |
| .style("height", (_height + _margin.top + _margin.bottom) + "px") | |
| .style("left", _margin.left + "px") | |
| .style("top", _margin.top + "px"); | |
| var node = div.datum({name:"root", children:_data}).selectAll(".node") | |
| .data(treemap.nodes) | |
| .enter().append("div") | |
| .attr("class", "node") | |
| .attr("title", _titleAccessor) | |
| .call(_position) | |
| .style("background", function(d) { return color(+d.Rank); }) | |
| .text(_keyAccessor); | |
| function _position() { | |
| this.style("left", function(d) { return d.x + "px"; }) | |
| .style("top", function(d) { return d.y + "px"; }) | |
| .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) | |
| .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); | |
| } | |
| }; | |
| // Value getters/setters | |
| _chart.width = function(value){ | |
| if (!arguments.length) return _width; | |
| _width = value; | |
| return _chart; | |
| } | |
| _chart.height = function(value){ | |
| if (!arguments.length) return _height; | |
| _height = value; | |
| return _chart; | |
| } | |
| _chart.margin = function(value){ | |
| if (!arguments.length) return _margin; | |
| _margin = value; | |
| return _chart; | |
| } | |
| _chart.data = function(value){ | |
| if (!arguments.length) return _data; | |
| _data = value; | |
| return _chart; | |
| } | |
| _chart.keyAccessor = function(value){ | |
| if (!arguments.length) return _keyAccessor; | |
| _keyAccessor = value; | |
| return _chart; | |
| } | |
| _chart.valueAccessor = function(value){ | |
| if (!arguments.length) return _valueAccessor; | |
| _valueAccessor = value; | |
| return _chart; | |
| } | |
| _chart.colorAccessor = function(value){ | |
| if (!arguments.length) return _colorAccessor; | |
| _colorAccessor = value; | |
| return _chart; | |
| } | |
| _chart.titleAccessor = function(value){ | |
| if (!arguments.length) return _titleAccessor; | |
| _titleAccessor = value; | |
| return _chart; | |
| } | |
| // Return closure | |
| return _chart; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment