bewest · August 20, 2011 21:36
diff --git a/README d3 blather b/README d3 blather
 Explore panning and zooming over time series using d3.
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Hexagons Test</title>
    <script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.js"></script>
    <script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.behavior.js"></script>
    <script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.time.js"></script>
    <style type="text/css">
 svg {
    border: solid 1px #aaa;
    background: #eee;
 }

 rect.border {
  fill: none;
  stroke: red;
 }
 rect {
    fill: lightsteelblue;
    stroke: #000;
    stroke-width: .5px;
 }

 rect.even {
    fill: lightsteelblue;
 }
 rect.odd {
    fill: #FACFCF;
 }

 .highlight {
      fill: red;
 }
    </style>
  </head>
  <body>
    <script type="text/javascript">
 // <![CDATA[

 var w = 800,
    h = 500,
    padding = 0;
    
 var diameter = 50;
 var tileSize = 256;

 var offset = diameter / 2;
 var data = [];
 var index = 0;
 // X
 d3.range(0, w * 2,  diameter ).map(function(v1, i) {
    // Y
    d3.range(0, h, h).map(function(v2, j) {
    console.log(['x', v1, i], ['y', v2, j]);
        //var x = j % 2 ? v1 + offset : v1,
        var x = v1,
            y = v2;
        data.push({
            id: index++,
            centroid: [x, y],
            coordinates: [i, j, (i + j) * -1],
            //customName: 'test',
            visible: x >= padding && x <= w - padding && y >= padding && y <= h - padding
        });
    });
 });



 var border = 10;

 var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all");

 svg.call(d3.behavior.zoom().on("zoom", move));
    
    svg.append("svg:rect")
    .attr("x", border)
    .attr("y", border)
    .attr('width', w - (border*2))
    .attr('height', h - (border*2))
    .attr('class', 'border')
    ;
    
    
 render();

 function mouseover(d, i) {
    d3.select(this)
        .attr("class", "highlight");
 }

 function mouseout(d, i) {
    d3.select(this)
        .attr("class", i % 2 ? 'odd' : 'even');
 }

 function click(d, i) {
    d.customName = Date.now();
    console.log("click", this, d, i);
    d3.select(this)
        .style("fill", "yellow");
 }

 function removeClicked() {
    svg.selectAll("path")
        .filter(function(d) { 
            return d.customName != 'test'; 
        })
        .remove();
 }

 function move() {
    var x = d3.event.translate[0],
        y = d3.event.translate[1]
    
    console.log(x,y);
    data.filter(function(d) {
        return !d.visible 
            && d.centroid[0] + x >= padding 
            && d.centroid[0] + x <= w - padding 
            ;
    /*
            && d.centroid[1] + y >= padding 
            && d.centroid[1] + y <= h - padding;
    */
    }).map(function(d) {
        console.log(x,y, d.centroid, d);
        d.visible = true;
        return d;
    });
    
    data.filter(function(d) {
        return d.visible 
            && (d.centroid[0] + x < padding 
                || d.centroid[0] + x > w - padding
               )
            ;
    /*
                || d.centroid[1] + y < padding 
                || d.centroid[1] + y > h - padding);
    */
    }).map(function(d) {
        console.log(d.id, 'invisible');
        d.visible = false;
        return d;
    });
    /*
    */
    
    render();
    
    // do the move
    svg.selectAll("g")
        .attr("transform", "translate(" + [x, 10] + ")" /*+ "scale(" + d3.event.scale + ")"*/);
 }

 function render() {
    var grid = svg.selectAll("g")
        .data(
            data.filter(function(d) { return d.visible; }), 
            function(d) { return d.id; }
        );

  var tile= grid.enter()
        .sort(function(a, b) { return a.id - b.id; })
        .append("svg:g")
        .attr('class', function(d, i) {
          return i % 2 ? 'odd' : 'even';
        })
        ;
    tile
        .append("svg:rect")
        .attr('width', diameter)
        .attr('height', diameter)
        .attr('id', function(d, i) { return  "g_" + d.id; })
        .attr('class', function(d, i) {
          return i % 2 ? 'odd' : 'even';
        })
        .attr('x', function(d, i) {
          return d.centroid[0];
        })
        .attr('y', function(d) {
          // return 0;
          return d.centroid[1];
        })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click", click)
        ;
        tile
          .append('svg:text').text(function(d,i) { return d.id; })
          .attr('dy', '.71em')
          .attr('stroke', 'black')
          .attr('x', function(d, i) {
            return d.centroid[0] + 6;
            // return i * diameter + 6;
          })
          .attr('y', function(d, i) {
            return d.centroid[1] + 6;
            // return i * diameter + 6;
          })
          // .attr('y', '6')
        //.attr('x', 10)
        ;
    
    grid.exit().remove();
 }


 // ]]>
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Hexagons Test</title>
	<script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.js"></script>
	<script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.behavior.js"></script>
	<script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.time.js"></script>
	<style type="text/css">
	svg {
	border: solid 1px #aaa;
	background: #eee;
	}

	rect.border {
	fill: none;
	stroke: red;
	}
	rect {
	fill: lightsteelblue;
	stroke: #000;
	stroke-width: .5px;
	}

	rect.even {
	fill: lightsteelblue;
	}
	rect.odd {
	fill: #FACFCF;
	}

	.highlight {
	fill: red;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	// <![CDATA[

	var w = 800,
	h = 500,
	padding = 0;

	var diameter = 50;
	var tileSize = 256;

	var offset = diameter / 2;
	var data = [];
	var index = 0;
	// X
	d3.range(0, w * 2, diameter ).map(function(v1, i) {
	// Y
	d3.range(0, h, h).map(function(v2, j) {
	console.log(['x', v1, i], ['y', v2, j]);
	//var x = j % 2 ? v1 + offset : v1,
	var x = v1,
	y = v2;
	data.push({
	id: index++,
	centroid: [x, y],
	coordinates: [i, j, (i + j) * -1],
	//customName: 'test',
	visible: x >= padding && x <= w - padding && y >= padding && y <= h - padding
	});
	});
	});



	var border = 10;

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.attr("pointer-events", "all");

	svg.call(d3.behavior.zoom().on("zoom", move));

	svg.append("svg:rect")
	.attr("x", border)
	.attr("y", border)
	.attr('width', w - (border*2))
	.attr('height', h - (border*2))
	.attr('class', 'border')
	;


	render();

	function mouseover(d, i) {
	d3.select(this)
	.attr("class", "highlight");
	}

	function mouseout(d, i) {
	d3.select(this)
	.attr("class", i % 2 ? 'odd' : 'even');
	}

	function click(d, i) {
	d.customName = Date.now();
	console.log("click", this, d, i);
	d3.select(this)
	.style("fill", "yellow");
	}

	function removeClicked() {
	svg.selectAll("path")
	.filter(function(d) {
	return d.customName != 'test';
	})
	.remove();
	}

	function move() {
	var x = d3.event.translate[0],
	y = d3.event.translate[1]

	console.log(x,y);
	data.filter(function(d) {
	return !d.visible
	&& d.centroid[0] + x >= padding
	&& d.centroid[0] + x <= w - padding
	;
	/*
	&& d.centroid[1] + y >= padding
	&& d.centroid[1] + y <= h - padding;
	*/
	}).map(function(d) {
	console.log(x,y, d.centroid, d);
	d.visible = true;
	return d;
	});

	data.filter(function(d) {
	return d.visible
	&& (d.centroid[0] + x < padding
	\|\| d.centroid[0] + x > w - padding
	)
	;
	/*
	\|\| d.centroid[1] + y < padding
	\|\| d.centroid[1] + y > h - padding);
	*/
	}).map(function(d) {
	console.log(d.id, 'invisible');
	d.visible = false;
	return d;
	});
	/*
	*/

	render();

	// do the move
	svg.selectAll("g")
	.attr("transform", "translate(" + [x, 10] + ")" /+ "scale(" + d3.event.scale + ")"/);
	}

	function render() {
	var grid = svg.selectAll("g")
	.data(
	data.filter(function(d) { return d.visible; }),
	function(d) { return d.id; }
	);

	var tile= grid.enter()
	.sort(function(a, b) { return a.id - b.id; })
	.append("svg:g")
	.attr('class', function(d, i) {
	return i % 2 ? 'odd' : 'even';
	})
	;
	tile
	.append("svg:rect")
	.attr('width', diameter)
	.attr('height', diameter)
	.attr('id', function(d, i) { return "g_" + d.id; })
	.attr('class', function(d, i) {
	return i % 2 ? 'odd' : 'even';
	})
	.attr('x', function(d, i) {
	return d.centroid[0];
	})
	.attr('y', function(d) {
	// return 0;
	return d.centroid[1];
	})
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)
	.on("click", click)
	;
	tile
	.append('svg:text').text(function(d,i) { return d.id; })
	.attr('dy', '.71em')
	.attr('stroke', 'black')
	.attr('x', function(d, i) {
	return d.centroid[0] + 6;
	// return i * diameter + 6;
	})
	.attr('y', function(d, i) {
	return d.centroid[1] + 6;
	// return i * diameter + 6;
	})
	// .attr('y', '6')
	//.attr('x', 10)
	;

	grid.exit().remove();
	}


	// ]]>
	</script>
	</body>
	</html>