vigorousnorth/index.html

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="windchart.js"></script>


<style>

body {
  font: 10px 'Open sans', sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.x.axis line, .x.axis path {fill: #222; stroke: #222; stoke-width: 1px;}

.projects line, .projects path  {stroke: steelblue;}
.projects text {fill: steelblue;}

.line {
  fill: none;
  stroke: black;
  stroke-width: 1.2px;
}

path.projects {stroke: #fff; stroke-width: 0.5px; fill: steelblue; }

div.chart {width: 100%;}
</style>

<body>
</body>

## projects.csv

          
            month
            name
            capacity

            
              04-2007
              Mars Hill
              42

            
              01-2009
              Stetson phase 1
              57

            
              11-2009
              Kibby phase 1
              66

            
              04-2010
              Stetson phase 2
              25.5

            
              11-2010
              Kibby phase 2
              66

            
              07-2011
              Rollins
              60

            
              12-2011
              Spruce Mt.
              20

            
              01-2012
              Record Hill
              50.6

            
              12-2012
              Bull Hill
              34.6

            
              12-2014
              Saddleback Ridge phase 1
              8.6

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## windchart.js
var parseDate = d3.time.format("%m-%Y").parse;
var shortMonth = d3.time.format("%b-%y");

var margin = {top: 50, right: 20, bottom: 50, left: 60},
width = 645 - margin.left - margin.right,
height = 380 - margin.top - margin.bottom;

var x = d3.time.scale()
	.range([0, (width - margin.right)]);

var xAxis = d3.svg.axis()
	.tickFormat(shortMonth)
	.tickSize(15,2)
	.orient("bottom");

var y = d3.scale.linear()
	.range([height,0])
	.domain([0, 120]);

var yAxis = d3.svg.axis()
	.orient("left")
	.scale(y);

var y_invert = d3.scale.linear()
	.range([0,height])
	.domain([0, 120]);

d3.csv("projects.csv", function(error, data) {
  if (error) throw error;

  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 + ")");

	x.domain( [parseDate('08-2006'),parseDate('06-2015')] );

	xAxis
		.scale(x)
		.ticks(d3.time.months,6);

	var projectpaths = svg.append("g").selectAll('path.projects').data(data);

	projectpaths.enter().append('path')
		.attr("transform", "translate(0," + height + ")")
		.attr('class','projects')
		.attr('d', function(datum) {
			var date = parseDate(datum.month);
			var capacity = +datum.capacity;
			return drawturbine(x(date), y_invert(capacity));
		})

	var project_anno = svg.append("g").selectAll('text.labels')
		.data(data)
		.enter().append('text')
			.attr("transform", function(d) {
				return "translate(" + x(parseDate(d.month)) + "," +  y(+d.capacity) + ") rotate(-60)"
			})
			.attr("dy", "0.5em")
			.attr("dx","1.5em")
			.text(function(d) {return d.name;});

	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
		.selectAll("text")
			.style("text-anchor","middle")
			.attr("dx", "-3em")
			.attr("dy", "-1.5em")
			.attr("transform", "rotate(-90)" );

	svg.append("g")
		.attr("class", "y axis projects")
		.call(yAxis)
		.append("text")
			.attr("transform", "rotate(-90)")
			.attr("dy", "1.5em")
			.style("text-anchor", "end")
			.text("Capacity of individual projects (megawatts)");
});

function drawturbine(x, h) {
	var w = 5;
	return "M" + (x - w*0.6) + " 0 L" + (x - w*0.3) + " " + (-h+4) + "L" + (x-25) + " " + (-h+25) +
//3 to 4 (top tip)
	"L" + (x-2) + " " + (-h) +	"L" + (x) + " " + (-h - 40) +
//5 to 6
	"L" + (x+3) + " " + (-h-2) + "L" + (x+12) + " " + (-h - 1) +
//7 to 8
	"L" + (x+12) + " " + (-h+2) + "L" + (x+5) + " " + (-h+4) +
//9 to 10
	"L" + (x+28) + " " + (-h+25) + "L" + (x+0.3*w) + " " + (-h+4) +
//11
	"L" + (x+w*0.6) + " 0";
	}
	<!DOCTYPE html>
	<meta charset="utf-8">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="windchart.js"></script>


	<style>

	body {
	font: 10px 'Open sans', sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}

	.x.axis line, .x.axis path {fill: #222; stroke: #222; stoke-width: 1px;}

	.projects line, .projects path {stroke: steelblue;}
	.projects text {fill: steelblue;}

	.line {
	fill: none;
	stroke: black;
	stroke-width: 1.2px;
	}

	path.projects {stroke: #fff; stroke-width: 0.5px; fill: steelblue; }

	div.chart {width: 100%;}
	</style>

	<body>
	</body>
month	name	capacity
04-2007	Mars Hill	42
01-2009	Stetson phase 1	57
11-2009	Kibby phase 1	66
04-2010	Stetson phase 2	25.5
11-2010	Kibby phase 2	66
07-2011	Rollins	60
12-2011	Spruce Mt.	20
01-2012	Record Hill	50.6
12-2012	Bull Hill	34.6
12-2014	Saddleback Ridge phase 1	8.6
	var parseDate = d3.time.format("%m-%Y").parse;
	var shortMonth = d3.time.format("%b-%y");

	var margin = {top: 50, right: 20, bottom: 50, left: 60},
	width = 645 - margin.left - margin.right,
	height = 380 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.range([0, (width - margin.right)]);

	var xAxis = d3.svg.axis()
	.tickFormat(shortMonth)
	.tickSize(15,2)
	.orient("bottom");

	var y = d3.scale.linear()
	.range([height,0])
	.domain([0, 120]);

	var yAxis = d3.svg.axis()
	.orient("left")
	.scale(y);

	var y_invert = d3.scale.linear()
	.range([0,height])
	.domain([0, 120]);

	d3.csv("projects.csv", function(error, data) {
	if (error) throw error;

	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 + ")");

	x.domain( [parseDate('08-2006'),parseDate('06-2015')] );

	xAxis
	.scale(x)
	.ticks(d3.time.months,6);

	var projectpaths = svg.append("g").selectAll('path.projects').data(data);

	projectpaths.enter().append('path')
	.attr("transform", "translate(0," + height + ")")
	.attr('class','projects')
	.attr('d', function(datum) {
	var date = parseDate(datum.month);
	var capacity = +datum.capacity;
	return drawturbine(x(date), y_invert(capacity));
	})

	var project_anno = svg.append("g").selectAll('text.labels')
	.data(data)
	.enter().append('text')
	.attr("transform", function(d) {
	return "translate(" + x(parseDate(d.month)) + "," + y(+d.capacity) + ") rotate(-60)"
	})
	.attr("dy", "0.5em")
	.attr("dx","1.5em")
	.text(function(d) {return d.name;});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor","middle")
	.attr("dx", "-3em")
	.attr("dy", "-1.5em")
	.attr("transform", "rotate(-90)" );

	svg.append("g")
	.attr("class", "y axis projects")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("dy", "1.5em")
	.style("text-anchor", "end")
	.text("Capacity of individual projects (megawatts)");
	});

	function drawturbine(x, h) {
	var w = 5;
	return "M" + (x - w0.6) + " 0 L" + (x - w0.3) + " " + (-h+4) + "L" + (x-25) + " " + (-h+25) +
	//3 to 4 (top tip)
	"L" + (x-2) + " " + (-h) + "L" + (x) + " " + (-h - 40) +
	//5 to 6
	"L" + (x+3) + " " + (-h-2) + "L" + (x+12) + " " + (-h - 1) +
	//7 to 8
	"L" + (x+12) + " " + (-h+2) + "L" + (x+5) + " " + (-h+4) +
	//9 to 10
	"L" + (x+28) + " " + (-h+25) + "L" + (x+0.3*w) + " " + (-h+4) +
	//11
	"L" + (x+w*0.6) + " 0";
	}