title: What is the proper way to use D3's projection.stream()?
body: <p>So I'm experimenting a bit with <code>D3's geo stream</code> <code>API</code>, and things feel a bit hazy. I've been reading through the documentation here: </p>
  
  <p><a href="https://github.com/mbostock/d3/wiki/Geo-Streams" rel="noreferrer">https://github.com/mbostock/d3/wiki/Geo-Streams</a></p>
  
  <p>One point of confusion I have is the proper implementation of stream transforms. Let's say I create one:</p>
  
  <pre><code>//a stream transform that applies a simple translate [20,5]:
  var transform = d3.geo.transform({
      point:function(){this.stream.point(x+20,y+5)}
  }) 
  </code></pre>
  
  <p>Per the documentation, <em>this.stream</em> references the "wrapped stream." But what is the stream, really? From what I can gather, it is more of a procedure than explicit data structure--a sequence of data and function calls to transform the data. The syntax above seems to suggest that the wrapped stream is simply the object containing "<a href="https://github.com/mbostock/d3/wiki/Geo-Streams#stream_point" rel="noreferrer">stream listeners</a>"  </p>
  
  <p>Moving on, I'm able to apply the stream transform using the projection method:</p>
  
  <pre><code>//a path generator with the transform applied using the projection() method
  var path = d3.geo.path().projection(transform);
  </code></pre>
  
  <p>While I don't quite understand the underlying mechanics, the effect seems relatively straightforward: the underlying transform function of the path generator is called with transformed <code>x,y</code> arguments. </p>
  
  <p>For my use case, I don't find this that helpful, particularly because my input data is not already projected. I'd like to use a projection to transform the data first, then transform those outputted coordinates. To that end, is there a general pattern for layering transforms?</p>
  
  <p>I see that <code>D3</code> does provide the projection.stream(<em>listener</em>) pattern which applies the projecting transform first, before applying the listener, but I'm not sure how to implement this. What should the listener argument be? Here's an example: <a href="http://jsfiddle.net/kv7yn8rw/2/" rel="noreferrer">http://jsfiddle.net/kv7yn8rw/2/</a>. </p>
  
  <p>Any guidance would be greatly appreciated!</p>