svg2 = {
let svg = d3.create('svg')
.attr('width', 1400)
.attr('height', 400)
.attr('transform', 'translate(0,0)')
let albersProjection = d3.geoAlbersUsa().scale(280).translate([150,200])
let geoPathGenerator = d3.geoPath(albersProjection)
svg.append('text')
.attr('transform', 'translate(10,50)')
.attr('fill', 'black')
.attr('font-weight', 'bold')
.text("Unemployment Rate In the United States 2012 - 2015")
let g = svg.append('g')
.attr('transform', 'translate(0, 50)')
let year2012Group = svg.append('g')
.attr('transform', 'translate(0, 50)')
generateUnemploymentMap(year2012Group, geoPathGenerator, '2012');
let year2013Group = svg.append('g')
.attr('transform', 'translate(220, 50)')
generateUnemploymentMap(year2013Group, geoPathGenerator, '2013');
let year2014Group = svg.append('g')
.attr('transform', 'translate(440, 50)')
generateUnemploymentMap(year2014Group, geoPathGenerator, '2014');
let year2015Group = svg.append('g')
.attr('transform', 'translate(660, 50)')
generateUnemploymentMap(year2015Group, geoPathGenerator, '2015');
const legendGroup = svg.append('g')
.attr('transform', 'translate(250, 70)')
const legend = legendGroup
.selectAll('rect')
.data([1,2,3,4,5])
.enter()
.append('rect')
.attr('width', 15)
.attr('height',15)
.attr('x', (d, i) => i * 15)
.attr('fill', (d, i) => colorScale(i*2))
svg
.append('text')
.style('font-size', '10px')
.text('Lower Unemployment Rates')
.attr('transform', 'translate(90, 80)')
svg
.append('text')
.style('font-size', '10px')
.text('Higher Unemployment Rates')
.attr('transform', 'translate(350, 80)')
const noData = svg.append('g')
.attr('transform', 'translate(200, 90)')
noData.append('rect')
.attr('width', 15)
.attr('height', 15)
.attr('fill', 'black')
svg
.append('text')
.style('font-size', '10px')
.text('Counties With No Data')
.attr('transform', 'translate(90, 100)')
return svg.node();
}