Song Length Histogram

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
]

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>