Skip to content

Instantly share code, notes, and snippets.

@JulienAssouline

JulienAssouline/index.html

Last active March 17, 2018 20:54
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 JulienAssouline/b98116bb991e13beb5418c45a2e64a14 to your computer and use it in GitHub Desktop.
Save JulienAssouline/b98116bb991e13beb5418c45a2e64a14 to your computer and use it in GitHub Desktop.
Download ZIP
Waffle Chart
Raw
index.html
<!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>
Raw
lead_actors_actress_race - Sheet1.csv
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