D3 Examples - click

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
        var point_history = new Array();
    var width = 500;
    var height = 600;
    var svg = d3.select("body").append('div').append("svg")
      .attr("width",  width)
      .attr("height", height)
    .append('g')
     
    var count  = 0;
    var margin = {top:50, bottom: 50, left: 50, right: 50}
        var innerWidth =  width-margin.left-margin.right;
    var innerHeight = height-margin.top-margin.bottom;
    var results_svg = d3.select("body").append('div').append("svg")
      .attr("width",  height)
      .attr("height", width)
    .append('g').attr('transform',`translate(${margin.left},${margin.top})`)    
    
    date1 = new Date();
    timeScale = d3.scaleLinear().domain([0, 3000]).range([innerHeight, 0])
        timeAxisFunc = d3.axisLeft(timeScale);
    timeAxis = results_svg.append('g').call(timeAxisFunc)
    
    distScale = d3.scaleLinear().domain([0, 500]).range([0, width]);
    distAxisFunc = d3.axisBottom(distScale);
    distAxis = results_svg.append('g').attr('transform', `translate(0,${innerHeight})`).call(distAxisFunc);
​
    var data = d3.range(200).map(d => [Math.random()*d,Math.random()*d ])
    var xScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[0]))).range([0,width])
    var yScale = d3.scaleLinear().domain(d3.extent(data.map(row=>row[1]))).range([height,0])
        
    d3.select('svg').append('circle')
      .attr('cx',100)
      .attr('cy',100)
      .attr('r', 11)
      .attr('fill', 'black')
    .on('click', function(){
    //get a clicked element attribute  
    var elem = d3.select(this);
    var cx  = Number(elem.attr('cx')); 
    var cy  = Number(elem.attr('cy'));
​
    if (point_history.length > 1) {
      var prev_xy = point_history[point_history.length-2]
      
          var vector = new paper.Point(Math.abs(prev_xy[1]-cy),Math.abs(prev_xy[0]-cx));
      var time_diff = new Date() - date1;
            console.log(vector.length)
      results_svg.append('circle')
        .attr('cx', distScale(vector.length))
        .attr('cy',timeScale(time_diff))
        .attr('r', 4)
      distAxis = results_svg.append('g').attr('transform', `translate(100,200)`).call(distScale);
      }
      
      
    var new_cy = (cy < height/2)? d3.randomUniform(cy, height)() : d3.randomUniform(0, cy)();
    var new_cx = (cx < width/2)? d3.randomUniform(cx, width)() : d3.randomUniform(0, cx)();
    point_history.push([new_cx,new_cy])
    
    elem.transition().duration(80).attr('cx',new_cx).attr('cy',new_cy).attr('r',10)
    date1 = new Date();
    
    
    })
​
  </script>
</body>
    