rjschie/D3-Line.html

## D3-Line.html
<!DOCTYPE html>
<html>
<meta name="description" content="D3 Line chart that scales">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<style>
  svg {
    border: 1px solid red;
  }

  svg path {
    stroke: black;
    stroke-width: 3px;
    fill: none;
  }

  svg circle {
    fill: white;
    stroke: black;
    stroke-width: 2px;
  }
</style>

<script>


var lineOrig = [5,8,20,12,40,18,8,38,12,21,12,9,16,7,3,1,1, 0];

var lineData = lineOrig.reduce(function(arr, curr) {
  let v = curr + arr[arr.length - 1] || curr;
  arr.push(v);
  return arr;
}, []);

var svgWidth = 200;
var svgHeight = 200;

var x = d3.scale.linear()
  .domain([0, lineData.length-1])
  .range([0, svgWidth]);
var y = d3.scale.linear()
  .domain([0, d3.max(lineData)])
  .range([svgHeight, 0]);

var line = d3.svg.line()
  .x(function(d,i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  })
  .interpolate('cardinal');

var svg = d3.select('body')
  .append('svg')
  .attr('width', svgWidth)
  .attr('height', svgHeight);


//Line
svg.append('path')
  .attr('d', line(lineData));

//Points
svg.selectAll('circle')
  .data(lineData)
  .enter()
  .append('circle')
  .attr('cx', function(d,i) {
    return x(i) - 1;
  })
  .attr('cy', function(d) {
    return y(d);
  });


</script>
</html>
	<!DOCTYPE html>
	<html>
	<meta name="description" content="D3 Line chart that scales">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

	<style>
	svg {
	border: 1px solid red;
	}

	svg path {
	stroke: black;
	stroke-width: 3px;
	fill: none;
	}

	svg circle {
	fill: white;
	stroke: black;
	stroke-width: 2px;
	}
	</style>

	<script>


	var lineOrig = [5,8,20,12,40,18,8,38,12,21,12,9,16,7,3,1,1, 0];

	var lineData = lineOrig.reduce(function(arr, curr) {
	let v = curr + arr[arr.length - 1] \|\| curr;
	arr.push(v);
	return arr;
	}, []);

	var svgWidth = 200;
	var svgHeight = 200;

	var x = d3.scale.linear()
	.domain([0, lineData.length-1])
	.range([0, svgWidth]);
	var y = d3.scale.linear()
	.domain([0, d3.max(lineData)])
	.range([svgHeight, 0]);

	var line = d3.svg.line()
	.x(function(d,i) {
	return x(i);
	})
	.y(function(d) {
	return y(d);
	})
	.interpolate('cardinal');

	var svg = d3.select('body')
	.append('svg')
	.attr('width', svgWidth)
	.attr('height', svgHeight);


	//Line
	svg.append('path')
	.attr('d', line(lineData));

	//Points
	svg.selectAll('circle')
	.data(lineData)
	.enter()
	.append('circle')
	.attr('cx', function(d,i) {
	return x(i) - 1;
	})
	.attr('cy', function(d) {
	return y(d);
	});


	</script>
	</html>