SpaceActuary/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>