MultipleLinesChart-D3-Part5.js

//append legends
var legend = d3.select("svg")
    .selectAll('g.legend')
    .data(sumstat)
    .enter()
    .append("g")
    .attr("class", "legend");

legend.append("circle")
    .attr("cx", 1000)
    .attr('cy', (d, i) => i * 30 + 350)
    .attr("r", 6)
    .style("fill", d => color(d.key))

legend.append("text")
    .attr("x", 1020)
    .attr("y", (d, i) => i * 30 + 355)
    .text(d => d.key)

//append title
d3.select("svg")
    .append("text")
    .attr("x", 485)
    .attr("y", 30)
    .attr("text-anchor", "middle")
    .text("US Total Media Ad Spending, by Media, 2016-2022")
    .style("fill", "black")
    .style("font-size", 28)
    .style("font-family", "Arial Black")

//apend source
d3.select("svg")
    .append("text")
    .attr("x", 70)
    .attr("y", 700)
    .text("Source: eMarketer, March 2018")
    .style("fill", "black")
    .style("font-size", 14)
    .style("font-family", "Arial Black")