bewest/README

## README
Playing around with D3 with Stephen Demjanenko.

## index.html
<html>
  <head>
    <title>D3 Hacking!</title>
      <script type="text/javascript" src="./d3.js"></script>
      <script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.js"></script>

<style type='text/css'>

.chart {
  margin-left: 42px;
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

.chart div {
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

.chart rect {
  stroke: white;
  fill: steelblue;
}

.chart text.bar {
  fill: white;
}

</style>

  </head>
  <body>

<script type='text/javascript'>
var t = 1297110663, // start time (seconds since epoch)
    v = 70, // start value (subscribers)
    data = d3.range(50).map(next); // starting dataset

function next() {
  return {
    time: ++t,
    value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
  };
}

var w = 20, h = 240;
var x = d3.scale.linear().domain([0, 1]).range([0, w]);
var y = d3.scale.linear().domain([0, 100]).rangeRound([0, h]);
var plot_width = w * data.length - 1;

var chart = d3.select("body").append("svg:svg").attr("class", "chart").attr("width", w * data.length - 1).attr("height", h);
chart.selectAll("rect").data(data).enter().append("svg:rect")
     .attr("x", function(d, i) { return (x(i) - .5 ); })
     .attr("y", function(d) { return h - y(d.value) - .5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); });


chart.append("svg:line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h - .5)
     .attr("y2", h - .5)
     .attr("stroke", "#000");


c = d3.select(".chart");
var mousedown_pos = 0;
var dragging = 0;
var offset_x = 0, prev_offset = 0;
var index_offset = 0;
var added_bar = 1;
while(added_bar == 1) {
	load_side_data();
}
c.on("mousedown", function(d) {
	dragging = 1;
	mousedown_pos = d3.event.clientX;

});
c.on("mousemove", function(d) {
	if(dragging == 1) {
		offset_x = prev_offset + (mousedown_pos - d3.event.clientX);
		load_side_data();
	}
});
c.on("mouseup", function(d) {
	prev_offset = offset_x;
	offset_x = 0;
	dragging = 0;
});

function load_side_data() {
	var max_index = d3.select(".chart").selectAll("rect")[0].length;
	d3.select(".chart").selectAll("rect").attr("x", function(d,i){
	    return(w*(i-index_offset)-0.5-offset_x);
	});
	added_bar = 0;
	if(Math.ceil((plot_width - offset_x)/w) < (max_index - index_offset)) {
		data.push(next());
		added_bar = 1;
		console.log("end add");
		var rect = chart.selectAll("rect")
		       .data(data, function(d) { return d.time; });
		rect.enter().insert("svg:rect", "line")
		       .attr("x", function(d, i) { console.log([i, index_offset]); return(w*(i-index_offset) - 0.5 + offset_x); })
		       .attr("y", function(d) { return h - y(d.value) - .5; })
		       .attr("width", w)
		       .attr("height", function(d) { return y(d.value); })
	}
	if(Math.ceil((plot_width - offset_x)/w) > index_offset) {
		data.unshift(next());
		added_bar = 1;
		++index_offset;
		console.log("start add");
		var rect = chart.selectAll("rect")
		       .data(data, function(d) { return d.time; });
		rect.enter().insert("svg:rect", "rect")
		       .attr("x", function(d, i) { return(w*(i-index_offset) - 0.5 + offset_x); })
		       .attr("y", function(d) { return h - y(d.value) - .5; })
		       .attr("width", w)
		       .attr("height", function(d) { return y(d.value); })

	}
}


function redraw() {

   var rect = chart.selectAll("rect")
       .data(data, function(d) { return d.time; });

   rect.enter().insert("svg:rect", "line")
       .attr("x", function(d, i) { return x(i + 1) - .5 - offset_x; })
       .attr("y", function(d) { return h - y(d.value) - .5; })
       .attr("width", w)
       .attr("height", function(d) { return y(d.value); })
     .transition()
       .duration(1000)
       .attr("x", function(d, i) { return x(i) - .5 - offset_x; });

   rect.transition()
       .duration(1000)
       .attr("x", function(d, i) { return x(i) - .5 - offset_x; });

   rect.exit().transition()
       .duration(1000)
       .attr("x", function(d, i) { return x(i - 1) - .5 - offset_x; })
       .remove();

 }
</script>

  </body>
</html>
	<html>
	<head>
	<title>D3 Hacking!</title>
	<script type="text/javascript" src="./d3.js"></script>
	<script type="text/javascript" src="https://raw.github.com/bewest/d3/bewest/d3.js"></script>

	<style type='text/css'>

	.chart {
	margin-left: 42px;
	font: 10px sans-serif;
	shape-rendering: crispEdges;
	}

	.chart div {
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 1px;
	color: white;
	}

	.chart rect {
	stroke: white;
	fill: steelblue;
	}

	.chart text.bar {
	fill: white;
	}

	</style>

	</head>
	<body>

	<script type='text/javascript'>
	var t = 1297110663, // start time (seconds since epoch)
	v = 70, // start value (subscribers)
	data = d3.range(50).map(next); // starting dataset

	function next() {
	return {
	time: ++t,
	value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5)))
	};
	}

	var w = 20, h = 240;
	var x = d3.scale.linear().domain([0, 1]).range([0, w]);
	var y = d3.scale.linear().domain([0, 100]).rangeRound([0, h]);
	var plot_width = w * data.length - 1;

	var chart = d3.select("body").append("svg:svg").attr("class", "chart").attr("width", w * data.length - 1).attr("height", h);
	chart.selectAll("rect").data(data).enter().append("svg:rect")
	.attr("x", function(d, i) { return (x(i) - .5 ); })
	.attr("y", function(d) { return h - y(d.value) - .5; })
	.attr("width", w)
	.attr("height", function(d) { return y(d.value); });


	chart.append("svg:line")
	.attr("x1", 0)
	.attr("x2", w * data.length)
	.attr("y1", h - .5)
	.attr("y2", h - .5)
	.attr("stroke", "#000");


	c = d3.select(".chart");
	var mousedown_pos = 0;
	var dragging = 0;
	var offset_x = 0, prev_offset = 0;
	var index_offset = 0;
	var added_bar = 1;
	while(added_bar == 1) {
	load_side_data();
	}
	c.on("mousedown", function(d) {
	dragging = 1;
	mousedown_pos = d3.event.clientX;

	});
	c.on("mousemove", function(d) {
	if(dragging == 1) {
	offset_x = prev_offset + (mousedown_pos - d3.event.clientX);
	load_side_data();
	}
	});
	c.on("mouseup", function(d) {
	prev_offset = offset_x;
	offset_x = 0;
	dragging = 0;
	});

	function load_side_data() {
	var max_index = d3.select(".chart").selectAll("rect")[0].length;
	d3.select(".chart").selectAll("rect").attr("x", function(d,i){
	return(w*(i-index_offset)-0.5-offset_x);
	});
	added_bar = 0;
	if(Math.ceil((plot_width - offset_x)/w) < (max_index - index_offset)) {
	data.push(next());
	added_bar = 1;
	console.log("end add");
	var rect = chart.selectAll("rect")
	.data(data, function(d) { return d.time; });
	rect.enter().insert("svg:rect", "line")
	.attr("x", function(d, i) { console.log([i, index_offset]); return(w*(i-index_offset) - 0.5 + offset_x); })
	.attr("y", function(d) { return h - y(d.value) - .5; })
	.attr("width", w)
	.attr("height", function(d) { return y(d.value); })
	}
	if(Math.ceil((plot_width - offset_x)/w) > index_offset) {
	data.unshift(next());
	added_bar = 1;
	++index_offset;
	console.log("start add");
	var rect = chart.selectAll("rect")
	.data(data, function(d) { return d.time; });
	rect.enter().insert("svg:rect", "rect")
	.attr("x", function(d, i) { return(w*(i-index_offset) - 0.5 + offset_x); })
	.attr("y", function(d) { return h - y(d.value) - .5; })
	.attr("width", w)
	.attr("height", function(d) { return y(d.value); })

	}
	}


	function redraw() {

	var rect = chart.selectAll("rect")
	.data(data, function(d) { return d.time; });

	rect.enter().insert("svg:rect", "line")
	.attr("x", function(d, i) { return x(i + 1) - .5 - offset_x; })
	.attr("y", function(d) { return h - y(d.value) - .5; })
	.attr("width", w)
	.attr("height", function(d) { return y(d.value); })
	.transition()
	.duration(1000)
	.attr("x", function(d, i) { return x(i) - .5 - offset_x; });

	rect.transition()
	.duration(1000)
	.attr("x", function(d, i) { return x(i) - .5 - offset_x; });

	rect.exit().transition()
	.duration(1000)
	.attr("x", function(d, i) { return x(i - 1) - .5 - offset_x; })
	.remove();

	}
	</script>

	</body>
	</html>