Built with blockbuilder.org
forked from tomshanley's block: Animate line and points
Created
November 14, 2018 17:31
-
-
Save denisemauldin/fdde7974723aeae8c2d4f0ff7a031d1c to your computer and use it in GitHub Desktop.
Animate line and points
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment