Built with blockbuilder.org
forked from tomshanley's block: Animate line and points
license: mit |
Built with blockbuilder.org
forked from tomshanley's block: Animate line and points
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
</head> | |
<body> | |
<p>Click the chart to start the animation.</p> | |
<div id="line"></div> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script type="text/javascript"> | |
console.clear() | |
var w = 700; | |
var h = 300; | |
var m = 40; | |
var svg = d3.select("#line") | |
.append("svg") | |
.attr("width", w + m + m) | |
.attr("height", h + m + m) | |
var chart = svg.append("g") | |
.attr("transform", "translate(" + m + "," + m + ")") | |
var data = d3.range(11) | |
.map(function(){ | |
return Math.random() * 10 | |
}) | |
var x = d3.scaleLinear() | |
.domain([0, 10]) | |
.range([0, w]); | |
var y = d3.scaleLinear() | |
.domain([0, 10]) | |
.range([h, 0]); | |
var line = d3.line() | |
.x(function(d,i) {return x(i);}) | |
.y(function(d) {return y(d);}) | |
var clipPath = chart.append("clipPath") | |
.attr("id", "clip") | |
.append("rect") | |
.attr("id", "clip-rect") | |
.attr("x", 0) | |
.attr("y", 0) | |
.attr("width", 0) | |
.attr("height", h) | |
var bkdPath = chart.append("path") | |
.attr("d", line(data)) | |
.attr("stroke", "lightgrey") | |
.attr("stroke-width", "2") | |
.attr("fill", "none") | |
var path = chart.append("path") | |
.attr("d", line(data)) | |
.attr("stroke", "orange") | |
.attr("stroke-width", "2") | |
.attr("fill", "none") | |
.attr("clip-path", "url(#clip)") | |
var dataPoint = chart.selectAll('.data-point') | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("transform", function(d, i){ | |
return "translate(" + x(i) + "," + y(d) + ")" | |
}) | |
.attr("class", "data-point") | |
.attr("id", (d, i) => "data-point-" + i) | |
.style("opacity", 0) | |
dataPoint.append("circle") | |
.attr("r", 5) | |
dataPoint.append("text") | |
.text((d, i) => i + ", " + round2dp(d) ) | |
.attr("dy", 18) | |
var show = false | |
svg.on("click", function(){ | |
d3.select('#clip-rect') | |
.transition() | |
.duration(10000) | |
.ease(d3.easeLinear) | |
.attr("width", function(d){ | |
let n = w | |
if (show) { | |
show = false | |
n = 0 | |
} else { | |
show = true | |
} | |
return n | |
}) | |
.tween("attr.fill", function() { | |
return function(t) { | |
let kx = show ? | |
Math.floor(t * 10) : | |
Math.ceil((1-t) * 10) | |
let id = "#data-point-" + kx | |
d3.selectAll(".data-point") | |
.style("opacity", 0) | |
d3.select(id) | |
.style("opacity", 1) | |
}; | |
}); | |
}) | |
function round2dp(n) { | |
return Number.parseFloat(n).toFixed(2); | |
} | |
</script> | |
</body> | |
</html> |