Working through @mbostock's Duration Histogram using data from 2000's Nickels Hypercritical Length Analysis.
Last active
April 11, 2016 05:25
-
-
Save queuebit/e68ea119e347849910b50b59165a0a4d to your computer and use it in GitHub Desktop.
Hypercritical Histogram
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
license: mit |
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
number | name | released | length_h_m | length_min | |
---|---|---|---|---|---|
75 | Hypercritical 75: Just a Dinosaur | 7/6/2012 | 1h 32m | 92 | |
74 | Hypercritical 74: Everybody Wants to Rule the World | 6/29/2012 | 1h 59m | 119 | |
73 | Hypercritical 73: 22 Degrees | 6/22/2012 | 1h 42m | 102 | |
72 | Hypercritical 72: Seven Levels of Air Quotes | 6/15/2012 | 1h 9m | 69 | |
71 | Hypercritical 71: Bristling With Controls | 6/8/2012 | 1h 46m | 106 | |
70 | Hypercritical 70: Deja Vu | 6/1/2012 | 1h 39m | 99 | |
69 | Hypercritical 69: Sport of Kings | 5/25/2012 | 1h 55m | 115 | |
68 | Hypercritical 68: Patent Hands | 5/18/2012 | 2h 14m | 134 | |
67 | Hypercritical 67: A Pill That Helps with Whatever | 5/11/2012 | 2h 1m | 121 | |
66 | Hypercritical 66: The Housewives of Siracusa County | 5/4/2012 | 2h 6m | 126 | |
65 | Hypercritical 65: Look Right into the Eyes of Your Sweetie | 4/27/2012 | 1h 40m | 100 | |
64 | Hypercritical 64: You Will Die Instantly! | 4/20/2012 | 1h 40m | 100 | |
63 | Hypercritical 63: Talking to the Bear | 4/13/2012 | 1h 45m | 105 | |
62 | Hypercritical 62: A Sack Containing Scum from a Pond | 4/6/2012 | 1h 46m | 106 | |
61 | Hypercritical 61: I Ran Out of Bombs Long Ago | 3/30/2012 | 1h 47m | 107 | |
60 | Hypercritical 60: Reversing the Polarity | 3/23/2012 | 1h 29m | 89 | |
59 | Hypercritical 59: Safari is Apple's Google | 3/16/2012 | 2h 15m | 135 | |
58 | Hypercritical 58: No More Numbers For You / The Four Tuners | 3/9/2012 | 1h 48m | 108 | |
57 | Hypercritical 57: Computational Skeuomorphism | 3/2/2012 | 1h 42m | 102 | |
56 | Hypercritical 56: Belt and Suspenders | 2/24/2012 | 1h 59m | 119 | |
55 | Hypercritical 55: Region of Pain | 2/17/2012 | 1h 29m | 89 | |
54 | Hypercritical 54: Public Service Announcement | 2/11/2012 | 0h 1m | 1 | |
53 | Hypercritical 53: Brad Pitt Gets to Contribute | 2/3/2012 | 1h 33m | 93 | |
52 | Hypercritical 52: Marked for Deletion | 1/27/2012 | 2h 12m | 132 | |
51 | Hypercritical 51: Unjustified Confidence | 1/20/2012 | 1h 22m | 82 | |
50 | Hypercritical 50: Maximum Deflection in All Directions | 1/13/2012 | 1h 45m | 105 | |
49 | Hypercritical 49: Pinching the Harmonica | 1/6/2012 | 2h 15m | 135 | |
48 | Hypercritical 48: Blue Ocean | 12/30/2011 | 2h 3m | 123 | |
47 | Hypercritical 47: Brute Force Attack | 12/23/2011 | 1h 38m | 98 | |
46 | Hypercritical 46: Not Entirely Nefarious | 12/16/2011 | 2h 5m | 125 | |
45 | Hypercritical 45: Star Wars is Not a Blog Post | 12/9/2011 | 1h 47m | 107 | |
44 | Hypercritical 44: A Little Bit More Sad | 11/25/2011 | 1h 11m | 71 | |
43 | Hypercritical 43: The Scorpion and the Frog | 11/18/2011 | 1h 42m | 102 | |
42 | Hypercritical 42: The Wrong Guy | 11/11/2011 | 1h 15m | 75 | |
41 | Hypercritical 41: The Homer | 11/4/2011 | 1h 39m | 99 | |
40 | Hypercritical 40: When The Hobby Light Goes Off | 10/28/2011 | 1h 32m | 92 | |
39 | Hypercritical 39: Quasimodo Backpack | 10/21/2011 | 1h 32m | 92 | |
38 | Hypercritical 38: Virtually Spotless | 10/14/2011 | 1h 27m | 87 | |
37 | Hypercritical 37: A Story of Triumph | 10/7/2011 | 1h 11m | 71 | |
36 | Hypercritical 36: Wedge | 9/30/2011 | 1h 25m | 85 | |
35 | Hypercritical 35: Wrestling an Alligator | 9/23/2011 | 1h 25m | 85 | |
34 | Hypercritical 34: Pride in Craftsmanship | 9/16/2011 | 1h 29m | 89 | |
33 | Hypercritical 33: Square Bracket Colon Smiley | 9/9/2011 | 1h 17m | 77 | |
32 | Hypercritical 32: The Next Big Move | 8/31/2011 | 1h 32m | 92 | |
31 | Hypercritical 31: Strong Arguments for and Against | 8/24/2011 | 1h 21m | 81 | |
30 | Hypercritical 30: Paths in the Grass | 8/17/2011 | 1h 8m | 68 | |
29 | Hypercritical 29: In Too Deep | 8/10/2011 | 1h 20m | 80 | |
28 | Hypercritical 28: Trust But Verify | 7/28/2011 | 1h 23m | 83 | |
27 | Hypercritical 27: Nakedly Optimistic | 7/24/2011 | 1h 36m | 96 | |
26 | Hypercritical 26: White Smoke | 7/13/2011 | 1h 7m | 67 | |
25 | Hypercritical 25: Invisible Software | 7/6/2011 | 1h 16m | 76 | |
24 | Hypercritical 24: Sometimes It Hurts | 7/2/2011 | 1h 12m | 72 | |
23 | Hypercritical 23: No Sentence Left Behind | 6/24/2011 | 1h 42m | 102 | |
22 | Hypercritical 22: I Would Not Build Underground | 6/17/2011 | 1h 17m | 77 | |
21 | Hypercritical 21: Reading Playboy for the Articles | 6/10/2011 | 1h 43m | 103 | |
20 | Hypercritical 20: I've Got Nothing | 6/4/2011 | 0h 46m | 46 | |
19 | Hypercritical 19: Don't Make Me Read | 5/27/2011 | 0h 58m | 58 | |
18 | Hypercritical 18: Worse and More Diverse | 5/20/2011 | 1h 13m | 73 | |
17 | Hypercritical 17: Intruding Gooseneck | 5/13/2011 | 1h 34m | 94 | |
16 | Hypercritical 16: The Soap Opera Effect | 5/6/2011 | 1h 42m | 102 | |
15 | Hypercritical 15: The Bridges of Siracusa County | 4/29/2011 | 1h 43m | 103 | |
14 | Hypercritical 14: A Dark Age of Objective-C | 4/15/2011 | 1h 26m | 86 | |
13 | Hypercritical 13: The Tortoise and the Hare | 4/8/2011 | 1h 24m | 84 | |
12 | Hypercritical 12: Nothing Is So Perfect | 4/1/2011 | 1h 12m | 72 | |
11 | Hypercritical 11: I Am the Steve Jobs of This Sandwich | 3/25/2011 | 1h 18m | 78 | |
10 | Hypercritical 10: Like Giving a Machine Gun to a Baby | 3/18/2011 | 1h 25m | 85 | |
9 | Hypercritical 9: No iLife is an Island | 3/11/2011 | 1h 5m | 65 | |
8 | Hypercritical 8: A Cautionary Tale | 3/4/2011 | 1h 16m | 76 | |
7 | Hypercritical 7: ThunderCats | 2/25/2011 | 1h 30m | 90 | |
6 | Hypercritical 6: Frivolous Things | 2/18/2011 | 1h 43m | 103 | |
5 | Hypercritical 5: Slippery Little Pill | 2/11/2011 | 1h 1m | 61 | |
4 | Hypercritical 4: iOS vs. The World | 2/4/2011 | 1h 4m | 64 | |
3 | Hypercritical 3: The Mouse is Not a Finger | 1/28/2011 | 1h 9m | 69 | |
2 | Hypercritical 2: Backup Vortex | 1/21/2011 | 1h 14m | 74 | |
1 | Hypercritical 1: Dream Crusher | 1/14/2011 | 0h 57m | 57 |
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: 10px sans-serif; | |
} | |
.bar rect { | |
fill: steelblue; | |
shape-rendering: crispEdges; | |
} | |
.bar text { | |
fill: #fff; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: cripEdges; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
// Formatters for counts and times (converting numbers to Dates). | |
var formatCount = d3.format(",.0f"), | |
formatTime = d3.time.format("%H:%M"), | |
formatMinutes = function(d) { return formatTime(new Date(2016, 3, 1, 0, d)); }; | |
var margin = { top: 10, right: 30, bottom: 30, left: 30}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.domain([0,200]) | |
.range([0, width]); | |
// Generate a histogram using twenty uniformly-spaced bins. | |
d3.tsv("hypercritical_durations.tsv", type, function(error, data) { | |
// Map tsv data to only capture the length_min values | |
minutes = data.map(function (d) { return d.length_min }) | |
var h_bins = d3.layout.histogram() | |
.bins(x.ticks(20)) | |
(minutes); | |
var y = d3.scale.linear() | |
.domain([0, d3.max(h_bins, function(d) { return d.y })]) | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.tickFormat(formatMinutes); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var bar = svg.selectAll(".bar") | |
.data(h_bins) | |
.enter().append("g") | |
.attr("class", "bar") | |
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); | |
bar.append("rect") | |
.attr("x", 1) | |
.attr("width", x(h_bins[0].dx) - 1) | |
.attr("height", function(d) { return height - y(d.y); }); | |
bar.append("text") | |
.attr("dy", ".75em") | |
.attr("y", 6) | |
.attr("x", x(h_bins[0].dx) / 2) | |
.attr("text-anchor", "middle") | |
.text(function(d) { return formatCount(d.y); }); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
}); | |
function type(d) { | |
d.value = +d.value; // coerce to number | |
return d; | |
} | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment