Assignment 4 Line Graph: Bill Gates' Worth Over Time

<!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.scaleLinear()
          .range([height, 0]);
          
var parseTime = d3.timeParse("%Y")

//dataByName: array of objects by billionaire name
//each object: name and an array of key-value pairs where key=year value=worth in billions
var dataByName = {};
var personsWorth;
var personsYears;
var personsData = [];
var personsName = 'Bill Gates';

var line = d3.line()
    .x(function(d) { return xscale(d[0]); })
    .y(function(d) { return yscale(d[1]); });

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

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

if(!dataByName.hasOwnProperty(d.name))
  {

var tmpName = d.name;
    var tmpYear = d.year;

dataByName[tmpName] =  {};
    dataByName[tmpName].years = [];
    dataByName[tmpName].worths = [];
    dataByName[tmpName].years.push(tmpYear);
    dataByName[tmpName].worths.push(d[ 'worth in billions' ]);
  
  }
  else
  {
    var tmpName = d.name;
    var tmpYear = d.year;
    dataByName[tmpName].years.push(tmpYear);
    dataByName[tmpName].worths.push(d[ 'worth in billions' ]);
  }

personsWorth = dataByName[personsName].worths;
  personsYears = dataByName[personsName].years;

xscale.domain(d3.extent(dataset, function(d) { return d.year; }));
  yscale.domain([0, d3.max(dataset, function(d) { return d[ 'worth in billions' ]; })]);

});//close dataset.forEach(datapoint)
  
  for (i = 0; i < personsWorth.length; i++) { 
    personsData.push([personsYears[i],personsWorth[i]]);
  }
  
g.append("path")
      .datum(personsData)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line)

g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xscale).tickFormat(d3.timeFormat("%Y")))
      .append("text")
      .attr("fill", "#000")
      .attr("y", 20)
      .attr("x", width /2)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Date");

g.append("g")
      .call(d3.axisLeft(yscale))
      .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", -30)
      .attr("x", -(height/2) + 10)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Worth in Billions ");

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("Bill Gates' Worth over Time");

});//close reading d3.csv reader

</script>

</body>

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