D3 Examples - Assignment 4 Line Graph: Bill Gates' Worth Over Time

xxxxxxxxxx
 
​
​
​
<!DOCTYPE html>
<meta charset="utf-8">
<!-- 
      used this for reference: https://bl.ocks.org/mbostock/3883245
 -->  
<body>
  
​
<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
<!-- bar chart code -->
<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>
​
<!-- </script> -->
</body>
​
    