Old school D3 from simpler times

All examples By author By category About

bill-kidwell

Full window Github gist

Stator Tutorial Blocks

Built with blockbuilder.org

Examples from this tutorial: http://www.stator-afm.com/tutorial/d3-js-mouse-events/

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      svg { width: 100%; height: 100%; }
    </style>
  </head>

<body>
    <script>
      var margin = {top: 20, right: 10, bottom: 20, left: 10};
      var width = 960 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;
      var svg = d3.select("body").append("svg");

var svg = d3.select("body").append("svg");
 
var data = [ 
  { "name" : "Square 1", "x" : 10, "y" : 10, "height" : 100 , "width" : 100, "fill" : "green"},
  { "name" : "Square 2", "x" : 25, "y" : 25, "height" : 70 , "width" : 70, "fill" : "yellow"}
];
 
var squares = svg.append("g")
    .selectAll('rect')  
    .data(data)    
    .enter()    
  .append('rect')
    .attr('x', function (d) { return d.x })
    .attr('y', function (d) { return d.y })
    .attr('height', function (d) { return d.height })
    .attr('width', function (d) { return d.width })
    .attr('fill', function (d) { return d.fill })
    .attr('stroke','red')
    .attr('stroke-width',0)
      .on('mouseover',function() {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('stroke-width',3)
      })
      .on('mouseout',function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('stroke-width',0)
      });

</script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js