bewest · November 14, 2011 05:25
diff --git a/README b/README
 Playing around with D3 with Stephen Demjanenko.
diff --git a/index.html b/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>