hello-area-chart

forked from danaoira's block: hello-line-chart

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>

.line {
			fill: pink;
			stroke: #c0c0c0;
			stroke-width: 1.5px;
		}
	</style>
</head>
<body>
	<script>
	var margin = { top: 20, right: 20, bottom: 20, left: 20};
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;
	var data = [[10,10], [20,70], [50,30], [55,85], [90,90]];

var x = d3.scaleLinear()
		.domain([0, 100])
		.range([0, width]);
	var y = d3.scaleLinear()
		.domain([0, 100])
		.range([height, 0]);

var line = d3.area()
		.x(function(d) { return x(d[0]) })
  	.y0(height)
		.y1(function(d) { return y(d[1]) });
	console.log(line(data));

var svg = d3.select("body")
		.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom);
	var g = svg.append("g")
		.attr("translate", "transform(" + margin.left + ", " + margin.top + ")");

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

window.svg = svg;
    var interval = window.setInterval(function() {
      
      }, 1000);
	</script>
</body>
</html>

https://d3js.org/d3.v4.min.js