panelRender

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      position:fixed; 
      top:0;
      right:0;
      bottom:0;
      left:0; }
    .clear {
   	 clear: both;
		}
    
    .container {
      display: flex;
      background: blue;
    }
    
    .cell {
      min-width: 200px;
      min-height: 100px;
      margin: 10px;
      float: left;
      text-align: center;
      border: #969696 solid thin;
      padding: 5px;
		}
    .compType {
/* 	    margin: 5px; */
      fill: white;
      stroke: orange;
      stroke-width: 0.4px;
      color: grey;
  	  border: #969696 solid thin;
   	 	padding: 5px;
		}
    .pmtSchedule {
/* 	    margin: 5px; */
      fill: white;
      stroke: blue;
      stroke-width: 0.3px;
      color: grey;
  	  border: #969696 solid thin;
   	 	padding: 5px;
		}
  </style>
</head>

// var data = [10,90,15];
    let cashData = [10,90,15],
        equityData = [20, 15, 5],
        perksData = [10, 15, 52],
        timeData = [200, 2000, 100];

var linear = d3.scaleLinear()
        .domain([1, 10])
        .range([1, 10]);
    var linearCapped = d3.scaleLinear()
        .domain([1, 10])
        .range([1, 20]);

var log = d3.scaleLog();
    var logCapped = d3.scaleLog()
        .domain([1, 10])
        .rangeRound([1, 10]);

function render(data, compType, pmtSchedule, scale, selector) {
      let maxArrLength = Math.max(compType.length, pmtSchedule.length, data.length);
      let panel = d3.selectAll('svg').select(selector)
      					.append('svg')
      					.style("display", "flex")
              	.data(data);

panel.enter()
          		.append("g")
                .classed("cell", true)
                .classed("cash", true)
                .style("display", "flex-row")
             .append('g')
       				  .classed("sliderPanel", true)
		   	        .attr("transform", "translate(" + 20 + "," + 5 + ")")
 						    .text(function (d,i) {
          		      return "paid in cash  => " + pmtSchedule[i];
        	       })

panel.enter()
           		.append("g")
                 .classed("cell", true)
                 .classed("equity", true)
                 .style("display", "inline-block")
              .append('g')
        				  .classed("sliderPanel", true)
 		   	          .attr("transform", "translate(" + 20 + "," + 45 + ")")
  						    .text(function (d,i) {
           		      return "paid in equity  => " + pmtSchedule[i];
         	       })

//        let cashComp = d3.select('body')
//        		.select(".cash")
//        		.data(data);

//        cashComp.append("g")
//        	.enter()
//          .classed("cash", true)
//          .classed("pmtSchedule", true)
// // 	            	.style("display", "auto")
//       	 .attr("transform", "translate(20,40)")  								 							 .text(function (d,i) {
//           				return pmtSchedule[i];
//         			})

//        	.append('g')
//        		.classed("compType", true)
// // 		      .attr("transform", "translate(" + 20 + "," + 5 + ")")
// 					.attr("x", 20)
//           .attr("y",20)
//  					.text(function (d,i) {
//           	return compType[i];
//         	})

}

render(cashData, compType, pmtSchedule, linear, "#signBonus");
//     render(paymentSchedule, linear, "#baseSalary");
//     render(paymentSchedule, linear, "#performanceBonus");

</script>
</body>

https://d3js.org/d3.v4.min.js