{
const svg = d3
.create('svg')
.attr("viewBox", [0,0, 1000, 800])
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#FEF713");
const title = svg.append("text")
.attr("x", 640)
.attr("y", 150)
.attr("text-anchor", "middle")
.style("font-size", "150px")
.style("font-family", "Londrina Outline")
.style("font-weight", 500)
.text("2019 NYE");
const ltitle1 = svg.append("text")
.attr("x", 640)
.attr("y", 490)
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("font-family", "Londrina Outline")
.style("font-weight", 700)
.text("Minutes");
const ltitle2 = svg.append("text")
.attr("x", 645)
.attr("y", 300)
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("font-family", "Londrina Outline")
.style("font-weight", 700)
//.style("fill", "#c2bc0a")
.text("Debuted");
// make a grid to put the figures in
const figures = svg
.selectAll('path')
.data(peopleData)
.enter()
.append('path')
.attr('transform', (d, i) => `translate(${(i % 10) * 50 + 80},${Math.floor(i / 10) * 60 + 170})scale(0.3)`)
.attr('d', d => d.personPath)
.attr('stroke', 'black')
.attr('stroke-linecap', 'round')
.attr('stroke-width', '5')
.attr('fill', d => colorScale(d.outline))
figures.append("title")
.text(d => `${d.title}`);
/* Annotation */
const legend = svg.append("g");
legend.selectAll("rect")
.data(mylegend)
.join('rect')
.attr('x', 600)
.attr('y', 500)
.attr('width', 50)
.attr('height', 20)
.attr('stroke', 'black')
.attr('stroke-width', '2')
.attr('fill', (d,i) => colorScale(i+1))
.attr('transform', (d,i) => "translate(0," + i * 25 + ")")
legend.selectAll("g")
.data(mylegend)
.join('text')
.attr('x', 625)
.attr('y', 515)
.attr('transform', (d,i) => "translate(0," + i * 25 + ")")
.attr("font-size", "1em")
.attr("color", "black")
.text(function(d){ return d;})
.attr("text-anchor", "middle")
.attr("font-family", "Montserrat")
const legend2 = svg.append("g");
legend2.selectAll('path')
.data(mylegend2)
.enter()
.append('path')
.attr('transform', (d, i) =>
`translate(${(i % 10) * 35 + 600},${Math.floor(i / 10) * 60 + 310})scale(0.2)`
)
.attr('d', d => shapeFunc(d))
.attr('stroke', 'black')
.attr('stroke-linecap', 'round')
.attr('stroke-width', '10')
.attr('fill', 'none')
legend2.selectAll("g")
.data(mylegend2)
.join('text')
.attr('x', 615)
.attr('y', 370)
.attr('transform', (d,i) => "translate(" + i * 35 + ",0)")
.attr("font-size", "1em")
//.attr("fill", "#c2bc0a")
.text(function(d){ return d;})
.attr("text-anchor", "middle")
.attr("font-family", "Montserrat")
return svg.node();
}