Old school D3 from simpler times

All examples By author By category About

bewest

Full window Github gist

stephen demjanenko

<html>
  <head>
    <title>D3 Hacking!</title>
      <script type="text/javascript" src="./d3.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/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>

Updated missing url https://raw.github.com/bewest/d3/bewest/d3.js to https://cdn.jsdelivr.net/gh/bewest/d3/bewest/d3.js

https://raw.github.com/bewest/d3/bewest/d3.js