Skip to content

Instantly share code, notes, and snippets.

@stimms

stimms/graph.js

Created February 21, 2013 21:56
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 stimms/5008627 to your computer and use it in GitHub Desktop.
Save stimms/5008627 to your computer and use it in GitHub Desktop.
Download ZIP
Grain prices as compared with farm revenue.
Raw
graph.js
var OpenData;
(function (OpenData) {
var GrainGraph = (function () {
function GrainGraph(container, data, width, height) {
this.container = container;
this.data = data;
this.width = width;
this.height = height;
this.barHeight = this.height - 25;
}
GrainGraph.prototype.render = function () {
var _this = this;
var graph = d3.select(this.container).append("svg").attr("width", this.width).attr("height", this.height);
var graph = d3.select(this.container).append("svg").attr("width", this.width).attr("height", this.height);
var xScale = d3.scale.ordinal().domain(this.data.map(function (d) {
return d.year;
})).rangeBands([
0,
this.width
], 0.1);
var yScale = d3.scale.linear().domain([
0,
d3.max(this.data, function (d) {
return d.farmRevenue;
})
]).range([
0,
this.barHeight
]);
var yScale2 = d3.scale.linear().domain([
0,
d3.max(this.data, function (d) {
return d.yieldPerHector;
})
]).range([
0,
this.barHeight
]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
graph.append("g").attr("class", "x axis").attr("transform", "translate(-6," + (this.barHeight) + ")").call(xAxis);
graph.selectAll(".bar").data(this.data).enter().append("rect").attr("width", xScale.rangeBand() / 2).style("fill", "steelblue").attr("x", function (d) {
return xScale(d.year);
}).attr("y", this.barHeight).transition().duration(750).attr("height", function (d) {
return yScale(d.farmRevenue);
}).attr("y", function (d) {
return _this.barHeight - yScale(d.farmRevenue);
});
graph.selectAll(".bar").data(this.data).enter().append("rect").attr("width", xScale.rangeBand() / 2).style("fill", "orange").attr("x", function (d) {
return xScale(d.year) + xScale.rangeBand() / 2;
}).attr("y", this.barHeight).transition().duration(750).attr("height", function (d) {
return yScale2(d.yieldPerHector);
}).attr("y", function (d) {
return _this.barHeight - yScale2(d.yieldPerHector);
});
};
return GrainGraph;
})();
OpenData.GrainGraph = GrainGraph;
})(OpenData || (OpenData = {}));
Raw
index.html
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="graph.js"></script>
<script>
$(function(){
var grainData = [{year: 2001, farmRevenue: 183267, yieldPerHector: 2200},
{year: 2002, farmRevenue: 211191, yieldPerHector: 1900},
{year: 2003, farmRevenue: 194331, yieldPerHector: 2600},
{year: 2004, farmRevenue: 238055, yieldPerHector: 3100},
{year: 2005, farmRevenue: 218350, yieldPerHector: 3200},
{year: 2006, farmRevenue: 262838, yieldPerHector: 2900},
{year: 2007, farmRevenue: 300918, yieldPerHector: 2600},
{year: 2008, farmRevenue: 381597, yieldPerHector: 3200},
{year: 2009, farmRevenue: 381250, yieldPerHector: 2800},
{year: 2010, farmRevenue: 356636, yieldPerHector: 3200},
{year: 2011, farmRevenue: 480056, yieldPerHector: 3300}
];
var graph = new OpenData.GrainGraph(".graph", grainData, 500, 200);
graph.render();});
</script>
</head>
<body>
<div class="graph">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment