tysonanderson · January 11, 2017 23:17
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: Helvetica;
 }

 .chart {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  font-size: 10px;
  border: 1px solid #eaeaea;
  font-weight: bold;
 }

 .swe{
 	fill: none;
 	stroke-width: 2px;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Snow Water Equivalent: Mill-D North</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
 </head>
 <body>
  <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
 var margin = {top: 10, right: 10, bottom: 10, left: 10};

 var width = 140 - margin.left - margin.right,
    height = 88 - margin.top - margin.bottom;

 var time = d3.timeParse('%Y-%m-%d');
 var timeScale = d3.scaleTime().range([0,width]);
 var yScale = d3.scaleLinear().domain([0,100]).range([height, 0]);


 var line = d3.line()
 	.curve(d3.curveBasis)
    .x(function(d) { 
    	timeScale.domain([new Date(d.year, 0, 1), new Date(d.year, 11, 31)]);
    	return timeScale(time(d.date)); 
    })
    .y(function(d) { return yScale(d.swe) });


 d3.csv('mill-d.csv', function (data){

 	var data = _.each(data, function(d){ d.year = d.date.split('-')[0] } );

 	var nested = d3.nest()
 		.key(d => d.year)
 		.entries(data);

 	_.each(nested, function (d){
 		d.average = d3.mean(d.values, f => f.swe);
 	});
 	
 	var overallAverage = d3.mean(nested, d => d.average);

 	var charts = d3.select('body').selectAll('.chart')
 		.data(nested)
 		.enter()
 		.append('div')
 		.attr('class', 'chart')
 		.style('background-color', function (d){ return (d.average > overallAverage) ? '#e2ffe2' : '#ffd8d8'})
 		.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 + ")")
 		.attr('width', width)
 		.attr('height', height);

 	charts.append('path')
 		.datum( d => d.values )
 		.attr("class", "swe")
 		.style('stroke', 'steelblue')
      	.attr("d", line);

 	var labels = charts.append('text')
 		.text( d => d.key )
 		.attr('y', 10);

 });
diff --git a/mill-d.csv b/mill-d.csv
	body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: Helvetica;
	}

	.chart {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-top: 5px;
	margin-left: 5px;
	font-size: 10px;
	border: 1px solid #eaeaea;
	font-weight: bold;
	}

	.swe{
	fill: none;
	stroke-width: 2px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Snow Water Equivalent: Mill-D North</title>
	<link type="text/css" href="index.css" rel="stylesheet"/>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
	</head>
	<body>
	<script src="index.js"></script>
	</body>
	</html>
	var margin = {top: 10, right: 10, bottom: 10, left: 10};

	var width = 140 - margin.left - margin.right,
	height = 88 - margin.top - margin.bottom;

	var time = d3.timeParse('%Y-%m-%d');
	var timeScale = d3.scaleTime().range([0,width]);
	var yScale = d3.scaleLinear().domain([0,100]).range([height, 0]);


	var line = d3.line()
	.curve(d3.curveBasis)
	.x(function(d) {
	timeScale.domain([new Date(d.year, 0, 1), new Date(d.year, 11, 31)]);
	return timeScale(time(d.date));
	})
	.y(function(d) { return yScale(d.swe) });


	d3.csv('mill-d.csv', function (data){

	var data = _.each(data, function(d){ d.year = d.date.split('-')[0] } );

	var nested = d3.nest()
	.key(d => d.year)
	.entries(data);

	_.each(nested, function (d){
	d.average = d3.mean(d.values, f => f.swe);
	});

	var overallAverage = d3.mean(nested, d => d.average);

	var charts = d3.select('body').selectAll('.chart')
	.data(nested)
	.enter()
	.append('div')
	.attr('class', 'chart')
	.style('background-color', function (d){ return (d.average > overallAverage) ? '#e2ffe2' : '#ffd8d8'})
	.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 + ")")
	.attr('width', width)
	.attr('height', height);

	charts.append('path')
	.datum( d => d.values )
	.attr("class", "swe")
	.style('stroke', 'steelblue')
	.attr("d", line);

	var labels = charts.append('text')
	.text( d => d.key )
	.attr('y', 10);

	});