JSFiddle - React, Tailwind, and code Playground

HTML

<p id="json1"></p>
<p id="json2"></p>
<p id="json3"></p>

JavaScript

//GeoJSON polygon object
var poly = {
    "type": "Polygon", 
    "coordinates": [
        [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
    ]
}

//a stream transform that applies the simple translate [20,5]:
var transform = d3.geo.transform({
    point:function(x,y){this.stream.point(x+20,y+5)}
}) 

//a path generator with the transform applied using the projection() method
var path1 = d3.geo.path().projection(transform);

//++ Question: what if i want to apply a transform after applying a standard geographic projection? It seems like projection.stream(listener) is the right approach, but what should the listener argument be?
var proj = d3.geo.equirectangular();

//my best guess throws an errror
//var path2 = transform.stream(proj.stream());
// Answer here
var proj_then_transform = {
        stream: function(s) { 
            return proj.stream(transform.stream(s)); 
        }
     };

var path2 = d3.geo.path().projection(proj_then_transform);

// An alternative way, just to check
var default_translate = proj.translate();
var proj_then_transform2 = d3.geo.equirectangular()
    .translate([default_translate[0]+20, default_translate[1]+5]);

var path3 = d3.geo.path().projection(proj_then_transform2);

t1 = d3.select("p#json1");
t2 = d3.select("p#json2");
t3 = d3.select("p#json3");

t1.text(path1(poly));
t2.text(path2(poly));
t3.text(path3(poly));