micahstubbs/.block

## .block
border: none
license: CC0-1.0

## README.md

      
    Raw
  

              README.md
            
          
    A little demo of an infinitely long-living queue with 24 parallel slots for tasks. The sentinel task that never invokes the callback prevents the queue from ending, even if there are not any currently-active tasks.
There is a downside to this approach, however, which is that the queue’s internal task results array increases in length by one with each task, even though in this case the queue’s results are never triggered. Thus, be careful using this pattern if you really expect the queue to live indefinitely. Alternatively, it might be worth extending Queue’s minimal API to allow tasks to be processed without tracking their return value.
forked from mbostock's block: Infinite Queue

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  padding: 40px;
}

div {
  background: steelblue;
  font-family: sans-serif;
  color: white;
  padding: 4px;
  margin-bottom: 2px;
  text-shadow: 0 1px 0 #000;
  overflow: hidden;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script>

var count = 0,
    duration = d3.random.normal(5000, 500),
    parallelism = 24;

var q = queue(parallelism + 1);

q.defer(function sentinel() {}); // run forever

d3.range(10).forEach(repeat); // a few initial tasks

function repeat() {
  q.defer(function(callback) {
    console.log('duration', duration());
    // original bars
    d3.select("body").append("div")
    		.style('position', 'fixed')
    		.style('margin-right','470px')
        .style("width", "0px")
        .text(++count)
      .transition()
        .duration(duration())
        .style("width", "460px")
      .transition()
        .duration(250)
        .style("margin-top", function() { return -this.clientHeight + "px"; })
        .style("opacity", 0)
        .each("end", function() { callback(null); })
        .remove();

    // with an opacity transition
    d3.select("body").append("div")
    		.style("opacity", 0)
    		.style('margin-left','470px')
        .style("width", "0px")
        .text(++count)
      .transition()
        .duration(duration())
        .style("width", "460px")
    		.style("opacity", 0.7)
      .transition()
        .duration(250)
        .style("margin-top", function() { return -this.clientHeight + "px"; })
        .style("opacity", 0)
        .each("end", function() { callback(null); })
        .remove();

    setTimeout(repeat, duration());
  });
}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## preview.xcf

      
    Raw
  

              preview.xcf
            
          
            View raw
        
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	padding: 40px;
	}

	div {
	background: steelblue;
	font-family: sans-serif;
	color: white;
	padding: 4px;
	margin-bottom: 2px;
	text-shadow: 0 1px 0 #000;
	overflow: hidden;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/queue.v1.min.js"></script>
	<script>

	var count = 0,
	duration = d3.random.normal(5000, 500),
	parallelism = 24;

	var q = queue(parallelism + 1);

	q.defer(function sentinel() {}); // run forever

	d3.range(10).forEach(repeat); // a few initial tasks

	function repeat() {
	q.defer(function(callback) {
	console.log('duration', duration());
	// original bars
	d3.select("body").append("div")
	.style('position', 'fixed')
	.style('margin-right','470px')
	.style("width", "0px")
	.text(++count)
	.transition()
	.duration(duration())
	.style("width", "460px")
	.transition()
	.duration(250)
	.style("margin-top", function() { return -this.clientHeight + "px"; })
	.style("opacity", 0)
	.each("end", function() { callback(null); })
	.remove();

	// with an opacity transition
	d3.select("body").append("div")
	.style("opacity", 0)
	.style('margin-left','470px')
	.style("width", "0px")
	.text(++count)
	.transition()
	.duration(duration())
	.style("width", "460px")
	.style("opacity", 0.7)
	.transition()
	.duration(250)
	.style("margin-top", function() { return -this.clientHeight + "px"; })
	.style("opacity", 0)
	.each("end", function() { callback(null); })
	.remove();

	setTimeout(repeat, duration());
	});
	}

	</script>