Skip to content

Instantly share code, notes, and snippets.

@rdinnager
Last active September 14, 2015 05:21
Show Gist options
  • Save rdinnager/9b75c0dd3d6125b040a0 to your computer and use it in GitHub Desktop.
Save rdinnager/9b75c0dd3d6125b040a0 to your computer and use it in GitHub Desktop.
Dynamic d3 barchart of @midnight contestants
player Gender hits first second third total simple.points image image_ht image_wd
Kumail Nanjiani M 404000 4 2 0 6 0.833333333333333 https://duckduckgo.com/i/b7d0c4ff.jpg 200 164
Andy Daly M 182000 2 3 1 6 0.583333333333333 https://duckduckgo.com/i/ff655da8.jpg 200 133
Kyle Kinane M 190000 7 1 2 10 0.75 https://duckduckgo.com/i/cb420bdf.jpg 200 300
Kristen Schaal F 512000 2 1 1 4 0.625 https://duckduckgo.com/i/0cf592c2.jpg 200 150
Patton Oswalt M 747000 1 2 0 3 0.666666666666667 https://duckduckgo.com/i/bbfa97b3.jpg 200 168
Matt Besser M 167000 3 3 1 7 0.642857142857143 https://duckduckgo.com/i/804ac973.jpg 200 100
Moshe Kasher M 107000 5 3 1 9 0.722222222222222 https://duckduckgo.com/i/122b4834.jpg 200 200
Jonah Ray M 160000 3 5 2 10 0.55 https://duckduckgo.com/i/09b947a3.jpg 200 310
Ron Funches M 154000 11 2 0 13 0.923076923076923 https://duckduckgo.com/i/d6db36c0.jpg 200 143
Paul F. Tompkins M 407000 7 5 1 13 0.730769230769231 https://duckduckgo.com/i/e9729043.jpg 200 127
Kurt Braunohler M 178000 4 7 2 13 0.576923076923077 https://duckduckgo.com/i/40f87c62.jpg 200 148
David Koechner M 426000 1 3 0 4 0.625 https://duckduckgo.com/i/c5fd5365.jpg 200 133
Neal Brennan M 189000 4 0 1 5 0.8 https://duckduckgo.com/i/1e9c9bab.jpg 200 300
Paul Scheer M 424000 3 4 2 9 0.555555555555556 https://duckduckgo.com/i/3093eac9.jpg 200 276
Doug Benson M 395000 8 11 0 19 0.710526315789474 https://duckduckgo.com/i/e6f68170.jpg 200 151
Arden Myrin F 189000 3 4 1 8 0.625 https://duckduckgo.com/i/ac2cfb69.jpg 200 132
Jon Daly M 209000 4 0 2 6 0.666666666666667 https://duckduckgo.com/i/0cbec28c.jpg 184 162
Steve Agee M 133000 4 6 2 12 0.583333333333333 https://duckduckgo.com/i/294288de.jpg 200 167
Riki Lindhome F 343000 1 2 0 3 0.666666666666667 https://duckduckgo.com/i/bd8b96dd.jpg 200 170
Jason Sklar M 59300 3 4 3 10 0.5 https://duckduckgo.com/i/34ccb4bb.jpg 200 268
Dana Gould M 202000 2 1 0 3 0.833333333333333 https://duckduckgo.com/i/86525e05.jpg 200 200
Hannibal Buress M 597000 3 0 0 3 1 https://duckduckgo.com/i/f87c9398.jpg 200 189
Brett Gelman M 166000 4 2 1 7 0.714285714285714 https://duckduckgo.com/i/9bb566af.jpg 200 161
Natasha Leggero F 547000 3 1 4 8 0.4375 https://duckduckgo.com/i/e03076ba.jpg 200 300
Grace Helbig F 760000 3 2 2 7 0.571428571428571 https://duckduckgo.com/i/10514be5.jpg 200 200
Randy Sklar M 51300 4 5 1 10 0.65 https://duckduckgo.com/i/34ccb4bb.jpg 200 268
Maria Bamford F 323000 1 1 2 4 0.375 https://duckduckgo.com/i/62e3d8b1.jpg 200 150
Rob Huebel M 266000 3 4 0 7 0.714285714285714 https://duckduckgo.com/i/5b7a7391.jpg 200 216
Rhys Darby M 3e+05 4 1 2 7 0.642857142857143 https://duckduckgo.com/i/a7beebf5.jpg 200 165
James Adomian M 114000 1 0 4 5 0.2 https://duckduckgo.com/i/c7387b56.jpg 200 168
Mamrie Hart F 388000 2 2 2 6 0.5 https://duckduckgo.com/i/30fd6ac0.jpg 200 197
Aisha Tyler F 623000 3 0 0 3 1 https://duckduckgo.com/i/fe52ebce.jpg 200 144
Mike Phirman M 30400 2 1 0 3 0.833333333333333 https://duckduckgo.com/i/ba972a25.jpg 200 296
Jen Kirkman F 244000 4 7 1 12 0.625 https://duckduckgo.com/i/660e0c9c.jpg 200 150
Rob Riggle M 453000 1 3 1 5 0.5 https://duckduckgo.com/i/0c20f5c0.jpg 200 135
Janet Varney F 166000 2 0 1 3 0.666666666666667 https://duckduckgo.com/i/35119c07.jpg 200 136
Brandon Johnson M 424000 3 0 1 4 0.75 https://duckduckgo.com/i/336ee66a.jpg 200 85
John Hodgman M 409000 1 1 3 5 0.3 https://duckduckgo.com/i/95306ac7.jpg 200 133
Adam Cayton-Holland M 31100 1 1 1 3 0.5 https://duckduckgo.com/i/1d5e1c47.jpeg 200 129
Heather Anne Campbell F 36300 2 2 0 4 0.75 https://duckduckgo.com/i/b25827a9.jpg 200 132
Tom Rhodes M 207000 1 1 1 3 0.5 https://duckduckgo.com/i/af694210.jpg 200 133
Wil Wheaton M 931000 2 2 0 4 0.75 https://duckduckgo.com/i/beec8c3f.jpg 200 143
Margaret Cho F 1220000 1 1 1 3 0.5 https://duckduckgo.com/i/9bf96542.jpg 200 151
Marc Maron M 659000 2 2 0 4 0.75 https://duckduckgo.com/i/67a755b9.jpg 200 152
Rory Scovel M 115000 1 1 1 3 0.5 https://duckduckgo.com/i/afbf18b7.jpg 200 300
Mary Lynn Rajskub F 446000 1 1 2 4 0.375 https://duckduckgo.com/i/adfa0adb.jpg 200 159
Judah Friedlander M 331000 1 2 0 3 0.666666666666667 https://duckduckgo.com/i/7fe7a802.jpg 200 150
Michael Ian Black M 428000 2 1 1 4 0.625 https://duckduckgo.com/i/23b50e00.jpg 200 130
Jimmy Pardo M 170000 1 2 2 5 0.4 https://duckduckgo.com/i/3ba9ae5a.jpg 200 138
Hannah Hart F 434000 1 1 1 3 0.5 https://duckduckgo.com/i/82ee4423.jpg 200 152
Brian Posehn M 386000 1 1 2 4 0.375 https://duckduckgo.com/i/516228af.jpg 200 143
Nick Thune M 159000 1 3 1 5 0.5 https://duckduckgo.com/i/fe26caa9.jpg 200 250
Julie Klausner F 203000 1 1 1 3 0.5 https://duckduckgo.com/i/03ace5fa.jpg 200 150
Scott Aukerman M 258000 0 5 1 6 0.416666666666667 https://duckduckgo.com/i/b0e7c717.jpg 200 133
Greg Proops M 310000 0 4 2 6 0.333333333333333 https://duckduckgo.com/i/d036c84d.jpg 200 133
Nick Swardson M 439000 0 1 2 3 0.166666666666667 https://duckduckgo.com/i/aa2964e0.jpg 200 133
Rich Fulcher M 90600 0 3 1 4 0.375 https://duckduckgo.com/i/5a6deead.jpg 200 226
Todd Barry M 320000 0 1 2 3 0.166666666666667 https://duckduckgo.com/i/816308ca.jpg 200 188
Kerri Kenney-Silver F 41800 0 3 1 4 0.375 https://duckduckgo.com/i/cb9bcb43.jpg 200 145
Al Madrigal M 178000 0 1 3 4 0.125 https://duckduckgo.com/i/b9220a7c.jpg 200 147
Brent Morin M 116000 0 0 3 3 0 https://duckduckgo.com/i/dfe3d06a.jpg 200 300
Kate Micucci F 382000 0 2 1 3 0.333333333333333 https://duckduckgo.com/i/fb4c0fc4.png 200 179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Winners, Runners-ups, and Losers on @midnight</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
}
svg {
background-color: white;
}
rect:hover {
stroke: black;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 12px;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 820;
var h = 1200;
var padding = [40, 30, 40, 140];
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(3);
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("@midnight_freq_players.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.total, +b.total);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.total;
}) ]);
heightScale.domain(data.map(function(d) { return d.player; } ));
var bars = svg.selectAll("g")
.data(data)
.enter()
.append("g");
bars.append("rect")
.attr("class", "rect1")
.attr("x", padding[3])
.attr("y", function(d){
return heightScale(d.player);
})
.attr("width", function(d){
return widthScale(+d.first)
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#6699FF")
.append("title")
.text(function(d) {
return d.player + " - Number of Wins: " + d.first;
});
bars.append("rect")
.attr("class", "rect2")
.attr("x", function(d){
return padding[3] + widthScale(+d.first);
})
.attr("y", function(d){
return heightScale(d.player);
})
.attr("width", function(d){
return widthScale(+d.second)
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#FF9900")
.append("title")
.text(function(d) {
return d.player + " - Number of Runner-up Finishes: " + d.second;
});
bars.append("rect")
.attr("class", "rect3")
.attr("x", function(d){
return padding[3] + widthScale(+d.first + +d.second);
})
.attr("y", function(d){
return heightScale(d.player);
})
.attr("width", function(d){
return widthScale(+d.third)
})
.attr("height", heightScale.rangeBand())
.attr("fill", "#CC0000")
.append("title")
.text(function(d) {
return d.player + " - Number of Last Place Finishes: " + d.third;
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment