scattertri

<!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>

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) + " ," + 
                           (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("Age vs Worth vs Gender");

svg.append("text")
        .attr("x", 150)             
        .attr("y", 30)
        .attr("text-anchor", "middle")  
        .style("font-size", "10px")  
        .text("Male"); 
      svg.append("text")
        .attr("x", 150)             
        .attr("y", 50)
        .attr("text-anchor", "middle")  
        .style("font-size", "10px")   
        .text("Female"); 
      
      var g = svg.append('g')
          .attr('transform', "translate("+margin.left + "," + margin.top +")")
      		.attr('width', innerWidth)
          .attr('height',innerHeight)
           
      var xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15);
      
      var yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(15);
      
      var xAxisG = g.append('g')
          .attr("transform", "translate(0," + innerHeight + ")");
      
      var yAxisG = g.append('g');
      
 		g.selectAll('circle')
        .data(dataset)
      	.enter().append('svg:circle')
            .attr('cx', function (d) { if(d.age!=-1){return xScale(d.age)}; } )
            .attr('cy', function (d) { if(d.age!=-1){return yScale(d.worth)}; } )
            .attr('r', 2)
                  .attr("fill", function(d){if(d.gender=="male"){return "blue"} else{return "red"}});
                  
        // var svgContainer = d3.select("body").append("svg")
        //                     .attr("width", 200)
        //                     .attr("height", 200);
 
        //Draw the Circle
        var circle = svg.append("circle")
            .attr("cx", 130)
            .attr("cy", 27)
            .attr("r", 5)
            .attr("fill","blue");
        var circle = svg.append("circle")
            .attr("cx", 130)
            .attr("cy", 47)
            .attr("r", 5)
            .attr("fill","red");

xAxisG.attr("class","axis").call(xAxis);
        yAxisG.attr("class","axis").call(yAxis);
        
        
        });
    </script>
  </body>
</html>

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