linechart

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

/* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: #ffab00;
    stroke-width: 3;
}

/* Style the dots by assigning a fill and stroke */
.dot {
    fill: #ffab00;
    stroke: #fff;
}

</style>

<body>
</body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// 2. Use the margin convention practice 
var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width 
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// var parseTime = d3.timeParse("%y");
// The number of datapoints
var dataset = [];
d3.csv("billionaires.csv", function(error, data) {
  if(error) throw error;
  // format the data
  data.forEach(function(d) {
      if(d.name=="Bill Gates"){
        dataset.push({year:parseInt(d.year), worth:parseFloat(d.worth)});
      }
  });
  console.log(dataset);

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
    .domain([1995, d3.max(dataset, function(d){ return d.year; })+1]) // input
    .range([0, width]); // output

// 6. Y scale will use the randomly generate number 
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d){ return d.worth; })]) // input 
    .range([height, 0]); // output

// 7. d3's line generator
var line = d3.line()
    .x(function(d) { return xScale(d.year); }) // set the x values for the line generator
    .y(function(d) { return yScale(d.worth); }) // set the y values for the line generator 
    // .curve(d3.curveMonotoneX) // apply smoothing to the line

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
// var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

// 1. Add the SVG to the page and employ #2
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 + ")");

// 3. Call the x axis in a group tag
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale).tickFormat(d3.format("d")).ticks(3)); // Create an axis component with d3.axisBottom
// 4. Call the y axis in a group tag
svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator 
svg.append("path")
    .datum(dataset) // 10. Binds data to the line 
    .attr("class", "line") // Assign a class for styling 
    .attr("d", line); // 11. Calls the line generator

// 12. Appends a circle for each datapoint 
svg.selectAll(".dot")
    .data(dataset)
  .enter().append("circle") // Uses the enter().append() method
    .attr("class", "dot") // Assign a class for styling
    .attr("cx", function(d) { return xScale(d.year) })
    .attr("cy", function(d) { return yScale(d.worth) })
    .attr("r", 5);
// text label for the x axis
svg.append("text")             
      .attr("transform",
            "translate(" + (width-5) + " ," + 
                           (height + margin.top-5) + ")")
      .style("text-anchor", "middle")
      .style("font-size", "15px") 
      .text("Year");
  // text label for the y axis
svg.append("text")
      .attr("transform",
            "translate(" + (0) + " ," + 
                           (-20) + ")")
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("billion USD");
svg.append("text")
      .attr("x", (width / 2))             
      .attr("y", 30-(margin.top / 2))
      .attr("text-anchor", "middle")  
      .style("font-size", "16px") 
      .style("text-decoration", "underline")  
      .text("Bill Gate's networth over years"); 
});

</script>

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