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(['rgb(200, 100, 20)', 'rgb(100, 20, 150)'])
    
    var circle = svg.append('circle')
      .attr('r', 50)
      
    circle
      .attr('cx', x_scale(0.5))
      .attr('cy', y_scale(0.5))
      .attr('fill', color_scale(0.9))
      .style('fill-opacity', 0.8)
    
    d3.select('body').append('button')
       .text('move left')
       .on('click', function() {
        circle
          .transition()
          .duration(1000)
          .ease('elastic')
          .attr('cx', x_scale(0.1))
          .attr('r', 10)
          .attr('fill', color_scale(0.1))
      })
    
    d3.select('body').append('button')
       .text('move right')
       .on('click', function() {
        circle
          .transition()
        .duration(500)
          .ease('elastic')
          .attr('cx', x_scale(0.9))
          .attr('r', 40)
          .attr('fill', color_scale(0.9))
      })
   
  </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
plmrrypro
0viewers