Old school D3 from simpler times

All examples By author By category About

SpaceActuary

Full window Github gist

Grid Snapping

Built with blockbuilder.org

<!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% }
    .brush .extent { 
      stroke: #000; 
      stroke-width: 5px;
      stroke-dasharray: 5 5;
      fill-opacity: .125; 
      shape-rendering: crispEdges;
}
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 40, bottom: 20, left: 40},
    		width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;

var years = ["2011", "2012", "2013", "2014", "2015"],
    		groups = ["A", "B", "C"];
    years = d3.range(1996, 2016);
    groups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
    var data = d3.merge(years.map(function(y){
      return groups.map(function(g){
        return {"year":y, "group":g};
      })
    }));
    
    //console.log("data", data);
    console.clear() 
    
    var x = d3.scale.ordinal()
        .domain(years)
        .rangeRoundBands([0, width]);

var y = d3.scale.ordinal()
        .domain(groups)
        .rangeRoundBands([0, height]);
    
    var brush = d3.svg.brush()
        .x(x)
    		.y(y)
        //.extent([new Date(2013, 2, 2), new Date(2013, 2, 3)])
        .on("brushstart", brushstart)
        .on("brush", brushmove)
        .on("brushend", brushend);
    
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    
    var rects = svg.selectAll("rect").data(data)
    
    rects.enter().append("rect")
      .attr("x",function(d){ return x(d.year) + 5; })
      .attr("y",function(d){ return y(d.group) + 5; })
      .attr({width: x.rangeBand() - 10, height: y.rangeBand() - 10})
      .style({ fill: "#a72d1a"})
      .transition().duration(3000).ease("bounce")
      .style({ fill: "#5db9e3"})
    
    rects.on("click", function(d){
      console.log(JSON.stringify(d, null, 2));
      d3.select(this)
        .style({ fill: "#a72d1a"})
      	.transition().duration(3000).ease("bounce")
      	.style({ fill: "#5db9e3"})
    })

var gBrush = svg.append("g")
        .attr("class", "brush")
        .call(brush);
    
    function brushstart() {
      
    }
    
    function brushmove() {
      var extent0 = brush.extent(),
     		  extent1 = [[],[]]; 
      
      if(d3.event.mode == "move"){
        console.log("move")
        brush.clear().event(brush)
      }
			
      extent1 = [
      	[
          x(invertOrdinal(x, extent0[0][0])),
          y(invertOrdinal(y, extent0[0][1]))
        ],
        [
          x(invertOrdinal(x, extent0[1][0])) + x.rangeBand(),
        	y(invertOrdinal(y, extent0[1][1])) + y.rangeBand()
      	]
      ]; 
       
			d3.select(this).call(brush.extent(extent1));
    	 
    }
    
		function brushend() {
      var extent0 = brush.extent();
      
      console.log(extent0);
      
      var extent1 = [
      	[
          invertOrdinal(x, extent0[0][0]),
          invertOrdinal(y, extent0[0][1])
        ],
        [
          invertOrdinal(x, extent0[1][0] - 1),
        	invertOrdinal(y, extent0[1][1] - 1)
      	]
      ]; 
      console.log(extent1[0],extent1[1]);
      
      rects
       	.filter(function(d){
          /*if((x(extent1[0][0]) <= x(d.year))  && 
             (x(d.year)  <= x(extent1[1][0])) && 
            ( y(extent1[0][1]) <= y(d.group)) && 
             (y(d.group) <= y(extent1[1][1]))){
            console.log(d, 
              [x(extent1[0][0]), x(d.year),  x(extent1[1][0])], 
              [y(extent1[0][1]), y(d.group), y(extent1[1][1])]
            );
      		};*/

return 
            (x(extent1[0][0]) <= x(d.year))  && (x(d.year)  <= x(extent1[1][0])) && 
            (y(extent1[0][1]) <= y(d.group)) && (y(d.group) <= y(extent1[1][1]));
        })
        .call(function(d){
        	console.log(this);
          d3.select(this)
            .style({ fill: "#a72d1a"})
            .transition().duration(3000).ease("bounce")
            .style({ fill: "#5db9e3"});
        });
      brush.clear()
      gBrush.transition().delay(500).duration(0).call(brush);
      
    }
    
    function invertOrdinal(scale, point){
      return scale.domain()[d3.bisect(scale.range(), point) - 1];
    }
    
    
  </script>
</body>

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