Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9992882 to your computer and use it in GitHub Desktop.
Save danharr/9992882 to your computer and use it in GitHub Desktop.
Download ZIP
Line transition
Raw
readme.md

Using the MCFC dataset the above visual shows how the ball was moved around the pitch during 90 minutes of play. The curve is not contained in the dataset but added for effect. One thing you'll learn from above is that reducing opacity of the svg path (opacity:0.9; in style section at the top) does not have the desired effect. Overlapping lines would not get darker. For this to work the paths would have to be separate elements.

Links to data: http://www.optasports.com/news-area/optapro-and-manchester-city-launch-mcfc-analytics.aspx

Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>line growing example d3js</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.line {
fill: none;
stroke-width: 1;
stroke:#0099FF;
opacity:0.9;
}
</style>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 1500)
.attr("height", 1500);
var dataset = [[50.1,50],
[48.2,49.1],
[50.9,20],
[27.8,100],
[29.3,73],
[22.3,48.9],
[55.8,34.4],
[52.1,5.3],
[64.6,23.7],
[72,12.6],
[77.8,68.1],
[66.9,53.6],
[76.7,41.1],
[78.1,48.6],
[5.6,38.5],
[29.1,35.8],
[37.1,23.7],
[34.2,49.1],
[69.9,22.9],
[56.6,42.6],
[37.7,65.7],
[41.5,57.5],
[14.3,52],
[54.1,49.7],
[54.2,50.9],
[66.1,58.6],
[62.7,16.1],
[61,34.3],
[43,32.1],
[41,70.1],
[47.8,56.1],
[8.4,87.5],
[33.6,86.7],
[39,78],
[51.5,79.9],
[54.7,76],
[32.4,76.7],
[31.6,80.4],
[26.8,100],
[27.2,62.3],
[3.5,45.6],
[45,67.3],
[55.4,56],
[42.6,63.1],
[93.3,0],
[54.2,16.7],
[54,13.8],
[79.6,19.6],
[39.2,46.3],
[58.5,67.7],
[40.3,17.9],
[71.8,24.5],
[98.6,18.7],
[59.9,38.9],
[33.3,90],
[64.2,19.6],
[56.6,34.4],
[58.7,15.4],
[71.5,16.9],
[70.7,17.6],
[32.8,40.9],
[30.8,58.7],
[57,21.5],
[77,2.6],
[92,5.3],
[76,25.1],
[99.5,0.5],
[63.5,46.1],
[79.9,73.7],
[55.6,46.4],
[59.1,48.9],
[46.1,57.8],
[54.6,77.7],
[43,51.7],
[79.8,59],
[99.7,99.7],
[9.3,100],
[57.7,96],
[34.3,69.7],
[76.5,30.7],
[37.9,66.8],
[43.7,86.1],
[40,63.7],
[58.3,32.7],
[30,40.6],
[65.1,27.4],
[63.4,21.7],
[69.6,9.2],
[55.9,38],
[44,47.5],
[54.4,94.5],
[60.4,82.2],
[20.3,67.4],
[13.4,50],
[67.7,25],
[42,28.2],
[69.3,31.9],
[68.5,14.2],
[45,53.2],
[10.9,51.4],
[41.5,67.6],
[60.6,20.7],
[63.9,8],
[56.1,12.9],
[56.9,23.7],
[52.3,19.8],
[29.5,41],
[47,13.3],
[43,13.8],
[51.5,14.3],
[58.3,34.5],
[63.6,39.1],
[66.3,49.2],
[66.6,51.6],
[62.8,51],
[67.7,76],
[72.4,96.6],
[34.3,72.7],
[5.7,39.1],
[24,78],
[49.9,55],
[25.4,94.5],
[10.1,63.2],
[24.7,53.8],
[32.3,33],
[13.6,100],
[34.3,97.8],
[36.2,43.3],
[43.9,60],
[36.6,48.8],
[38.3,21],
[39.2,41.9],
[72.5,15.6],
[41,9.8],
[37.3,42.2],
[46.1,47.8],
[42.1,45.3],
[60.4,6.9],
[45.1,2],
[46.3,35.1],
[64,47.4],
[72.8,59.8],
[95,72.7],
[41,31.6],
[67.7,49.5],
[87.1,75.4],
[46.2,57.3],
[25.7,16.5],
[31.5,24.6],
[10.3,33.7],
[28.3,8.7],
[43.3,50.2],
[46.8,35.4],
[41.2,51.8],
[56.6,66.8],
[59.8,86.3],
[65.3,73.2],
[59.8,56.2],
[48.2,35.3],
[43.9,86.3],
[74.6,65.9],
[37.7,29.9],
[65.5,11.7],
[45.1,41],
[82.9,19],
[26.8,88.2],
[10.4,59.8],
[14.3,56.5],
[26,50.7],
[30.8,37],
[40.2,4.2],
[37.4,23],
[37.9,25],
[52.3,9.5],
[74.6,54.2],
[92.9,25.2],
[4.1,73.7],
[56.7,94.4],
[37.7,69.3],
[46.6,95.7],
[40.7,77.5],
[57.9,90.8],
[19.3,34.3],
[2.1,73.8],
[52.4,24.7],
[36.4,23.2],
[31.8,2.8],
[12.9,40.6],
[42.9,45.8],
[53.9,42.5],
[57.2,59.4],
[62.9,66.9],
[58.6,62.7],
[57.5,52],
[39.2,32.7],
[39.8,53.1],
[47.7,39.3],
[38,58.1],
[51.6,45.7],
[57.2,62.1],
[20.7,27.4],
[33.4,38.2],
[37.3,41.1],
[42,30.1],
[27.3,38.3],
[46,23.2],
[25.1,54.2],
[59.3,50.4],
[45.4,71],
[62,41.6],
[70.3,42.1],
[48.4,68.4],
[40.6,41.4],
[44.3,81.1],
[66,91.1],
[9.3,73.4],
[41.3,89.7],
[29.5,65.3],
[15.5,53.3],
[46.7,47.4],
[59.2,34],
[48.2,49.8],
[47.9,39],
[41.1,38.3],
[41.4,39.5],
[35.3,57.7],
[77.7,83.9],
[67.6,69.1],
[52.9,36.8],
[61.9,50.6],
[56.6,53.7],
[56.6,53.6],
[94.8,93.4],
[39.8,100],
[53.1,74.1],
[25.6,84.4],
[10.3,63.1],
[84.9,0],
[93.6,4.2],
[59.7,36.9],
[44.4,42.5],
[15.5,53.7],
[19.1,89.4],
[15.5,79.1],
[28.8,81.4],
[37.8,90.8],
[35.8,78.4],
[28.3,70.2],
[33.9,40.5],
[70.7,37.6],
[54.5,97],
[69.2,47.1],
[64.8,50.2],
[60.4,66.9],
[57,72.1],
[42.5,65.4],
[23.2,71.8],
[44.1,60.9],
[5.3,77.2],
[14.8,45.5],
[25,28.7],
[33.3,8.1],
[28.6,15.7],
[52,0],
[66.2,39.9],
[32.4,54],
[57.1,62.1],
[62.5,36.5],
[56.7,65.6],
[51.4,74.5],
[53.6,83.4],
[88.2,93.7],
[52.3,90.6],
[55.7,83],
[24.2,65.9],
[30.7,63.1],
[41.4,32.1],
[61.8,27.9],
[52.3,52.2],
[45.9,55],
[36.7,80.5],
[46.9,94.1],
[24.8,75.8],
[40.9,69.2],
[45.1,74.5],
[41.7,70.6],
[21.5,61.4],
[29.9,83],
[12.7,91.3],
[37.4,94.2],
[29.2,80.7],
[29.4,73.2],
[25.7,78.3],
[42.2,69.9],
[51,57.3],
[43.3,50],
[54.8,37.8],
[59.2,65.2],
[61.1,58.2],
[68.2,83.8],
[56.8,57],
[57.7,50.5],
[59.1,68.5],
[52.9,63.6],
[71,36.1],
[74.6,26.8],
[60.6,44.9],
[66.5,43.1],
[71.6,33.9],
[34.7,7],
[70.4,26.6],
[47.6,55.3],
[33.9,32.2],
[59.1,16.5],
[55.1,48],
[29.7,76.6],
[14.1,26.5],
[28.9,45.9],
[24.3,49.1],
[35.5,41.1],
[40.2,43.2],
[40.3,96.2],
[56.7,65.7],
[28.5,46.3],
[13.5,50.2],
[35.9,86.4],
[46,63.7],
[63.1,47.7],
[32.4,46],
[95.5,77.9],
[35.9,65.1],
[43.6,65.3],
[59.7,92.3],
[52.6,80],
[47,71.8],
[62.4,90.6],
[73.1,95.1],
[49.7,59.4],
[56.8,53.7],
[74.6,37.9],
[71.8,38.6],
[67.2,92],
[90.6,54.1],
[78.5,84.9],
[58.4,59.7],
[82.5,97.3],
[66.6,56.1],
[71,50.7],
[96,21.2],
[86.1,21.2],
[97.4,25.6],
[99.7,0.5],
[40.2,100],
[63.9,90.8],
[68.1,95.3],
[5.8,59],
[54.3,34.1],
[69.3,26.5],
[52.6,47.7],
[38.1,38.2],
[32.1,11.7],
[48.5,37.2],
[9.8,33.8],
[5.7,60.7],
[65.5,64.8],
[68.6,57.2],
[46.7,44.9],
[59.6,21.2],
[48.8,12.3],
[99.6,0.6],
[13.5,38.6],
[45.5,50.2],
[35.6,71.6],
[53.7,62],
[47.1,53.3],
[60.3,96.7],
[5.7,39.3],
[56,15.4],
[64,4.7],
[64.4,82.4],
[61.4,65.6],
[73.7,80.5],
[5.6,61.8],
[41.8,53.5],
[63.2,26.7],
[65.9,49.7],
[63.6,25.5],
[88.6,8.7],
[97.1,62],
[29.8,0],
[18.1,29.3],
[27.3,33.3],
[43.4,17.2],
[6.5,15.9],
[64.5,35.7],
[75.1,35.6],
[70.3,0],
[46.8,40.1],
[64.4,25.2],
[46.2,45.7],
[74.1,9.4],
[44.1,88.6],
[42.6,79.1],
[43.9,95.9],
[60.1,82.1],
[62,75.1],
[93.4,94.4],
[65.9,88.6],
[23.9,82.1],
[39.3,85.2],
[52,89.5],
[38.8,58.4],
[35.2,69.2],
[41,59.5],
[34.5,95.8],
[65.8,56],
[58.2,55.6],
[54.8,34.9],
[71.9,27.1],
[64.8,3],
[68,16],
[69.2,45.3],
[67,44],
[57.4,29.1],
[57.7,86.3],
[36.7,24],
[55.6,35.2],
[65.9,38.4],
[64.5,33],
[64.9,31],
[30.4,41.5],
[63.4,64.3],
[68.5,92.8],
[73.5,48.8],
[72.4,49.7],
[76.1,97],
[62.8,72.9],
[61.5,49.6],
[66.7,57.4],
[54.1,60.1],
[38,57.8],
[28.2,69.8],
[27.5,58.3],
[28.2,47.4],
[49,67.6],
[36.6,58.9],
[47.1,64.6],
[51.9,54],
[60.9,88.2],
[63.5,81.2],
[71.4,46.8],
[55.4,32.4],
[57.6,35.7],
[99,90.8],
[28.2,31.8],
[21,20.2],
[65.5,10],
[46.5,8.9],
[39.4,33.5],
[71.4,60.7],
[60.7,60.5],
[74.5,51.2],
[73,42.2],
[81.2,72.4],
[91,75.5],
[67,92.1],
[73,20.6],
[61.8,21],
[52.5,51.4],
[80.4,27.3],
[43.2,48.5],
[38.7,25.4],
[42.4,78.7],
[51.7,96.3],
[60.1,79.6],
[54.2,69],
[43.3,62.3],
[70.7,58.7],
[44.7,59],
[87.6,98.9],
[82.9,79.3],
[81,89.6],
[79.7,86.3],
[86.8,84.1],
[8.3,51.7],
[35.3,97],
[28.1,52.8],
[28.9,39.3],
[66.7,36.3],
[34.4,51.1],
[45.2,59.3],
[55.7,93.9],
[87.4,87.2],
[52.4,31.9],
[36.3,71.5],
[97.8,30.2],
[99.7,99.4],
[96.9,95.8],
[61.6,91.8],
[60.9,86.9],
[62.7,45.8],
[87.8,87.1],
[49.6,48.5],
[42.7,51.8],
[80.3,55.1],
[45.6,55],
[62.8,93.1],
[31.6,87.2],
[31.3,47.1],
[52.2,52.2],
[33.8,49.7],
[38.4,9.3],
[86.7,26.5],
[61,100],
[45.9,86.7],
[41.3,24.5],
[59.2,15],
[72.7,11.2],
[78.3,13.6],
[95.2,3.1],
[96,11.9],
[83,27.6],
[32.4,10.3],
[44.4,8.6],
[35.2,40.3],
[58.9,5.6],
[54.7,13.3],
[49,6.1],
[69.9,25.1],
[58.3,65.9],
[72.7,57],
[72.8,57.6],
[74.8,86.4],
[5,58.1],
[5,37],
[59.8,68.7],
[54.3,82.9],
[48.9,66.1],
[56.7,59],
[43.5,48.7],
[46.4,66.5],
[64.2,76],
[45.5,97.8],
[52.8,83.3],
[85.6,89.1],
[82.4,79],
[54.8,95.6],
[30.7,27.4],
[32,4.1],
[66.9,47.4],
[42.4,83.6],
[82.8,69.8],
[72,55],
[76.9,34.4],
[85.3,100],
[80.3,97.3],
[96,89.7],
[97,73.4],
[91.9,22.9],
[17.9,27],
[32.1,37.6],
[54.5,36.3],
[53.3,70.7],
[34.7,53.9],
[76,43.5],
[29.1,45.2],
[27.5,0],
[57.2,0],
[59.5,14.3],
[61.7,0.6],
[59.1,0],
[50.5,35.8],
[45.2,43.2],
[59.7,4.9],
[30.1,15.3],
[34.2,34.4],
[10.9,76.6],
[40.4,96.7],
[33.8,65.7],
[23.1,51.8],
[35.6,76.2],
[31.7,69.8],
[25,62.5],
[18.7,31],
[51.7,29.8],
[69,58.3],
[50.9,72.7],
[66,58.1],
[19.3,54.8],
[18.2,43.3],
[67.8,17],
[16.3,82.5],
[62.4,22.6],
[65.9,43.1],
[53.5,42.1],
[37.6,40],
[73.5,20.7],
[70.1,32.7],
[65.3,65.9],
[73.2,94.8],
[75.1,87.8],
[28.3,27],
[30.5,32.3],
[25.8,0],
[56.6,0],
[41.3,17],
[43.9,54.7],
[54.9,56.1],
[51.9,48.8],
[40.2,68.2],
[43.1,95.6],
[39.3,81.6],
[43.1,94.7],
[40.6,74.6],
[25,75.4],
[11.6,62.6],
[22,86.6],
[29.7,62.8],
[19,76.3],
[4.7,66.3],
[44.3,79.7],
[9.4,61.5],
[30.4,83.5],
[35.9,89.5],
[22.2,52.6],
[7.1,49.7],
[62.1,0],
[66.8,9.8],
[61.7,2.2],
[62.2,26.6],
[65.7,70.4],
[71.4,61.4],
[67.1,84.4],
[72.1,98.3],
[66.2,89.9],
[70.4,98],
[63.5,95.5],
[65.5,100],
[68.5,84.6],
[67,98.3],
[73,100],
[70.2,95.5],
[73.6,98.6],
[80.5,87.1],
[80.4,97.3],
[98.1,75.7],
[99.5,99.5],
[78,88],
[74.8,77.7],
[64.1,76.2],
[58.6,31.9],
[65.6,18.7],
[60.9,61.5],
[72.5,67.4],
[22.2,0],
[40.3,10.3],
[43,23.7],
[34.1,31.2],
[43.4,67.6],
[52.1,62.9],
[58.7,88.9],
[65.5,98.6],
[34.2,37.5],
[53.9,74.1],
[53.7,96.7],
[76.7,97.2],
[68.1,95.8],
[55.1,95],
[70.1,91.7],
[66.7,88.1],
[69,98],
[94.7,89.1],
[8.1,83.5],
[23.3,95.8],
[70.2,100],
[66.8,97],
[99.3,99.5],
[95.5,98.6],
[34.3,62.3],
[41.5,64.3],
[44.1,79.7],
[15.3,68.1],
[33.3,57.8],
[48.3,81.1],
[45.5,93.6],
[47.7,79.1],
[57.4,96.2],
[58.1,19.6],
[68.2,15.6],
[75.3,15.4],
[29.1,34.7],
[28.4,43.5],
[10.3,64.9],
[19.8,78.8],
[32.7,96.2],
[55.6,65.7],
[36.7,32.7],
[44.4,13.3],
[60.2,16.1],
[66.2,15.7],
[70.1,2.8],
[28.6,27.6],
[34.4,9.1],
[62.4,20.7]];
var x = d3.scale.linear().domain([0,100]).range([40,400]);
var y = d3.scale.linear().domain([0,100]).range([60,600]);
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d,i) { return x(d[0]); })
.y(function(d) { return y(d[1]); })
.tension(0.5);
var path=
svg.append("svg:path")
.attr("class", "line")
.attr("d", line(dataset));
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(18000)
.ease("linear")
.attr("stroke-dashoffset", 0);
d3.select("svg").append("text")
.text(0)
.attr("class","xx")
.attr("font-size", "30px")
.attr("transform", "translate(25,25)")
.style("font-family","arial")
.style("opacity",0.8)
.transition()
.duration(18000)
.ease("linear")
.tween("text",function() {
var i = d3.interpolate(this.textContent,90);
return function(t) {
this.textContent = Math.round(i(t));
};
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment