Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
#line{
    width: 100%;
    margin: 20px 0;
    height: 300px;
    background: #eee;
  }
  path {
    stroke: steelblue;
    stroke-width: 1;
    fill: none;
  }
</style>
 <button id="randomize">Create random line</button>
  <div id="line"></div>
  <script src="//d3js.org/d3.v3.min.js"></script>
<script>
    
</script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
</body>
  </html>
 
var svg = d3.select("#line").append("svg:svg").attr("width", "100%").attr("height", "100%");
    var data = d3.range(50).map(function(){return Math.random()*10})
    var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
    var y = d3.scale.linear().domain([0, 10]).range([10, 290]);
    var line = d3.svg.line()
      .interpolate("cardinal")
      .x(function(d,i) {return x(i);})
      .y(function(d) {return y(d);})
    var path = svg.append("svg:path").attr("d", line(data));
    var circle = 
        svg.append("circle")
          .attr("cx", 100)
          .attr("cy", 350)
          .attr("r", 3)
          .attr("fill", "red");
    var circleBehind = 
        svg.append("circle")
          .attr("cx", 50)
          .attr("cy", 300)
          .attr("r", 3)
          .attr("fill", "blue");
    var circleAhead = 
        svg.append("circle")
          .attr("cx", 125)
          .attr("cy", 375)
          .attr("r", 3)
          .attr("fill", "green");
    var pathEl = path.node();
    var pathLength = pathEl.getTotalLength();
    var BBox = pathEl.getBBox();
    var scale = pathLength/BBox.width;
    var offsetLeft = document.getElementById("line").offsetLeft;
    var randomizeButton = d3.select("button");
    var x = 100;
    var y = 100;
    var pos = {x: x, y: y}
    var vx = 1;
    var gravity = 0.2;
    var previousY = 1;
    var direction;
    var firstDownhill = false;
    function play() {
      requestAnimationFrame(play);
      
      //var x = 100//d3.event.pageX - offsetLeft; 
      var beginning = x, 
          end = pathLength, 
          target;
      
      if (pos.x >= 1000 || pos.x <= 0) vx = -vx;
      var difference = pos.y - previousY;
        console.log("***")
        console.log(difference)
        if (vx > 0) {
          if (difference > 0) {
            console.log("down")
            //firstDownhill = true;
            vx = vx + (gravity * 0.7);
          } else {
            console.log("up")
            vx = vx - (gravity * 0.7);
          }
        } else {
          if (difference > 0) {
          console.log("down")
          //firstDownhill = true;
          vx = vx - (gravity * 0.7);
        } else {
          console.log("up")
          vx = vx + (gravity * 0.7);
        }
        }
      x += vx;
      previousY = pos.y;
      pos = pathEl.getPointAtLength(x);
      circle
        .attr("opacity", 1)
        .attr("cx", pos.x)
        .attr("cy", pos.y);
      
      posBehind = pathEl.getPointAtLength(x - 10); 
      circleBehind
        .attr("opacity", 1)
        .attr("cx", posBehind.x)
        .attr("cy", posBehind.y);
        
      posAhead = pathEl.getPointAtLength(x + 10); 
      circleAhead
        .attr("opacity", 1)
        .attr("cx", posAhead.x)
        .attr("cy", posAhead.y);
    }
    play();
    randomizeButton.on("click", function(){
      data = d3.range(50).map(function(){return Math.random()*10});
      circle.attr("opacity", 0)                                     
      path
        .transition()
        .duration(300)
        .attr("d", line(data));
    });
   
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kittykatattackpro
0viewers