maine = {
const width = 800, height = 800;
const svg = d3.select(DOM.svg(width, height))
const projection = d3.geoMercator()
.fitExtent([[0,0],[width, height]], geoME)
const extent = d3.extent(geoME.features, (d) => d.properties.vaxrate);
//const color = d3.scaleQuantize(extent, d3.schemeBlues[9]);
const color = d3.scaleSequential(extent, d3.interpolateBlues);
svg.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({color, width: 260, tickFormat: ".0%"}));
let path = d3.geoPath()
.projection(projection);
svg.append('g').selectAll('path')
.data(geoME.features)
.join('path')
.attr('d', path)
.attr("fill", d => color(d.properties.vaxrate))
.style('stroke', 'rgba(0,0,0,.3)')
.on('mouseover', function (e, d, i) {
tooltip
.html(
`<div>${d.properties.name}:
${d.properties.vaxrate ? format(d.properties.vaxrate*100)+"%" : "unknown"}</div>`)
.style('visibility', 'visible');
// TODO: highlight zip somehow
//d3.select(this).attr('fill', 'blue');
})
.on('mousemove', function (e) {
tooltip
.style('top', e.pageY + 10 + 'px')
.style('left', e.pageX + 10 + 'px');
})
.on('mouseout', function () {
tooltip.html(``).style('visibility', 'hidden');
//d3.select(this).transition().attr('fill', 'green');
});
return svg.node()
}