Skip to content

Instantly share code, notes, and snippets.

@fastfrwrd

fastfrwrd/README.md

Created October 6, 2015 15:26
Show Gist options
  • Save fastfrwrd/69f206124a201d3b9f54 to your computer and use it in GitHub Desktop.
Save fastfrwrd/69f206124a201d3b9f54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Sample chart for 365 days worth of bar data.

Raw
data.tsv
date revenue
01/01/2015 400.50
01/02/2015 400.50
01/03/2015 400.50
01/04/2015 400.50
01/05/2015 400.50
01/06/2015 400.50
01/07/2015 400.50
01/08/2015 400.50
01/09/2015 400.50
01/10/2015 400.50
01/11/2015 400.50
01/12/2015 400.50
01/13/2015 400.50
01/14/2015 400.50
01/15/2015 400.50
01/16/2015 400.50
01/17/2015 400.50
01/18/2015 400.50
01/19/2015 400.50
01/20/2015 400.50
01/21/2015 400.50
01/22/2015 400.50
01/23/2015 400.50
01/24/2015 400.50
01/25/2015 400.50
01/26/2015 400.50
01/27/2015 400.50
01/28/2015 400.50
01/29/2015 400.50
01/30/2015 400.50
01/31/2015 400.50
02/01/2015 400.50
02/02/2015 400.50
02/03/2015 400.50
02/04/2015 400.50
02/05/2015 400.50
02/06/2015 400.50
02/07/2015 400.50
02/08/2015 400.50
02/09/2015 400.50
02/10/2015 400.50
02/11/2015 400.50
02/12/2015 400.50
02/13/2015 400.50
02/14/2015 400.50
02/15/2015 400.50
02/16/2015 400.50
02/17/2015 400.50
02/18/2015 400.50
02/19/2015 400.50
02/20/2015 400.50
02/21/2015 400.50
02/22/2015 400.50
02/23/2015 400.50
02/24/2015 400.50
02/25/2015 400.50
02/26/2015 400.50
02/27/2015 400.50
02/28/2015 400.50
03/01/2015 400.50
03/02/2015 400.50
03/03/2015 400.50
03/04/2015 400.50
03/05/2015 400.50
03/06/2015 400.50
03/07/2015 400.50
03/08/2015 400.50
03/09/2015 400.50
03/10/2015 400.50
03/11/2015 400.50
03/12/2015 400.50
03/13/2015 400.50
03/14/2015 400.50
03/15/2015 400.50
03/16/2015 400.50
03/17/2015 400.50
03/18/2015 400.50
03/19/2015 400.50
03/20/2015 400.50
03/21/2015 400.50
03/22/2015 400.50
03/23/2015 400.50
03/24/2015 400.50
03/25/2015 400.50
03/26/2015 400.50
03/27/2015 400.50
03/28/2015 400.50
03/29/2015 400.50
03/30/2015 400.50
03/31/2015 400.50
04/01/2015 400.50
04/02/2015 400.50
04/03/2015 400.50
04/04/2015 400.50
04/05/2015 400.50
04/06/2015 400.50
04/07/2015 400.50
04/08/2015 400.50
04/09/2015 400.50
04/10/2015 400.50
04/11/2015 400.50
04/12/2015 400.50
04/13/2015 400.50
04/14/2015 400.50
04/15/2015 400.50
04/16/2015 400.50
04/17/2015 400.50
04/18/2015 400.50
04/19/2015 400.50
04/20/2015 400.50
04/21/2015 400.50
04/22/2015 400.50
04/23/2015 400.50
04/24/2015 400.50
04/25/2015 400.50
04/26/2015 400.50
04/27/2015 400.50
04/28/2015 400.50
04/29/2015 400.50
04/30/2015 400.50
05/01/2015 400.50
05/02/2015 400.50
05/03/2015 400.50
05/04/2015 400.50
05/05/2015 400.50
05/06/2015 400.50
05/07/2015 400.50
05/08/2015 400.50
05/09/2015 400.50
05/10/2015 400.50
05/11/2015 400.50
05/12/2015 400.50
05/13/2015 400.50
05/14/2015 400.50
05/15/2015 400.50
05/16/2015 400.50
05/17/2015 400.50
05/18/2015 400.50
05/19/2015 400.50
05/20/2015 400.50
05/21/2015 400.50
05/22/2015 400.50
05/23/2015 400.50
05/24/2015 400.50
05/25/2015 400.50
05/26/2015 400.50
05/27/2015 400.50
05/28/2015 400.50
05/29/2015 400.50
05/30/2015 400.50
05/31/2015 400.50
06/01/2015 400.50
06/02/2015 400.50
06/03/2015 400.50
06/04/2015 400.50
06/05/2015 400.50
06/06/2015 400.50
06/07/2015 400.50
06/08/2015 400.50
06/09/2015 400.50
06/10/2015 400.50
06/11/2015 400.50
06/12/2015 400.50
06/13/2015 400.50
06/14/2015 400.50
06/15/2015 400.50
06/16/2015 400.50
06/17/2015 400.50
06/18/2015 400.50
06/19/2015 400.50
06/20/2015 400.50
06/21/2015 400.50
06/22/2015 400.50
06/23/2015 400.50
06/24/2015 400.50
06/25/2015 400.50
06/26/2015 400.50
06/27/2015 400.50
06/28/2015 400.50
06/29/2015 400.50
06/30/2015 400.50
07/01/2015 400.50
07/02/2015 400.50
07/03/2015 400.50
07/04/2015 400.50
07/05/2015 400.50
07/06/2015 400.50
07/07/2015 400.50
07/08/2015 400.50
07/09/2015 400.50
07/10/2015 400.50
07/11/2015 400.50
07/12/2015 400.50
07/13/2015 400.50
07/14/2015 400.50
07/15/2015 400.50
07/16/2015 400.50
07/17/2015 400.50
07/18/2015 400.50
07/19/2015 400.50
07/20/2015 400.50
07/21/2015 400.50
07/22/2015 400.50
07/23/2015 400.50
07/24/2015 400.50
07/25/2015 400.50
07/26/2015 400.50
07/27/2015 400.50
07/28/2015 400.50
07/29/2015 400.50
07/30/2015 400.50
07/31/2015 400.50
08/01/2015 400.50
08/02/2015 400.50
08/03/2015 400.50
08/04/2015 400.50
08/05/2015 400.50
08/06/2015 400.50
08/07/2015 400.50
08/08/2015 400.50
08/09/2015 400.50
08/10/2015 400.50
08/11/2015 400.50
08/12/2015 400.50
08/13/2015 400.50
08/14/2015 400.50
08/15/2015 400.50
08/16/2015 400.50
08/17/2015 400.50
08/18/2015 400.50
08/19/2015 400.50
08/20/2015 400.50
08/21/2015 400.50
08/22/2015 400.50
08/23/2015 400.50
08/24/2015 400.50
08/25/2015 400.50
08/26/2015 400.50
08/27/2015 400.50
08/28/2015 400.50
08/29/2015 400.50
08/30/2015 400.50
08/31/2015 400.50
09/01/2015 400.50
09/02/2015 400.50
09/03/2015 400.50
09/04/2015 400.50
09/05/2015 400.50
09/06/2015 400.50
09/07/2015 400.50
09/08/2015 400.50
09/09/2015 400.50
09/10/2015 400.50
09/11/2015 400.50
09/12/2015 400.50
09/13/2015 400.50
09/14/2015 400.50
09/15/2015 400.50
09/16/2015 400.50
09/17/2015 400.50
09/18/2015 400.50
09/19/2015 400.50
09/20/2015 400.50
09/21/2015 400.50
09/22/2015 400.50
09/23/2015 400.50
09/24/2015 400.50
09/25/2015 400.50
09/26/2015 400.50
09/27/2015 400.50
09/28/2015 400.50
09/29/2015 400.50
09/30/2015 400.50
10/01/2015 400.50
10/02/2015 400.50
10/03/2015 400.50
10/04/2015 400.50
10/05/2015 400.50
10/06/2015 400.50
10/07/2015 400.50
10/08/2015 400.50
10/09/2015 400.50
10/10/2015 400.50
10/11/2015 400.50
10/12/2015 400.50
10/13/2015 400.50
10/14/2015 400.50
10/15/2015 400.50
10/16/2015 400.50
10/17/2015 400.50
10/18/2015 400.50
10/19/2015 400.50
10/20/2015 400.50
10/21/2015 400.50
10/22/2015 400.50
10/23/2015 400.50
10/24/2015 400.50
10/25/2015 400.50
10/26/2015 400.50
10/27/2015 400.50
10/28/2015 400.50
10/29/2015 400.50
10/30/2015 400.50
10/31/2015 400.50
11/01/2015 400.50
11/02/2015 400.50
11/03/2015 400.50
11/04/2015 400.50
11/05/2015 400.50
11/06/2015 400.50
11/07/2015 400.50
11/08/2015 400.50
11/09/2015 400.50
11/10/2015 400.50
11/11/2015 400.50
11/12/2015 400.50
11/13/2015 400.50
11/14/2015 400.50
11/15/2015 400.50
11/16/2015 400.50
11/17/2015 400.50
11/18/2015 400.50
11/19/2015 400.50
11/20/2015 400.50
11/21/2015 400.50
11/22/2015 400.50
11/23/2015 400.50
11/24/2015 400.50
11/25/2015 400.50
11/26/2015 400.50
11/27/2015 400.50
11/28/2015 400.50
11/29/2015 400.50
11/30/2015 400.50
12/01/2015 400.50
12/02/2015 400.50
12/03/2015 400.50
12/04/2015 400.50
12/05/2015 400.50
12/06/2015 400.50
12/07/2015 400.50
12/08/2015 400.50
12/09/2015 400.50
12/10/2015 400.50
12/11/2015 400.50
12/12/2015 400.50
12/13/2015 400.50
12/14/2015 400.50
12/15/2015 400.50
12/16/2015 400.50
12/17/2015 400.50
12/18/2015 400.50
12/19/2015 400.50
12/20/2015 400.50
12/21/2015 400.50
12/22/2015 400.50
12/23/2015 400.50
12/24/2015 400.50
12/25/2015 400.50
12/26/2015 400.50
12/27/2015 400.50
12/28/2015 400.50
12/29/2015 400.50
12/30/2015 400.50
12/31/2015 400.50
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
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 + ")");
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
x.domain(data.map(function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.revenue; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Revenue (USD)");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.revenue); })
.attr("height", function(d) { return height - y(d.revenue); });
});
function type(d) {
d.revenue = +d.revenue;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment