button = {
let button = html`<input type="button" value="Transition to Diagram">`
button.style.fontSize = "1.2em";
let isMap = true
button.addEventListener('click', function() {
button.disabled = true
d3.select(streetSVG2).selectAll('path')
.interrupt()
.transition()
.duration(1500)
.delay(d => (isMap ? d.properties.chartOrder : d.properties.mapOrder) + genderOrder[d.properties.gender] * 1500)
.ease(d3.easeLinear)
.attr('d',d => isMap ? d.properties.diagramPath : d.properties.mapPath)
.on('end', function(d,i){
if (i == sortedStreets.length-1) {
button.value = isMap ? "Transition to Diagram" : "Transition to Map";
button.disabled = false;
}
});
isMap = !isMap
button.value = "... in transition ...";
})
return button
}