D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
thom4parisot
Full window
Github gist
Github DMCA Reports
<!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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js