{
const margin = {top: 10, right: 60, bottom: 150, left: 100};
const visWidth = 600 - margin.left - margin.right;
const visHeight = 1400 - margin.top - margin.bottom;
const yScale = d3.scaleBand()
.domain(unemployment.map(d => d.state))
.range([0, visHeight])
.padding(0.4)
const xScale = d3.scaleLinear()
.domain([0, maxUnemployment])
.range([0, visWidth])
const yaxis = d3.axisLeft(yScale)
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
const legend = g.append("g")
.selectAll("g")
.data([minUnemployment, minUnemployment + ((maxUnemployment - minUnemployment)/3), maxUnemployment - ((maxUnemployment - minUnemployment)/4), maxUnemployment])
.join("g")
.attr("transform", (d, i) => `translate(0, ${visHeight + 50 + i * 20})`);
legend.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("dominant-baseline", "middle")
.attr("x", visWidth + 2)
.text(d => d);
g.selectAll('line')
.data(usaGeo.features)
.join('line')
.attr('stroke', 'steelblue')
.attr('stroke-width', 4)
.attr('x1', d => (visWidth - xScale(stateToRate[d.properties.NAME]))/2)
.attr('x2', d => (visWidth + xScale(stateToRate[d.properties.NAME]))/2)
.attr('y1', d => yScale(d.properties.NAME))
.attr('y2', d => yScale(d.properties.NAME))
legend.append("line")
.attr("stroke", "steelblue")
.attr('stroke-width', 4)
.attr("x1", d => (visWidth - xScale(d))/2)
.attr("x2", d => (visWidth + xScale(d))/2)
.attr('y1', (d, i) => 0)
.attr('y2', (d, i) => 0)
g.append('text')
.attr("font-family", "sans-serif")
.attr("font-size", 16)
.attr("dominant-baseline", "middle")
.attr("x", 0)
.attr('y', visHeight + 20)
.text('Length of line corresoponds to percent unemployment for each state');
g.append('g')
.call(yaxis)
return svg.node()
}