Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
  <script>
    
    var svg = d3.select('body')
      .append('svg')
      .style('width', 400)
      .style('height', 400)
      .style('border', '1px solid black');
    
    var x_scale = d3.scale.linear()
      .domain([0, 1])
      .range([100, 300]);
    
    var y_scale = d3.scale.linear()
      .domain([0, 1])
      .range([100, 300]);
    
    var color_scale = d3.scale.linear()
      .domain([0, 1])
      //.range(['blue', 'green'])
      .range(['rgb(0,255,0)', 'rgb(255,0,0)'])
    
    var circle = svg.append('circle')
      .datum({
        x: 0.6, y: 0.7
      })
      .attr('r', 50)
      
    circle
      .attr('cx', d => x_scale(d.x))
      .attr('cy', d => y_scale(d.y))
      .style('fill', d => color_scale(d.x))
      .style('fill-opacity', 0.3)
    
    circle.on('click', function() {
      moveCircle()
    });
    
    function moveCircle() {
      circle
        .transition()
        .ease('elastic')
        .duration(1000)
        .attr('r', Math.random() * 100)
        .attr('cx', x_scale(Math.random()))
        .attr('cy', y_scale(Math.random()))
        .style('fill', color_scale(Math.random()))
        .style('fill-opacity', 0.3)
    }
    
    setInterval(function() {
      moveCircle()
    }, 500)
   
  
  </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
plmrrypro
0viewers