D3 Examples - Github DMCA Reports

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            font: 14px sans-serif;
        }
        .axis path, .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis path{
            fill: none;
            stroke: none;
        }
        rect {
            fill: steelblue;
        }
    </style>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<body>
<div id="graph"></div>
<script>
​
var size = { width: 1000, height: 450 };
var x = d3.time.scale();
var y = d3.scale.linear();
var dateParser = d3.time.format("%Y").parse;
var graph = d3.select("#graph").append("svg").attr("width", size.width).attr("height", size.height);
​
d3.json("https://api.github.com/repos/github/dmca/contents", function onResponse(error, files){
  var yearExtractor = /^(\d{4})/;
  var nameExtractor = /^\d{4}-\d{2}-\d{1,2}-(.+)\.[a-zA-Z]+$/;
​
  files = files.map(function(d){
    var m = d.name.match(yearExtractor);
​
    d.year = m && m[1];
    d.date = m && dateParser(d.year);
    d.company = m && d.name.match(nameExtractor)[1];
​
    return d;
  }).filter(function(d){
    return d.year;
  });
​
  var groups = d3.nest()
    .key(function(d){ return d.year })
    .key(function(d){ return d.company })
    .entries(files.filter(function(d){ return yearExtractor.test(d.name)}) );
​
    x.range([0, size.width]).domain(d3.extent(files, function(d){ return d.date; }));
    y.range([0, size.height]).domain(d3.extent(groups, function(d){
      return d.values.length;
    }));
​
    graph.selectAll("rect")
        .data(groups)
        .enter()
            .append("rect")
            .attr("x", function(d){ return x(dateParser(d.key)); })
            .attr("y", function(d){ return y(d.values.length); })
            .attr("width", function(d){ return size.width / groups.length })
            .attr("height", function(d){
              console.log(d.key)
              return size.height + y(d.values.length)
            })
});
​
</script>
</body>
</html>
    