Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/all_small.json

Last active April 30, 2016 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 tmcw/3808797 to your computer and use it in GitHub Desktop.
Save tmcw/3808797 to your computer and use it in GitHub Desktop.
Download ZIP
Song Length Histogram
Raw
all_small.json
[
306,
336,
59,
62,
662,
332,
332,
332,
467,
421,
327,
195,
246,
214,
287,
73,
224,
194,
194,
194,
315,
274,
105,
0,
214,
287,
73,
73,
73,
224,
194,
315,
315,
315,
421,
327,
311,
195,
195,
195,
275,
275,
275,
203,
246,
339,
54,
275,
197,
246,
379,
246,
344,
88,
195,
239,
292,
292,
0,
0,
281,
167,
145,
161,
214,
208,
428,
428,
428,
161,
297,
197,
286,
93,
388,
211,
271,
271,
200,
239,
301,
301,
0,
0,
141,
166,
168,
168,
0,
0,
141,
248,
391,
283,
346,
122,
347,
184,
522,
522,
294,
186,
186,
219,
271,
320,
709,
259,
220,
184,
182,
196,
531,
196,
310,
277,
268,
246,
254,
183,
647,
647,
183,
161,
278,
155,
228,
301,
324,
324,
93,
562,
562,
286,
388,
388,
388,
167,
357,
221,
161,
210,
248,
252,
176,
170,
170,
161,
167,
167,
386,
130,
130,
176,
0,
187,
267,
180,
197,
150,
259,
304,
212,
212,
642,
256,
642,
642,
191,
191,
255,
221,
245,
276,
210,
212,
291,
291,
291,
258,
204,
175,
175,
257,
182,
295,
85,
85,
198,
229,
229,
411,
113,
375,
244,
374,
169,
375,
89,
224,
442,
283,
55,
280,
129,
377,
244,
384,
328,
279,
288,
259,
280,
319,
262,
284,
286,
276,
226,
192,
370,
364,
262,
241,
519,
217,
318,
307,
303,
548,
456,
489,
764,
730,
640,
0,
0,
0,
155,
337,
181,
321,
180,
270,
299,
216,
237,
0,
155,
226,
247,
199,
283,
318,
155,
277,
252,
277,
260,
260,
260,
208,
261,
275,
221,
312,
312,
207,
132,
180,
187,
164,
164,
164,
301,
115,
298,
186,
93,
191,
0,
200,
347,
240,
202,
202,
0,
93,
112,
302,
21,
134,
294,
522,
294,
186,
219,
271,
320,
320,
141,
212,
212,
212,
180,
280,
194,
260,
285,
130,
220,
220,
131,
404,
480,
301,
296,
310,
144,
326,
175,
387,
1535,
1535,
1535,
1535,
1535,
0,
131,
178,
245,
216,
211,
135,
251,
182,
204,
223,
245,
324,
116,
293,
352,
262,
215,
375,
248,
248,
158,
176,
157,
226,
185,
140,
184,
286,
246,
165,
186,
96,
175,
222,
222,
222,
271,
199,
270,
216,
216,
0,
0,
274,
315,
194,
315,
194,
224,
73,
287,
214,
248,
335,
292,
239,
195,
88,
344,
246,
379,
246,
197,
275,
54,
571,
274,
274,
274,
315,
315,
315,
194,
194,
0,
0,
180,
263,
483,
269,
265,
214,
269,
253,
209,
244,
196,
208,
265,
53,
110,
240,
250,
274,
225,
268,
320,
492,
492,
492,
501,
427,
427,
0,
0,
265,
265,
265,
242,
128,
177,
202,
161,
242,
158,
270,
270,
293,
236,
217,
98,
302,
179,
158,
290,
362,
177,
168,
47,
696,
696,
696,
374,
430,
618,
618,
415,
245,
245,
426,
426,
158,
261,
379,
350,
153,
225,
145,
659,
659,
659,
250,
212,
212,
212,
176,
413,
0,
259,
265,
265,
265,
207,
184,
347,
347,
0,
339,
246,
203,
275,
195,
311,
327,
327,
327,
421,
307,
467,
467,
467,
332,
174,
166,
220,
248,
199,
199,
199,
200,
152,
201,
201,
201,
18,
131,
162,
162,
162,
154,
164,
49,
145,
45,
223,
52,
48,
140,
265,
265,
265,
265,
236,
285,
185,
174,
174,
174,
166,
220,
248,
248,
248,
296,
107,
107,
198,
195,
208,
337,
337,
337,
165,
134,
138,
195,
215,
233,
13,
177,
99,
36,
50,
99,
84,
113,
91,
99,
81,
105,
115,
115,
115,
61,
77,
71,
107,
119,
114,
80,
54,
65,
78,
76,
75,
84,
61,
77,
88,
100,
72,
190,
190,
295,
194,
288,
291,
291,
156,
211,
205,
165,
296,
176,
176,
0,
0,
224,
240,
169,
254,
166,
250,
186,
168,
275,
298,
298,
298,
385,
385,
385,
307,
307,
325,
331,
333,
333,
333,
353,
353,
353,
86,
86,
86,
284,
196,
306,
199,
198,
269,
209,
86,
284,
196,
115,
250,
194,
206,
299,
122,
251,
245,
87,
245,
245,
158,
217,
155,
214,
175,
175,
175,
168,
161,
161,
161,
161,
147,
162,
141,
167,
166,
174,
169,
151,
166,
176,
152,
173,
168,
160,
149,
143,
143,
143,
160,
161,
136,
136,
136,
129,
176,
209,
265,
214,
269,
253,
253,
253,
209,
244,
196,
208,
0,
0,
348,
229,
229,
301,
301,
301,
301,
0,
0,
250,
240,
80,
189,
240,
240,
282,
290,
190,
234,
234,
234,
274,
280,
232,
316,
267,
262,
208,
250,
240,
191,
263,
263,
244,
259,
128,
221,
221,
196,
155,
149,
44,
213,
253,
235,
184,
230,
244,
253,
229,
233,
233,
196,
155,
149,
44,
213,
244,
97,
107,
144,
312,
312,
312,
259,
275,
234,
128,
221,
316,
149,
145,
97,
79,
105,
105,
105,
350,
153,
225,
145,
659,
659,
0,
0,
224,
214,
269,
253,
209,
244,
196,
196,
196,
208,
265,
53,
110,
120,
240,
250,
274,
274,
0,
480,
0,
0,
0,
189,
263,
290,
290,
275,
275,
314,
314,
314,
150,
155,
199,
243,
206,
319,
276,
205,
141,
318,
217,
348,
155,
272,
300,
188,
232,
232,
232,
214,
265,
208,
196,
244,
209,
253,
269,
214,
265,
209,
215,
176,
93,
212,
156,
110,
290,
295,
241,
280,
229,
200,
271,
307,
662,
174,
298,
280,
425,
280,
233,
179,
314,
243,
166,
254,
250,
166,
186,
293,
352,
176,
253,
489,
262,
194,
224,
194,
73,
194,
350,
261,
430,
269,
265,
237,
316,
258,
281,
114,
169,
169,
156,
184,
253,
207,
221,
180,
292,
186,
522,
302,
250,
66,
0,
66,
282,
300,
300,
300,
173,
172,
269,
251,
272,
298,
262,
262,
262,
280,
55,
283,
442,
224,
224,
224,
89,
375,
169,
374,
244,
375,
113,
411,
183,
198,
194,
228,
199,
201,
163,
163,
163,
163,
163,
248,
248,
248,
231,
197,
208,
268,
180,
217,
184,
184,
317,
118,
292,
261,
273,
238,
0,
0,
156,
321,
61,
258
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.bar rect {
fill: magenta;
shape-rendering: crispEdges;
}
.bar text {
fill: #fff;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
<script>
d3.json('all_small.json', function(values) {
// A formatter for counts.
var formatTick = function(x) {
var minutes = Math.round((x) / 60);
return minutes + ' minutes';
};
var formatCount = d3.format(",.0f");
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 640 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, d3.max(values)])
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
.bins(x.ticks(20))
(values);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(formatTick)
.orient("bottom");
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(data)
.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(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
.attr("x", x(data[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);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment