Last active
March 17, 2018 20:54
-
-
Save JulienAssouline/b98116bb991e13beb5418c45a2e64a14 to your computer and use it in GitHub Desktop.
Waffle Chart
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<style type="text/css"> | |
div.tooltip { | |
position: absolute; | |
text-align: left; | |
width: 190px; | |
height: 45px; | |
padding: 5px; | |
font: 14px sans-serif; | |
background: white; | |
border: rgba(0,0,0,0.3) solid 1px; | |
pointer-events: none; | |
opacity: 0.5; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var w = 1000 | |
var h = 800 | |
var numCols = 5; | |
var margin = { | |
right: 40, | |
left: 40, | |
top: 70, | |
bottom: 40 | |
} | |
var width = w - margin.right - margin.left; | |
var height = h - margin.top - margin.bottom; | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("id", "chart") | |
.attr("width", w) | |
.attr("height", h) | |
.append("g") | |
.attr("transform", "translate(0" + margin.left + "," + margin.top + ")"); | |
var div = d3.select("body") | |
.append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0) | |
d3.csv("lead_actors_actress_race - Sheet1.csv", function(error, data){ | |
var race = d3.nest() | |
.key(function(d){ return d.Male_race }) | |
.entries(data) | |
console.log(race) | |
svg.append("text") | |
.attr("x", 0) | |
.attr("y", -30) | |
.text("White") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
svg.append("text") | |
.attr("x", 210) | |
.attr("y", -30) | |
.text("Black") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
svg.append("text") | |
.attr("x", 410) | |
.attr("y", -30) | |
.html("Hispanic or ") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
svg.append("text") | |
.attr("x", 410) | |
.attr("y", -10) | |
.html("Latino") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
svg.append("text") | |
.attr("x", 610) | |
.attr("y", -30) | |
.html("Mixed") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
svg.append("text") | |
.attr("x", 810) | |
.attr("y", -30) | |
.html("Asian") | |
.style("font-weight", "bold") | |
.style("font-size", 20) | |
.style("font-family", "Helvetica") | |
var plots = svg.selectAll("g") | |
.data(race) | |
.enter() | |
.append("g") | |
.attr("transform", function(d, i){ | |
if(d.key == "Hispanic or Latino"){ | |
return "translate(410," + ((i * 0)) + ")" | |
} | |
if(d.key == "Mixed"){ | |
return "translate(610," + ((i * 0)) + ")" | |
} | |
if(d.key == "Black"){ | |
return "translate(210," + ((i * 0)) + ")" | |
} | |
else { | |
"translate(10," + ((i * 150)) + ")" | |
} | |
}) | |
plots.selectAll(".rect") | |
.data(function(d){ return d.values}) | |
.enter() | |
.append("rect") | |
.attr("width", 22) | |
.attr("height", 22) | |
.attr("x", function(d, i){ | |
var colIndex = i % numCols | |
return colIndex * 24 | |
}) | |
.attr("y", function(d, i){ | |
var rowIndex = Math.floor(i/numCols) | |
return rowIndex * 24 | |
}) | |
.attr("r", 6) | |
.style("fill", "#e2c642") | |
.style("stroke", "none") | |
.on("mouseover", function(d){ | |
div.transition() | |
.duration(100) | |
.style("opacity", 1) | |
var element = d3.select(this) | |
element.style("fill", "Black") | |
div.html("<span style = 'font-weight: bold'>" + d["Actor leading role"] + "</span>" + "<br>" + "<span style = 'font-style: italic'>" + d.Movie_male + " " + "(" + d.Year + ")" + "</span>") | |
.style("font-family", "Helvetica") | |
div.style("visibility", "visible") | |
.style("left", (d3.event.pageX - 20) + "px") | |
.style("top", (d3.event.pageY - 35) + "px") | |
}) | |
.on("mousemove", function(d){ | |
div.style("left", (d3.event.pageX - 20) + "px") | |
.style("top", (d3.event.pageY - 65) + "px") | |
}) | |
.on("mouseout", function(d){ | |
div.transition() | |
.duration(500) | |
div.style("visibility", "hidden") | |
var element = d3.select(this) | |
element.style("fill", "#e2c642") | |
}) | |
}) | |
</script> | |
</body> | |
</html> |
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
Actor leading role | Movie_male | Year | Actress in leading role | Movie_female | Male_race | Female_race | |
---|---|---|---|---|---|---|---|
Emil Jannings | The Last Command & The Way of All Flesh | 1927/28 | Janet Gaynor | 7th Heaven, Street Angel, Sunrise | White | White | |
Warner Baxter | In Old Arizona | 1928/29 | Mary Pickford | Coquette | White | White | |
George Arliss | Disraeli | 1929/30 | Norma Shearer | The Divorcee | White | White | |
Lionel Barrymore | A Free Soul | 1930/31 | Marie Dressler | Min and Bill | White | White | |
Wallace Beery | The Champ | 1931/32 | Helen Hayes | The Sin of Madelon Claudet | White | White | |
Fredric March | Dr. Jekyll and Mr. Hyde | 1931/32 | Katharine Hepburn | Morning Glory | White | White | |
Charles Laughton | The Private Life of Henry VIII | 1932/33 | Claudette Colbert | It Happened One Night | White | White | |
Clark Gable | It Happened One Night | 1934 | Bette Davis | Dangerous | White | White | |
Victor McLaglen | The Informer | 1935 | Luise Rainer | The Great Ziegfeld | White | White | |
Paul Muni | The Story of Louis Pasteur | 1936 | Luise Rainer | The Good Earth | White | White | |
Spencer Tracy | Captains Courageous | 1937 | Bette Davis | Jezebel | White | White | |
Spencer Tracy | Boys Town | 1938 | Vivien Leigh | Gone with the Wind | White | White | |
Robert Donat | Goodbye, Mr. Chips | 1939 | Ginger Rogers | Kitty Foyle | White | White | |
James Stewart | The Philadelphia Story | 1940 | Joan Fontaine | Suspicion | White | White | |
Gary Cooper | Sergeant York | 1941 | Greer Garson | Mrs. Miniver | White | White | |
James Cagney | Yankee Doodle Dandy | 1942 | Jennifer Jones | The Song of Bernadette | White | White | |
Paul Lukas | Watch on the Rhine | 1943 | Ingrid Bergman | Gaslight | White | White | |
Bing Crosby | Going My Way | 1944 | Joan Crawford | Mildred Pierce | White | White | |
Ray Milland | The Lost Weekend | 1945 | Olivia de Havilland | To Each His Own | White | White | |
Fredric March | The Best Years of Our Lives | 1946 | Loretta Young | The Farmer's Daughter | White | White | |
Ronald Colman | A Double Life | 1947 | Jane Wyman | Johnny Belinda | White | White | |
Laurence Olivier | Hamlet | 1948 | Olivia de Havilland | The Heiress | White | White | |
Broderick Crawford | All the King's Men | 1949 | Judy Holliday | Born Yesterday | White | White | |
José Ferrer | Cyrano de Bergerac | 1950 | Vivien Leigh | A Streetcar Named Desire | Hispanic or Latino | White | |
Humphrey Bogart | The African Queen | 1951 | Shirley Booth | Come Back, Little Sheba | White | White | |
Gary Cooper | High Noon | 1952 | Audrey Hepburn | Roman Holiday | White | White | |
William Holden | Stalag 17 | 1953 | Grace Kelly | The Country Girl | White | White | |
Marlon Brando | On the Waterfront | 1954 | Anna Magnani | The Rose Tattoo | White | White | |
Ernest Borgnine | Marty | 1955 | Ingrid Bergman | Anastasia | White | White | |
Yul Brynner | The King and I | 1956 | Joanne Woodward | The Three Faces of Eve | White | White | |
Alec Guinness | The Bridge on the River Kwai | 1957 | Susan Hayward | I Want to Live! | White | White | |
David Niven | Separate Tables | 1958 | Simone Signoret | Room at the Top | White | White | |
Charlton Heston | Ben-Hur | 1959 | Elizabeth Taylor | Butterfield 8 | White | White | |
Burt Lancaster | Elmer Gantry | 1960 | Sophia Loren | Two Women | White | White | |
Maximilian Schell | Judgment at Nuremberg | 1961 | Anne Bancroft | The Miracle Worker | White | White | |
Gregory Peck | To Kill a Mockingbird | 1962 | Patricia Neal | Hud | White | White | |
Sidney Poitier | Lilies of the Field | 1963 | Julie Andrews | Mary Poppins | Black | White | |
Rex Harrison | My Fair Lady | 1964 | Julie Christie | Darling | White | White | |
Lee Marvin | Cat Ballou | 1965 | Elizabeth Taylor | Who's Afraid of Virginia Woolf? | White | White | |
Paul Scofield | A Man for All Seasons | 1966 | Katharine Hepburn | Guess Who's Coming to Dinner | White | White | |
Rod Steiger | In the Heat of the Night | 1967 | Katharine Hepburn | The Lion in Winter | White | White | |
Cliff Robertson | Charly | 1968 | Barbra Streisand | Funny Girl | White | White | |
John Wayne | True Grit | 1969 | Maggie Smith | The Prime of Miss Jean Brodie | White | White | |
George C. Scott | Patton | 1970 | Glenda Jackson | Women in Love | White | White | |
Gene Hackman | The French Connection | 1971 | Jane Fonda | Klute | White | White | |
Marlon Brando | The Godfather | 1972 | Liza Minnelli | Cabaret | White | White | |
Jack Lemmon | Save the Tiger | 1973 | Glenda Jackson | A Touch of Class | White | White | |
Art Carney | Harry and Tonto | 1974 | Ellen Burstyn | Alice Doesn't Live Here Anymore | White | White | |
Jack Nicholson | One Flew over the Cuckoo's Nest | 1975 | Louise Fletcher | One Flew over the Cuckoo's Nest | White | White | |
Peter Finch | Network | 1976 | Faye Dunaway | Network | White | White | |
Richard Dreyfuss | The Goodbye Girl | 1977 | Diane Keaton | Annie Hall | White | White | |
Jon Voight | Coming Home | 1978 | Jane Fonda | Coming Home | White | White | |
Dustin Hoffman | Kramer vs. Kramer | 1979 | Sally Field | Norma Rae | White | White | |
Robert De Niro | Raging Bull | 1980 | Sissy Spacek | Coal Miner's Daughter | White | White | |
Henry Fonda | On Golden Pond | 1981 | Katharine Hepburn | On Golden Pond | White | White | |
Ben Kingsley | Gandhi | 1982 | Meryl Streep | Sophie's Choice | Mixed | White | |
Robert Duvall | Tender Mercies | 1983 | Shirley MacLaine | Terms of Endearment | White | White | |
F. Murray Abraham | Amadeus | 1984 | Sally Field | Places in the Heart | Mixed | White | |
William Hurt | Kiss of the Spider Woman | 1985 | Geraldine Page | The Trip to Bountiful | White | White | |
Paul Newman | The Color of Money | 1986 | Marlee Matlin | Children of a Lesser God | White | White | |
Michael Douglas | Wall Street | 1987 | Cher | Moonstruck | White | White | |
Dustin Hoffman | Rain Man | 1988 | Jodie Foster | The Accused | White | White | |
Daniel Day Lewis | My Left Foot | 1989 | Jessica Tandy | Driving Miss Daisy | White | White | |
Jeremy Irons | Reversal of Fortune | 1990 | Kathy Bates | Misery | White | White | |
Anthony Hopkins | The Silence of the Lambs | 1991 | Jodie Foster | The Silence of the Lambs | White | White | |
Al Pacino | Scent of a Woman | 1992 | Emma Thompson | Howards End | White | White | |
Tom Hanks | Philadelphia | 1993 | Holly Hunter | The Piano | White | White | |
Tom Hanks | Forrest Gump | 1994 | Jessica Lange | Blue Sky | White | White | |
Nicolas Cage | Leaving Las Vegas | 1995 | Susan Sarandon | Dead Man Walking | White | White | |
Geoffrey Rush | Shine | 1996 | Frances McDormand | Fargo | White | White | |
Jack Nicholson | As Good as It Gets | 1997 | Helen Hunt | As Good as It Gets | White | White | |
Roberto Benigni | Life Is Beautiful | 1998 | Gwyneth Paltrow | Shakespeare in Love | White | White | |
Kevin Spacey | American Beauty | 1999 | Hilary Swank | Boys Don't Cry | White | White | |
Russell Crowe | Gladiator | 2000 | Julia Roberts | Erin Brockovich | White | White | |
Denzel Washington | Training Day | 2001 | Halle Berry | Monster's Ball | Black | Mixed | |
Adrien Brody | The Pianist | 2002 | Nicole Kidman | The Hours | White | White | |
Sean Penn | Mystic River | 2003 | Charlize Theron | Monster | White | White | |
Jamie Foxx | Ray | 2004 | Hilary Swank | Million Dollar Baby | Black | White | |
Philip Seymour Hoffman | Capote | 2005 | Reese Witherspoon | Walk the Line | White | White | |
Forest Whitaker | The Last King of Scotland | 2006 | Helen Mirren | The Queen | Black | White | |
Daniel Day-Lewis | There Will Be Blood | 2007 | Marion Cotillard | La Vie en Rose | White | White | |
Sean Penn | Milk | 2008 | Kate Winslet | The Reader | White | White | |
Jeff Bridges | Crazy Heart | 2009 | Sandra Bullock | The Blind Side | White | White | |
Colin Firth | The King's Speech | 2010 | Natalie Portman | Black Swan | White | White | |
Jean Dujardin | The Artist | 2011 | Meryl Streep | The Iron Lady | White | White | |
Daniel Day-Lewis | Lincoln | 2012 | Jennifer Lawrence | Silver Linings Playbook | White | White | |
Matthew McConaughey | Dallas Buyers Club | 2013 | Cate Blanchett | Blue Jasmine | White | White | |
Eddie Redmayne | The Theory of Everything | 2014 | Julianne Moore | Still Alice | White | White | |
Leonardo DiCaprio | The Revenant | 2015 | Brie Larson | Room | White | White | |
Casey Affleck | Manchester by the Sea | 2016 | Emma Stone | La La Land | White | White |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment