chartSelect = () => {
const marginTop = 13;
const svg = d3.create("svg")
.attr("width", chartwidth + margin.left + margin.right)
.attr("height", bandheight + marginTop + margin.bottom);
svg.append("style").html(css);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, marginTop]})`);
g.append("g").call(g => xaxisGenerator(g, bandheight));
const yaxis = g.append("g").attr("class", "axis y-axis");
const yaxisTick = yaxis.append("g").attr("class", "tick")
.attr("transform", `translate(0, ${y.bandwidth() / 2})`);
yaxisTick.append("line")
.attr("x2", chartwidth);
yaxisTick.append("text")
.attr("dy", "0.32em")
.attr("font-weight", "bold")
.attr("x", -margin.left)
.text(selected.label);
const city = g.selectAll(".city")
.data([selected])
.join("g")
.attr("class", "city")
.attr("transform", d => `translate(0, ${y.bandwidth() / 2})`);
const cityLine = city.append("line")
.attr("x1", d => x(new Date(dayOfYearToDate(d.data.line[0][1]))))
.attr("x2", d => x(new Date(dayOfYearToDate(d.data.line[1][1]))))
.attr("stroke", d => colorScale(d.data.trend))
.attr("stroke-width", 6);
const cityCircleStart = city.append("circle")
.attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[0][1]))))
.attr("fill", "#fff")
.attr("stroke", "#888")
.attr("r", r);
const cityCircleEnd = city.append("circle")
.attr("cx", d => x(new Date(dayOfYearToDate(d.data.line[1][1]))))
.attr("fill", d => colorScale(d.data.trend))
.attr("stroke", d => d3.color(colorScale(d.data.trend)).darker(1))
.attr("r", r);
const cityLabelStart = city.append("text")
.attr("class", "city-label")
.attr("dx", d => (r + 4) * (d.data.trend < 0 ? 1 : -1))
.attr("dy", "0.32em")
.attr("text-anchor", d => d.data.trend < 0 ? "start" : "end")
.attr("x", d => x(new Date(dayOfYearToDate(d.data.line[0][1]))))
.attr("y", -18)
.text("Expected in 1981");
const cityLabelEnd = city.append("text")
.attr("class", "city-label")
.attr("dx", d => (r + 4) * (d.data.trend < 0 ? -1 : 1))
.attr("dy", "0.32em")
.attr("text-anchor", d => d.data.trend < 0 ? "end" : "start")
.attr("x", d => x(new Date(dayOfYearToDate(d.data.line[1][1]))))
.attr("y", -18)
.text("Expected in 2023");
const cityDateStart = city.append("text")
.attr("class", "city-date")
.attr("dx", d => (r + 4) * (d.data.trend < 0 ? 1 : -1))
.attr("dy", "0.32em")
.attr("text-anchor", d => d.data.trend < 0 ? "start" : "end")
.attr("x", d => x(new Date(dayOfYearToDate(d.data.line[0][1]))))
.text(d => formatDate(dayOfYearToDate(d.data.line[0][1])));
const cityDateEnd = city.append("text")
.attr("class", "city-date")
.attr("dx", d => (r + 4) * (d.data.trend < 0 ? -1 : 1))
.attr("dy", "0.32em")
.attr("text-anchor", d => d.data.trend < 0 ? "end" : "start")
.attr("x", d => x(new Date(dayOfYearToDate(d.data.line[1][1]))))
.text(d => formatDate(dayOfYearToDate(d.data.line[1][1])));
return svg.node()
}