[Solved]-where to modify x axis length. AKA I want to show future years in chart-d3.js

The changes you will want to make are here:

var xExtent = d3.extent(data, function(d) { return d.year; });
var yExtent = d3.extent(data, function(d) { return d.value; });
var x = d3.time.scale().domain(xExtent);
var y = d3.scale.linear().domain(yExtent);

Instead change your xExtent = [d3.min(data, d=>d.year), d3.max(data, d=>d.year) + someFactor] where some factor can be something that will add two years.

My suggestion is to add 2 * 3.154e+10 as 3.154e+10 is one year in milliseconds, which is probably what is used under the hood.

Another way to do this (kinda hard-coded) is to do xExtent = [d3.min(data, d=>d.year), 2018], and make 2018 the max. This is of course less sustainable because the chart will not always show 2 extra years as your data becomes more current.