Tufte Minimal Line Plot

forked from hyonschu's block: Tufte Minimal Line Plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
		<style>
		.axis path, .yaxis path { fill: none;  shape-rendering: auto; }
		.axis text, .yaxis text, .notes{ font-family: "Times"; font-size: 12px; color: black;}
		</style>
	</head>
	<body>

//data
		var x = _.range(1967,1978);
		var y = [287, 314, 371,386,386,394,388,380,390,400,390];
		// var y = []
		min = 287;
		max = 400;

//
		// for (i=0; i<x.length; i++) {
		// 	y.push(Math.random()*7)
		// }
		// y = y.sort(d3.ascending)
		//
// normalizing it between actual values (~287 - 400), not sure why y-values are so small...

// create new JSON file {year: x, values: y}
		var dataset = [];
		for (var i=0; i<x.length; i++) {
			var obj = {'year': x[i], 'values': y[i]};
			dataset.push(obj)
		}

// layout variables
		var pad = 50;
		var ww = 640;
		var hh = 400;

// CREATE SVG CANVAS
		var canvas = d3.select('body')
			.append('svg').attr({'height': hh,'width': ww })

// CREATE SCALES TO AUTO ADJUST USING D3.SCALE
		var xscale = d3.scale.linear()
			.range([pad,ww-pad]).domain([d3.min(x), d3.max(x)])

var yscale = d3.scale.linear()
			.range([hh-pad,pad]).domain([min,max])

// DECLARE AXES
		var xAx = d3.svg.axis()
			.scale(xscale).orient('bottom')
			.ticks(x.length).tickFormat(d3.format('d'))

var yAx = d3.svg.axis()
			.scale(yscale).ticks(5)
			.tickFormat(function(d) { return "$"+d ; }).orient('left')

// drawing the output
		var lineFunc = d3.svg.line()
		  .x(function(d) {return xscale(d.year);})
		  .y(function(d) {return yscale(d.values);})

canvas.append('svg:path')
			  .attr('d', lineFunc(dataset))
			  .attr('stroke', 'black')
			  .attr('stroke-width', 0.8)
			  .attr('fill', 'none');

canvas.selectAll('circles')
			.data(dataset).enter().append('circle')
			.attr({
				'cx': function(d){ return xscale(d.year); },
				'cy': function(d){ return yscale(d.values); },
				'r': 5,
				'stroke-width': 5,
				'stroke': 'white'
			});

canvas.append("line")
		 .attr({'class': 'mean-line','x1': pad,'x2': ww-(pad/2),
			 'y1': yscale(max*0.95),'y2': yscale(max*0.95)})
		 .attr({'stroke': 'black',
		 'stroke-width': 0.5,
		 'stroke-dasharray': '5,5'})

canvas.append("line")
				.attr({'class': 'mean-line','x1': pad,'x2': ww-(pad/2),
					'y1': yscale(max),'y2': yscale(max)})
				.attr({'stroke': 'black',
				'stroke-width': 0.5,
					'stroke-dasharray': '5,5'})

canvas.append("g")
	    .attr("class", "axis")
	    .attr("transform", "translate(0," + (hh - 40) + ")").call(xAx)

canvas.append("g")
	    .attr("class", "yaxis")
	    .attr("transform", "translate(" + 40 + ",0)").call(yAx)

canvas.append('line')
		.data(dataset)
			.attr({'class': 'mean-line',
				'x1': function(d) { return xscale(d.year) },
				'x2': function(d) { return xscale(d.year)},
				'y1': d3.max(y)-8 ,'y2': d3.max(y)-18})
			.attr({
				'stroke': 'black',
				'stroke-width': 1,
			})

</script>
<div class='notes'>Per capita budget expenditures in constant dollars</div>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js