trellis

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>scatter</title>
    <style>
      body {
        margin: 0px;
      }

</style>
  </head>
  <body>
    <script>

var xScale2 = d3.scaleLinear()
                     .range([0,innerWidth])
      				 .domain([0, d3.max(dataset2, function(d){ return d.age; })]);
      var yScale2 = d3.scaleLinear()
      				 .range([innerHeight/2,20])
      				 .domain([0, d3.max(dataset1, function(d){ return d.worth; })]);
      
      var svg = d3.select("body").append("svg")
      	.attr("width", width)
        .attr("height", height)

// text label for the x axis
      svg.append("text")             
        .attr("transform",
            "translate(" + (700) + " ," + 
                           (220) + ")")
        .style("text-anchor", "middle")
        .style("font-size", "13px") 
        .text("Age");
  // text label for the y axis
      svg.append("text")
        .attr("transform",
            "translate(" + (60) + " ," + 
                           (20) + ")")
        .attr("dy", "1em")
        .style("font-size", "13px")
        .style("text-anchor", "middle")
        .text("billion USD");
      svg.append("text")
        .attr("x", (width / 2)-100)             
        .attr("y", 30-(margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Female Age vs worth"); 
    
    // text label for the x axis
    svg.append("text")             
        .attr("transform",
            "translate(" + (700) + " ," + 
                           (400) + ")")
        .style("text-anchor", "middle")
        .style("font-size", "13px") 
        .text("Age");
  // text label for the y axis
      svg.append("text")
        .attr("transform",
            "translate(" + (60) + " ," + 
                           (220) + ")")
        .attr("dy", "1em")
        .style("font-size", "13px")
        .style("text-anchor", "middle")
        .text("billion USD");
      svg.append("text")
        .attr("x", (width / 2)-100)             
        .attr("y", 250-(margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Male Age vs worth"); 
      
      var g = svg.append('g')
          .attr('transform', "translate("+margin.left + "," + margin.top +")")
      		.attr('width', innerWidth)
          .attr('height',innerHeight)
           
      var xAxis1 = d3.axisBottom()
        .scale(xScale1)
        .tickPadding(15);
      
      var yAxis1 = d3.axisLeft()
        .scale(yScale1)
        .tickPadding(15);
    
      var xAxis2 = d3.axisBottom()
        .scale(xScale2)
        .tickPadding(15);
      
      var yAxis2 = d3.axisLeft()
        .scale(yScale2)
        .tickPadding(15);
      
      var xAxisG1 = g.append('g')
          .attr("transform", "translate(0," + innerHeight/2 + ")");
      
      var yAxisG1 = g.append('g')
        //   .attr("transform", "translate(0," + innerHeight/2 + ")");
    
      var xAxisG2 = g.append('g')
          .attr("transform", "translate(0," + innerHeight + ")");
      
      var yAxisG2 = g.append('g');
      
    //   var circle = svg.data(dataset1)
    //   	    .enter().append("g")
    //         .attr("cx", function (d) { if(d.age!=-1&&d.gender=="male"){return xScale1(d.age);} if(d.age!=-1&&d.gender=="female"){return xScale2(d.age);}})
    //         .attr("cy", function (d) { if(d.age!=-1&&d.gender=="male"){return yScale1(d.worth);} else if(d.age!=-1&&d.gender=="male"){return yScale2(d.worth);}})
    //         .attr("r", 2)
    //         .attr("fill","red");

g.selectAll('circle')
        .data(dataset2)
      	.enter().append('svg:circle')
            .attr('cx', function (d) { if(d.age>0){return xScale2(d.age)}; } )
            .attr('cy', function (d) { if(d.age>0){return yScale2(d.worth)}; } )
            .attr('r', 2)
                  .attr("fill", "blue");
        
        g.selectAll('circle')
        .data(dataset1)
      	.enter().append('svg:circle')
            .attr('cx', function (d) { if(d.age>0){return xScale1(d.age)}; } )
            .attr('cy', function (d) { if(d.age>0){return yScale1(d.worth)}; } )
            .attr('r', 2)
                  .attr("fill", "blue");
        // g
        // .data(dataset2)
      	// .enter().append('svg:circle')
        //     .attr('cx', function (d) { if(d.age!=-1){return xScale2(d.age)}; } )
        //     .attr('cy', function (d) { if(d.age!=-1){return yScale2(d.worth)+100}; } )
        //     .attr('r', 2)
      	// 		.attr("fill", "blue");

xAxisG1.attr("class","axis").call(xAxis1);
        yAxisG1.attr("class","axis").call(yAxis1);
        xAxisG2.attr("class","axis").call(xAxis2);
        yAxisG2.attr("class","axis").call(yAxis2);
        });
    </script>
  </body>
</html>

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