thole/data.csv

## data.csv

          
            week
            budget
            revenue

            
              1
              60000
              54000

            
              2
              80000
              75000

            
              3
              90000
              80000

            
              4
              91000
              90000

            
              5
              93000
              94000

            
              6
              90000
              91000

            
              7
              89000
              90000

            
              8
              90000
              92000

            
              9
              95000
              97000

            
              10
              100000
              99000

            
              11
              101000
              98000

            
              12
              102000
              99000

            
              13
              101000
              100000

            
              14
              104000
              100000

            
              15
              105000
              100000

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<html>
<head>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style>

	body {
	  font: 14px sans-serif;
	}

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

	.x.axis path {
	  display: none;
	}

	.x.axis line{
	  display: none;
	}

	.line {
	  fill: none;
	  stroke: #d4a615;
	  stroke-width: 3px;
	}

	.baseline {
	  fill: none;
	  stroke: #717f34;
	  stroke-width: 3px;
	}

</style>
</head>
<body></body>
	<script type="text/javascript">
 	var width = 600;
	var height = 300;
	var margins = {'t':5,'r':55,'b':55,'l':55}

	var x = d3.scale.linear()
	    .range([margins.l + 10, width - (margins.l + margins.r) ]);

	var y = d3.scale.linear()
	    .range([height - (margins.t + margins.b), margins.b]);

	var xAxis = d3.svg.axis()
  		.scale(x)
  		.tickFormat(function(d) { return d;})
  		.ticks(16)
  		.orient("bottom");

  	var yAxis = d3.svg.axis()
  		.scale(y)
  		.tickFormat(function(d) { return d + "%" })
  		.ticks(5)
  		.orient("left");

	var line = d3.svg.line()
	    .x(function(d, i) { return x(d.week); })
	    .y(function(d, i) { return y(d.variance); });

	var baseline = d3.svg.line()
		.x(function(d, i) { return x(d.week); })
		.y(function(d, i) { return y(0); });

	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height);

	d3.csv("data.csv", function(error, data) {
	  	data.forEach(function(d){
	  		d.budget = parseInt(d.budget);
	  		d.revenue = parseInt(d.revenue);
	  		d.week = parseInt(d.week);

	  		d.variance = 0;
			if(d.budget === d.revenue){ d.variance = 0; }
	  		else{d.variance = (d.budget - d.revenue) / d.budget * 100}
	  	});
		x.domain(d3.extent(data,function(d){ return d.week;}));
		y.domain(d3.extent(data,function(d){ return d.variance})).nice();

		console.log(data)

		svg.append("path")
      		.datum(data)
      		.attr("class", "line")
      		.attr("d", line);

      	svg.append("path")
      		.datum(data)
      		.attr("class", "baseline")
      		.attr("d",baseline)

      	svg.append("text")
      		.attr("x",function(d,i){ return 10 + x(data[data.length-1].week)})
      		.attr("y",function(d,i){ return y(data[data.length-1].variance)})
      		.style("alignment-baseline","middle")
      		.text("Actual")

      	svg.append("text")
      		.attr("x",function(d,i){ return 10 + x(data[data.length-1].week)})
      		.attr("y",function(d,i){ return y(0)})
      		.style("alignment-baseline","middle")
      		.text("Budget")

      	svg.append("g")
		    .attr("class", "x axis")
		    .attr("transform", "translate(0," + (height - margins.b) + ")")
		    .call(xAxis)

		svg.append("g")
		    .attr("class", "y axis")
		    .attr("transform", "translate(" + margins.l + ",0)")
		    .call(yAxis)

		svg.append("text")
			.attr("x",margins.l)
			.attr("y",40)
			.style("text-anchor","end")
			.text("Variance")

		svg.append("text")
			.attr("x",(width - margins.l) / 2)
			.attr("y",height - 10)
			.style("text-anchor","start")
			.style("alignment-baseline","middle")
			.text("Week")

	});

		</script
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
week	budget	revenue
1	60000	54000
2	80000	75000
3	90000	80000
4	91000	90000
5	93000	94000
6	90000	91000
7	89000	90000
8	90000	92000
9	95000	97000
10	100000	99000
11	101000	98000
12	102000	99000
13	101000	100000
14	104000	100000
15	105000	100000
	<!DOCTYPE html>
	<meta charset="utf-8">

	<html>
	<head>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style>

	body {
	font: 14px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.x.axis line{
	display: none;
	}

	.line {
	fill: none;
	stroke: #d4a615;
	stroke-width: 3px;
	}

	.baseline {
	fill: none;
	stroke: #717f34;
	stroke-width: 3px;
	}

	</style>
	</head>
	<body></body>
	<script type="text/javascript">
	var width = 600;
	var height = 300;
	var margins = {'t':5,'r':55,'b':55,'l':55}

	var x = d3.scale.linear()
	.range([margins.l + 10, width - (margins.l + margins.r) ]);

	var y = d3.scale.linear()
	.range([height - (margins.t + margins.b), margins.b]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(function(d) { return d;})
	.ticks(16)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.tickFormat(function(d) { return d + "%" })
	.ticks(5)
	.orient("left");

	var line = d3.svg.line()
	.x(function(d, i) { return x(d.week); })
	.y(function(d, i) { return y(d.variance); });

	var baseline = d3.svg.line()
	.x(function(d, i) { return x(d.week); })
	.y(function(d, i) { return y(0); });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.csv("data.csv", function(error, data) {
	data.forEach(function(d){
	d.budget = parseInt(d.budget);
	d.revenue = parseInt(d.revenue);
	d.week = parseInt(d.week);

	d.variance = 0;
	if(d.budget === d.revenue){ d.variance = 0; }
	else{d.variance = (d.budget - d.revenue) / d.budget * 100}
	});
	x.domain(d3.extent(data,function(d){ return d.week;}));
	y.domain(d3.extent(data,function(d){ return d.variance})).nice();

	console.log(data)

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);

	svg.append("path")
	.datum(data)
	.attr("class", "baseline")
	.attr("d",baseline)

	svg.append("text")
	.attr("x",function(d,i){ return 10 + x(data[data.length-1].week)})
	.attr("y",function(d,i){ return y(data[data.length-1].variance)})
	.style("alignment-baseline","middle")
	.text("Actual")

	svg.append("text")
	.attr("x",function(d,i){ return 10 + x(data[data.length-1].week)})
	.attr("y",function(d,i){ return y(0)})
	.style("alignment-baseline","middle")
	.text("Budget")

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height - margins.b) + ")")
	.call(xAxis)

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margins.l + ",0)")
	.call(yAxis)

	svg.append("text")
	.attr("x",margins.l)
	.attr("y",40)
	.style("text-anchor","end")
	.text("Variance")

	svg.append("text")
	.attr("x",(width - margins.l) / 2)
	.attr("y",height - 10)
	.style("text-anchor","start")
	.style("alignment-baseline","middle")
	.text("Week")

	});

	</script
	</html>