dataVis = {
const chart = svg`<svg viewBox="0 0 ${width} ${height}" class="chart">
<path class="u-path" />
<circle id="point1" />
<circle id="point2" />
</svg>`;
const points = [
[4, 4],
[4, 104],
[104, 50],
[4, 4],
[100, 54],
[100, 104],
[44, 79],
[100, 54],
[130, 4],
[130, 104],
[100, 34],
[160, 34],
[180, 54],
[180, 104],
[124, 79],
[180, 54],
[230, 4],
[270, 104],
[310, 4],
[320, 52],
[320, 104],
[390, 52],
[330, 66],
[370, 79],
[410, 93],
[350, 104],
[430, 4],
[430, 90]
],
draw = () => {
const path = d3.path();
path.moveTo(...points[0]);
path.lineTo(...points[1]);
path.quadraticCurveTo(...points[2], ...points[3]);
path.moveTo(...points[4]);
path.lineTo(...points[5]);
path.quadraticCurveTo(...points[6], ...points[7]);
path.moveTo(...points[8]);
path.lineTo(...points[9]);
path.moveTo(...points[10]);
path.lineTo(...points[11]);
path.moveTo(...points[12]);
path.lineTo(...points[13]);
path.quadraticCurveTo(...points[14], ...points[15]);
path.moveTo(...points[16]);
path.lineTo(...points[17]);
path.lineTo(...points[18]);
path.moveTo(...points[19]);
path.lineTo(...points[20]);
path.moveTo(...points[21]);
path.quadraticCurveTo(...points[22], ...points[23]);
path.quadraticCurveTo(...points[24], ...points[25]);
path.moveTo(...points[26]);
path.lineTo(...points[27]);
return path;
};
d3.select(chart)
.select(".u-path")
.attr("d", draw());
d3.select(chart)
.select("#point1")
.attr("cx", 320)
.attr("cy", 42)
.attr("r", 4)
.attr("fill", "orange");
d3.select(chart)
.select("#point2")
.attr("cx", 430)
.attr("cy", 100)
.attr("r", 4)
.attr("fill", "orange");
return chart;
}