Assignment 4 ScatterPlot Trivariate

<!DOCTYPE html>
<meta charset="utf-8">
  
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>

<script>

// set the dimensions and margins of the graph
var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// set the ranges
var xscale = d3.scaleLinear()
    .range([0, width]);

var yscale = d3.scaleLog()
          .range([height, 0]);

// axes creations
  var xAxis = d3.axisBottom()
    .scale(xscale);

var yAxis = d3.axisLeft()
    .scale(yscale).tickFormat(d3.format(".1f"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
     .attr("transform", 
            "translate(" + margin.left + "," + margin.top + ")");

// scale the color
var color = d3.scaleOrdinal(d3.schemeCategory20);

// get the data
d3.csv("billionaires.csv", function(error, dataset) {
  if (error) throw error;

// format the data
  dataset.forEach(function(d) {
    d.age = +d.age;
    d[ 'worth in billions' ] = +d[ 'worth in billions' ];

});//close dataset.forEach(datapoint)

xscale.domain(d3.extent(dataset, function(d) { return d.age; })).nice();
   yscale.domain(d3.extent(dataset, function(d) { return d['worth in billions']; })).nice();
  //translate x-axis to (0,height) and it's alread defined to be a bottom axis. 
    svg.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('class', 'x axis')
      .call(xAxis)
      .append("text")
      .attr("fill", "#000")
      .attr("y", 20)
      .attr("x", width/2)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Billionaire's Age");

// y-axis is translated to (0,0)
    svg.append('g')
      .attr('transform', 'translate(0,0)')
      .attr('class', 'y axis')
      .call(yAxis)
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", -40)
      .attr("x", -(height/2) + 10)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Worth in Billions");

//LEGEND
      var legend = svg.selectAll('legend')
      .data(color.domain())
      .enter().append('g')
      .attr('class', 'legend')
      .attr('transform', function(d,i){ return 'translate(0,' + i * 20 + ')'; });

legend.append('rect')
      .attr('x', width)
      .attr('width', 18)
      .attr('height', 18)
      .style('fill', color);

// add text to the legend elements.
    legend.append('text')
      .attr('x', width - 6)
      .attr('y', 9)
      .attr('dy', '.35em')
      .style('text-anchor', 'end')
      .text(function(d){ return d; });

svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", margin.top + 5)
        .attr("text-anchor", "middle")  
        .style("font-size", "30px") 
        .style("text-decoration", "underline")  
        .text("Age vs Worth, Colored by Region");

});//close reading d3.csv reader

</script>

</body>

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