MultipleLinesChart-D3-Part2.js

function lineChart(data) {

//DataSource: eMarketer, March 2018
var data = [
    { year: 2016, media: "Digital", spending: 72.2 },
    { year: 2017, media: "Digital", spending: 90.39 },
    { year: 2018, media: "Digital", spending: 107.3 },
    { year: 2019, media: "Digital", spending: 125.75 },
    { year: 2020, media: "Digital", spending: 142.23 },
    { year: 2021, media: "Digital", spending: 156.43 },
    { year: 2022, media: "Digital", spending: 170.48 },
    { year: 2016, media: "TV", spending: 71.29 },
    { year: 2017, media: "TV", spending: 70.22 },
    { year: 2018, media: "TV", spending: 69.87 },
    { year: 2019, media: "TV", spending: 69.17 },
    { year: 2020, media: "TV", spending: 69.52 },
    { year: 2021, media: "TV", spending: 68.82 },
    { year: 2022, media: "TV", spending: 68.13 },
    { year: 2016, media: "Print", spending: 25.49 },
    { year: 2017, media: "Print", spending: 22.81 },
    { year: 2018, media: "Print", spending: 20.05 },
    { year: 2019, media: "Print", spending: 17.29 },
    { year: 2020, media: "Print", spending: 15.19 },
    { year: 2021, media: "Print", spending: 13.56 },
    { year: 2022, media: "Print", spending: 12.38 },
    { year: 2016, media: "Radio", spending: 14.33 },
    { year: 2017, media: "Radio", spending: 14.33 },
    { year: 2018, media: "Radio", spending: 14.41 },
    { year: 2019, media: "Radio", spending: 14.43 },
    { year: 2020, media: "Radio", spending: 14.46 },
    { year: 2021, media: "Radio", spending: 14.49 },
    { year: 2022, media: "Radio", spending: 14.52 },
    { year: 2016, media: "Out-of-home", spending: 7.6 },
    { year: 2017, media: "Out-of-home", spending: 7.75 },
    { year: 2018, media: "Out-of-home", spending: 7.87 },
    { year: 2019, media: "Out-of-home", spending: 7.95 },
    { year: 2020, media: "Out-of-home", spending: 8.03 },
    { year: 2021, media: "Out-of-home", spending: 8.11 },
    { year: 2022, media: "Out-of-home", spending: 8.19 },
    { year: 2016, media: "Directories", spending: 2.35 },
    { year: 2017, media: "Directories", spending: 1.83 },
    { year: 2018, media: "Directories", spending: 1.47 },
    { year: 2019, media: "Directories", spending: 1.19 },
    { year: 2020, media: "Directories", spending: 0.99 },
    { year: 2021, media: "Directories", spending: 0.84 },
    { year: 2022, media: "Directories", spending: 0.74 }
];

//set canvas margins
leftMargin=70
topMargin=30

//format the year 
var parseTime = d3.timeParse("%Y");

data.forEach(function (d) {
    d.year = parseTime(d.year);
});

//scale xAxis 
var xExtent = d3.extent(data, d => d.year);
xScale = d3.scaleTime().domain(xExtent).range([leftMargin, 900])

//scale yAxis
var yMax=d3.max(data,d=>d.spending)
yScale = d3.scaleLinear().domain([0, yMax+topMargin]).range([600, 0])

//we will draw xAxis and yAxis next
 }