altocumulus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This gist shows a line that appears to be updating with live data over time - and a point marking the front of the line.
See this d3.js animation at http://bl.ocks.org/benshope/bbbefc9dbd553141649b
The difficult part was animating the point to remain on the end of the animating line.
I wish there were a much simpler way to make this animation.  If anyone sees this and has an idea, fork this or message me.
forked from benshope's block: Moving Forward Line - 20s Loop
forked from anonymous's block: Moving Forward Line - 20s Loop

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>

<script src="//d3js.org/d3.v3.js"></script>
<script>

var width = 800;
var height = 500;
var scrollDuration = 20000;
var lineInterpolation = 'cardinal';
var numPoints = 100;
var vizHeight = 200;
//var randomNumber = function(d) {return (d);};//d3.random.normal(0, 25);
var randomNumber = function(d) {return 25*Math.sin(.5*d);};//d3.random.normal(0, 2);
var data = d3.range(numPoints).map(randomNumber);

var x = d3.scale.linear()
    .domain([0, numPoints - 1])
    .range([0, width]);
var y = d3.scale.linear()
    .domain([-vizHeight/2, vizHeight/2])
    .range([height, 0]);

var svg = d3.select('body')
						.append('svg')
              .attr('width', width)
              .attr('height', height)
            .append('g');

line = d3.svg.line()
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); })
    .interpolate(lineInterpolation);

path = svg
    .append('path')
      .datum(data)
      .attr('class', 'line')
      .attr('fill', 'none')
      .attr('stroke', 'black')
      .attr('stroke-width', 2)
      .attr('stroke-linecap', 'round')
      .attr('d', line);

var point = svg
    .append('circle')
    .attr('r', 4)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 2);

var pathLength = path.node().getTotalLength();
//console.log(pathLength, path.node().getPointAtLength(pathLength*.9).x);
function tick() {
  path
      .attr('stroke-dasharray', pathLength + ' ' + pathLength)
      .attr('stroke-dashoffset', pathLength);
  svg
    .transition()
      .duration(scrollDuration)
      .ease('linear')
      .tween("all", function() {
        return function(t) {
          var p = path.node().getPointAtLength(t * pathLength);
          point.attr('transform', 'translate(' + p.x + ',' + p.y + ')');
          path.attr('stroke-dashoffset', (1-t)*pathLength);
        };
      })
      .each('end', tick);
}
tick();

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>

	<script src="//d3js.org/d3.v3.js"></script>
	<script>

	var width = 800;
	var height = 500;
	var scrollDuration = 20000;
	var lineInterpolation = 'cardinal';
	var numPoints = 100;
	var vizHeight = 200;
	//var randomNumber = function(d) {return (d);};//d3.random.normal(0, 25);
	var randomNumber = function(d) {return 25Math.sin(.5d);};//d3.random.normal(0, 2);
	var data = d3.range(numPoints).map(randomNumber);

	var x = d3.scale.linear()
	.domain([0, numPoints - 1])
	.range([0, width]);
	var y = d3.scale.linear()
	.domain([-vizHeight/2, vizHeight/2])
	.range([height, 0]);

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g');

	line = d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(function(d, i) { return y(d); })
	.interpolate(lineInterpolation);

	path = svg
	.append('path')
	.datum(data)
	.attr('class', 'line')
	.attr('fill', 'none')
	.attr('stroke', 'black')
	.attr('stroke-width', 2)
	.attr('stroke-linecap', 'round')
	.attr('d', line);

	var point = svg
	.append('circle')
	.attr('r', 4)
	.attr('fill', 'none')
	.attr('stroke', 'red')
	.attr('stroke-width', 2);

	var pathLength = path.node().getTotalLength();
	//console.log(pathLength, path.node().getPointAtLength(pathLength*.9).x);
	function tick() {
	path
	.attr('stroke-dasharray', pathLength + ' ' + pathLength)
	.attr('stroke-dashoffset', pathLength);
	svg
	.transition()
	.duration(scrollDuration)
	.ease('linear')
	.tween("all", function() {
	return function(t) {
	var p = path.node().getPointAtLength(t * pathLength);
	point.attr('transform', 'translate(' + p.x + ',' + p.y + ')');
	path.attr('stroke-dashoffset', (1-t)*pathLength);
	};
	})
	.each('end', tick);
	}
	tick();

	</script>
No results found