What is d3.geo.pipeline? - d3.js

Question

If you follow Mike Bostock's bl.ocks, you know for the last 8 months d3.geo.pipeline() has been a frequent component to his projects.
But what's it do?
You see him set pipelines up like this:
var sketch = d3.geo.pipeline()
.source(d3.geo.jsonSource)
.pipe(resample, .020)
.pipe(jitter, .004)
.pipe(smooth, .005)
.sink(d3.geo.jsonSink);
via
There is no documentation in the d3.geo wiki.
Some beautified JS in the unreleased D3 used in the code example reveals this function:
lo.geo.pipeline = function() {
var n = [];
return {
source: function() {
return n[0] = arguments, this
},
pipe: function() {
return n.push(arguments), this
},
sink: function() {
for (var t, e = arguments[0].apply(null, [].slice.call(arguments, 1)), r = e; t = n.pop();) {
var u = [].slice.call(t, 1);
u.push(e), e = t[0].apply(null, u)
}
return function() {
return e.apply(this, arguments), r.value && r.value()
}
}
}
It also appears in these bl.ocks:
Back-facing Hemisphere
Multiple rotations
Satellite

Answer 1

I'm not familiar with d3.js, but I looked at its source code and found that this feature is located in branch graphics-pipeline.
For example you can find related code here: https://github.com/mbostock/d3/commit/a3f2adab7f85e2a0c82288ead88c1e484c9e3ea3
Small code snippet to illustrate how it works:
var pipeline = function () {
var pipes = [];
return {
source: function () {
pipes[0] = arguments;
return this;
},
pipe: function () {
pipes.push(arguments);
return this;
},
sink: function () {
var sink = arguments[0].apply(null, [].slice.call(arguments, 1)),
pipe;
while (pipe = pipes.pop()) {
var args = [].slice.call(pipe, 1);
args.push(sink);
sink = pipe[0].apply(null, args);
}
return sink;
}
};
};
var log = document.getElementById('log');
function f() {
var argsAsString = Array.prototype.join.call(arguments, ', ');
var resultName = 'r' + f.callCounter++;
log.innerHTML += resultName + ' = f(' + argsAsString + ')<br>';
return resultName;
}
f.callCounter = 1;
pipeline().
source(f, 'a', 1).
pipe(f, 'b', 2).
pipe(f, 'c', 3).
sink(f, 'd', 4);
<div id="log"></div>
Few comments about this feature:
Methods source and pipe work with the same private property pipes. The difference only is that source set initial value for pipes (pipes[0]), when each call to pipe pushes new pipe into collection.
Previous fact gives us knowledge about d3.geo.jsonSource internal structure. It should be similar to arguments passed to pipe: first argument is something callable (function), rest of arguments - parameters.
Assume that arguments = [f, a, b, c]. Then JavaScript pattern arguments[0].apply(null, [].slice.call(arguments, 1)) means: f(a, b, c). You can see several places of its usage in sink implementation.
Regarding practical usage.
We can use it if we need to "chain" (or "pipe") data processing. For example if we have such code:
function f(a, b, previousResult)
{
return a * b + (previousResult || 0);
}
var p = pipeline().
source(f, 1, 1).
pipe(f, 2, 10).
pipe(f, 3, 100).
sink(f, 4, 1000);
Then the result (value of p) will be 4321.
In this particular case we need to clarify what is d3.geo.jsonSink and d3.geo.jsonSource, but I hope that I helped you to see the meaning of pipeline function.