chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", "chart")
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
keys.forEach((key,i) => {
svg.append("path")
.datum(keyData[key])
.attr("fill", "none")
.attr("stroke", colors[i])
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineGenerators[key])
svg
.append("circle")
.attr("cy", (d) => {
return y(keyData[key][keyData[key].length - 1][key])
})
.attr("fill", colors[i])
.attr("cx", (d) => {
return x(keyData[key][keyData[key].length - 1][xVar])
})
.attr("r", 4)
.style("opacity", 1)
svg
.append("text")
.attr("class", "lineLabels")
.style("font-family", "'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
.style("font-weight", "bold")
.style("font-size",14)
.attr("y", (d) => {
return (
y(keyData[key][keyData[key].length - 1][key]) +
4
)
})
.attr("x", (d) => {
return (
x(keyData[key][keyData[key].length - 1][xVar]) + 5
)
})
.style("opacity", 1)
.attr("fill", colors[i])
.text((d) => {
return key
})
})
svg.append("circle")
.attr("r",20)
.attr("cx",100)
.attr("cy",50)
.attr("fill","lightgreen")
.style("cursor", "pointer")
.attr("id", "playButton")
.on("click", noiseLoop)
svg.append("text")
.attr("x",100)
.attr("y",52)
.style("font-size","12px")
.style("font-family","sans-serif")
.style("pointer-events","none")
.attr("text-anchor","middle")
.text("play")
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", margin.left + 15)
.attr("x", -20)
.attr("fill", "#767676")
.style("font-family", "'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif")
.style("font-weight", "bold")
.style("font-size",12)
.attr("text-anchor", "end")
.text("Cumulative doses");
svg.append("circle")
.attr("r",5)
.attr("stroke", "red")
.attr("cx",x(data[0].Date))
.attr("cy",y(data[0]['Original goal']))
.attr("fill","none")
.attr("id", "playHead")
return svg.node();
}