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 data_one = [
      {
        name: "arya",
        age: 15,
        weight: 110,
        height: 60,
        sex: "female",
        evil: false
      },
      {
        name: "sansa",
        age: 17,
        weight: 130,
        height: 63,
        sex: "female",
        evil: false
      },
      {
        name: "eddard",
        age: 53,
        weight: 230,
        height: 54,
        sex: "male",
        evil: false
      },
      {
        name: "catelyn",
        age: 47,
        weight: 180,
        height: 67,
        sex: "female",
        evil: false
      }
    ];
    
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 300)
      .attr('height', 300)
      .style('border', '1px solid black');
    
    var main_g = svg.append('g')
      .classed('main', true)
      .attr('transform', 'translate(50, 50)')
    
    var x_scale = d3.scale.linear()
      .domain([0, 100])
      .range([0, 200]);
    
    var y_scale = d3.scale.linear()
      .domain([0, 300])
      .range([0, 200]);
    
    data_one
     .forEach(function(d) {
        main_g.append('circle')
          .datum(d)
          .attr('r', 10)
          .attr('cx', x_scale(d.age))
          .attr('cy', y_scale(d.weight))
          .attr('fill', (d.sex === 'male') ? 'green' : 'blue')
          .attr('fill-opacity', 0.5)
     });
    
    d3.select('body').append('div').text('Name');
    var nameBox = d3.select('body').append('div').text('foo');
    
    d3.selectAll('circle')
      .on('mouseover', function(d) {
        // console.log('hello');
        // console.log(d);
        console.log('hello my name is ' + d.name)
        nameBox.text(d.name);
      })
  
  </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
plmrrypro
0viewers