{
const totalWidth = 878
const totalHeight = 500
const margin = ({top: 30, bottom: 40, left: 40, right: 30})
const visWidth = totalWidth - margin.left - margin.right
const visHeight = totalHeight - margin.top - margin.bottom
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
const x = d3.scaleBand()
.domain(Unemployement_Suicide_Rates.objects().map(d => d.Year))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain(domains.y).nice()
.range([visHeight, 0]);
const color = d3.scaleOrdinal()
.domain(domains.groups)
.range(d3.schemeTableau10);
const line = d3.line()
.x(d => x(d.Year))
.y(d => y(d.Rate));
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const xAxis = d3.axisBottom(x).ticks(10);
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);
g.append('g').call(yAxis)
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', visHeight/2)
.attr("transform", "rotate(-90)")
.text('Rates');
svg.append("text")
.attr("class", "axis-label")
.attr("x", -240)
.attr("y", 15)
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.text("Unemployment and Suicide Rates for 16-24 and 45-64");
svg.append("text")
.attr("class", "axis-label")
.attr("x", visWidth / 2)
.attr("y", visHeight + margin.bottom + 30)
.attr("text-anchor", "middle")
.text("Year");
g.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.selectAll("path")
.data(linedata)
.join("path")
.attr("d", d => line(d.values))
.attr('stroke', d => color(d.Population_Group));
return svg.node();
}