cpdean/index.html

## index.html
<!DOCTYPE html>
<style>

circle {
  stroke: #060606;
}
body {
    background-color: #555;
}

.chart rect {
    fill: #0d0;
}

.processing {
    fill: #9d0;
    -webkit-animation: pulse .5s infinite;
}

@-webkit-keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: .5; }
    100% { opacity: 1; }
}

</style>
<body>
<div id="bars">
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var in_queue = 5;
var processing = 30;
var in_queue_data = d3.range(in_queue);
var processing_data = d3.range(processing);
var queue_monitor = d3.select("body").append("svg")
                                     .attr("class", "chart")
                                     .attr("width", 1000)
                                     .attr("height", 200);

var divider = [~~queue_monitor.attr("width") / 2, 100];

queue_monitor.append("line")
             .attr("stroke", "#0f0")
             .attr("x1", divider[0])
             .attr("x2", divider[0])
             .attr("y1", 0)
             .attr("y2", divider[1]);


var box = [10, 20]
// show what's in queue
queue_monitor.selectAll("rect.queued")
        .data(in_queue_data)
    .enter().append("rect")
        .attr("class", "queued")
        .attr("width", box[0])
        .attr("height", box[1])
        .attr("y", function(d){ return 0; })
        .attr("x", function(d){ return -3 + divider[0] - box[0] - (11 * d);});

// show what's processing
queue_monitor.selectAll("rect.processing")
        .data(processing_data)
    .enter().append("rect")
        .attr("class", "processing")
        .attr("width", box[0])
        .attr("height", box[1])
        .attr("data-what", function(d){return d;})
        .attr("y", function(d){ return 0; })
        .attr("x", function(d){ return 3 + divider[0] + (11 * d);});
</script>
	<!DOCTYPE html>
	<style>

	circle {
	stroke: #060606;
	}
	body {
	background-color: #555;
	}

	.chart rect {
	fill: #0d0;
	}

	.processing {
	fill: #9d0;
	-webkit-animation: pulse .5s infinite;
	}

	@-webkit-keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: .5; }
	100% { opacity: 1; }
	}

	</style>
	<body>
	<div id="bars">
	</div>
	</body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var in_queue = 5;
	var processing = 30;
	var in_queue_data = d3.range(in_queue);
	var processing_data = d3.range(processing);
	var queue_monitor = d3.select("body").append("svg")
	.attr("class", "chart")
	.attr("width", 1000)
	.attr("height", 200);

	var divider = [~~queue_monitor.attr("width") / 2, 100];

	queue_monitor.append("line")
	.attr("stroke", "#0f0")
	.attr("x1", divider[0])
	.attr("x2", divider[0])
	.attr("y1", 0)
	.attr("y2", divider[1]);


	var box = [10, 20]
	// show what's in queue
	queue_monitor.selectAll("rect.queued")
	.data(in_queue_data)
	.enter().append("rect")
	.attr("class", "queued")
	.attr("width", box[0])
	.attr("height", box[1])
	.attr("y", function(d){ return 0; })
	.attr("x", function(d){ return -3 + divider[0] - box[0] - (11 * d);});

	// show what's processing
	queue_monitor.selectAll("rect.processing")
	.data(processing_data)
	.enter().append("rect")
	.attr("class", "processing")
	.attr("width", box[0])
	.attr("height", box[1])
	.attr("data-what", function(d){return d;})
	.attr("y", function(d){ return 0; })
	.attr("x", function(d){ return 3 + divider[0] + (11 * d);});
	</script>