MultipleLinesChart-D3-Part4.js

//use .nest()function to group data so the line can be computed for each group
var sumstat = d3.nest() 
    .key(d => d.media)
    .entries(data);

console.log(sumstat)

//set color pallete for different vairables
var mediaName = sumstat.map(d => d.key) 
var color = d3.scaleOrdinal().domain(mediaName).range(colorbrewer.Set2[6])

//select path - three types: curveBasis,curveStep, curveCardinal
d3.select("svg")
    .selectAll(".line")
    .append("g")
    .attr("class", "line")
    .data(sumstat)
    .enter()
    .append("path")
    .attr("d", function (d) {
        return d3.line()
            .x(d => xScale(d.year))
            .y(d => yScale(d.spending)).curve(d3.curveCardinal)
            (d.values)
    })
    .attr("fill", "none")
    .attr("stroke", d => color(d.key))
    .attr("stroke-width", 2)


//append circle 
d3.select("svg")
    .selectAll("circle")
    .append("g")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 6)
    .attr("cx", d => xScale(d.year))
    .attr("cy", d => yScale(d.spending))
    .style("fill", d => color(d.media))