Built with blockbuilder.org
forked from danaoira's block: hello-line-chart
license: mit |
Built with blockbuilder.org
forked from danaoira's block: hello-line-chart
<!DOCTYPE html> | |
<head> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
margin: 0; | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.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> |