Plumbing Primer by StewartNoyce

This primer hints at the concept of a plumbing diagram that can show the circular flow of money in the economy. Can it be implemented with a sankey diagram cfergus #9321009, or will it need some new thinking?

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plumbing</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<style>

body {
  font: 10px sans-serif;
}

rect {
    stroke: none;
    fill: #bbb;
}

path {
    stroke: #fb8702;
    fill: none;
}


</style>
</head>
<body>
<script type="text/javascript">

var width = 960,
    height = 500;
    
var rw = 100,
    rh = 24;
    
var ut = height / 4,
    lt = height * 3 / 4;
    
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("g")
    .attr("transform", "translate( 50," + ut + ")")
  .append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", rw)
    .attr("height", rh);
    
svg.append("g")
    .attr("transform", "translate( 50," + lt + ")")
  .append("rect")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", rw)
    .attr("height", rh);

svg.append("path")
    .attr("d", "M 125 "+ut+" L 125 "+(ut-50)+" L 275 "+(ut-50)+" L 275 "+(lt+rh+50)+" L 125 "+(lt+rh+50)+" L 125 "+(lt+rh))
    .attr("stroke-width", "50");
    
</script>
</body>
</html>