D3.js Area Graph script

area_graph.js

var area_graph = {
	margin: [40, 40, 40, 100],
	width: 1160,
	height: 460,
	div_id: '#areagraph',
	json: '',
	draw: function() {

		var computed_height = this.height - this.margin[1] - this.margin[3];
		var computed_width = this.width - this.margin[0] - this.margin[2];

		var x = d3.scale.linear().range([0,computed_width]);
		var y = d3.scale.linear().range([computed_height,0]);

		var area = d3.svg.area()
			.interpolate("linear")
			.x(function(d) { return x(d.week); })
			.y0(computed_height)
			.y1(function(d) { return y(d.yards); });

		var svg = d3.selectAll(this.div_id).append("svg:svg")
			.attr("width", this.width + this.margin[1] + this.margin[3])
			.attr("height", this.height + this.margin[0] + this.margin[2])
			.append("svg:g")
			.attr("transform", "translate(" + this.margin[3] + "," + this.margin[0] + ")");

		d3.csv(this.json, function(data) {
			var leader_values = data.filter(function(d) {
				return d.player == "leader";
			});

			var rrice_values = data.filter(function(d) {
				return d.player == "r.rice";
			});

			x.domain([1, 17]);
			y.domain([0, d3.max(data, function(d) { return Math.ceil(+d.yards/25)*25; })]);

			svg.append("svg:g")
				.attr("class", "x axis")
				.attr("transform", "translate(0,-5)")
				.call(d3.svg.axis().scale(x).ticks(17).tickSubdivide(1).tickSize(6).orient("top"));

			svg.append("svg:g")
				.attr("class", "x minor")
				.attr("transform", "translate(0,0)")
				.call(d3.svg.axis().scale(x).ticks(17).tickSubdivide(1).tickSize(-computed_height).orient("top"));

			svg.append("svg:g")
				.attr("class", "y axis")
				.attr("transform", "translate(-5,0)")
				.call(d3.svg.axis().scale(y).ticks(4).tickSubdivide(3).tickSize(6).orient("left"));

			svg.append("svg:g")
				.attr("class", "y minor")
				.attr("transform", "translate(0,0)")
				.call(d3.svg.axis().scale(y).ticks(4).tickSubdivide(3).tickSize(-computed_width).orient("left"));

			svg.append("svg:path")
				.attr("class", "area")
				.attr("d", area(leader_values))
				.on("mouseover", mouseover)
				.on("mousemove", mousemove)
				.on("mouseout", mouseout);

			var div = d3.select("body").append("div")
				.attr("class", "tooltip")
				.style("opacity", 1e-6);
  
			function mouseover() {
				div.transition().duration(500).style("opacity", 1);
			}

			function mousemove(pplayer) {
				div.text("leader").style("left", (w+125) + "px").style("top", (d3.event.pageY - 24) + "px");
			}

			function mouseout() {
				div.transition().duration(500).style("opacity", 1e-6);
			}

			svg.append("svg:path").attr("class", "area2").attr("d", area(rrice_values));

			svg.append("svg:text").attr("x", 450).attr("y", -35).attr("text-anchor", "start").text("Leader").style("fill", "#888");
			svg.append("svg:text").attr("x", 550).attr("y", -35).attr("text-anchor", "start").text("Ray Rice").style("fill","#888");

			svg.append("svg:line").attr("x1", 400).attr("x2", 445).attr("y1", -39).attr("y2", -39).style("fill", "#424242").style("stroke", "#424242").style("stroke-width", "1em").style("opacity",0.8);
			svg.append("svg:line").attr("x1", 500).attr("x2", 545).attr("y1", -39).attr("y2", -39).style("fill", "#FF9900").style("stroke", "#FF9900").style("stroke-width", "1em").style("opacity",0.8);

			svg.append("svg:text").attr("x", -5).attr("y", -35).attr("text-anchor", "start").text("Weeks").style("fill", "#888");
			svg.append("svg:text").attr("x", 0).attr("y", 0).attr("text-anchor", "start").attr("transform", "rotate(-90,0,0),translate(" + -(computed_height+2) +",-30)").text("Touchdowns").style("fill", "#888");

			var linear = true;

			svg.on("click", function() {

				var interpolate;
				if (linear) {
					interpolate = "cardinal";
					linear = false;
				} else {
					interpolate = "linear";
					linear = true;
				}

				var area = d3.svg.area()
					.interpolate(interpolate)
					.x(function(d) { return x(d.week); })
					.y0(h)
					.y1(function(d) { return y(d.yards); });

				var t = svg.transition().duration(750);
				t.select(".area").attr("d", area(leader_values));
				t.select(".area2").attr("d", area(rrice_values));
			});
		});
	}
};

area_graph.margin = [50, 35, 60, 45];  //top, bottom, right, left
area_graph.width = 724;
area_graph.height = 460;
area_graph.div_id = '#miniareagraph';
area_graph.json = 'http://kodagraph.dev:20559/data/test.csv';
area_graph.draw();