function addMilestone(svg,dataIndex) {
dataIndex --
var mileStone =
svg.append("g")
.style("cursor","pointer")
.attr("class","milestones")
.attr("id","ms"+JSON.stringify(dataIndex))
mileStone
.append("line")
.attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;")
.attr("y1", 0)
.attr("y2", height)
.attr("x1", x(data[dataIndex].date))
.attr("x2", x(data[dataIndex].date));
var legend = mileStone.append("g").attr("transform",`translate(${x(data[dataIndex].date)},${height/2})`)
legend.append("rect").attr("fill","white").attr("width",50).attr("height",30).attr("transform","translate(-25,-18)")
legend.append("text").style("font-family","sans-serif").style("font-size",10).attr("y",-5).attr("text-anchor","middle").text(formatTime(data[dataIndex].date))
legend.append("text").style("font-family","sans-serif").style("font-size",10).attr("y",5).attr("text-anchor","middle").text(data[dataIndex].value)
mileStone.on("click",function(e){
mileStone.remove()
})
const milestones = [...d3.selectAll(".milestones")];
var msIndex =[]
milestones.forEach(d=>msIndex.push(d.id.substring(2)))
if (msIndex.length>1){
svg.selectAll(".deltas").remove();
for (let k = 0; k < msIndex.length-1; ++k) {
let period = Math.round((data[msIndex[k+1]].date-data[msIndex[k]].date)/(1000*60*60*24*30));
let costDiff = Math.round(data[msIndex[k]].value * 100 / data[msIndex[k+1]].value);
let xPos = x(data[msIndex[k]].date) + (Math.round(x(data[msIndex[k+1]].date)-x(data[msIndex[k]].date))/2);
var delta = mileStone.append("g").attr("class","deltas")
delta.append("line").attr("stroke-width",2).attr("stroke","gray")
.attr("x1",x(data[msIndex[k]].date)+20)
.attr("x2",x(data[msIndex[k+1]].date)-20)
.attr("y1",height/2)
.attr("y2",height/2)
.lower()
delta.append("rect").attr("y",height/2-15).attr("x",xPos-25).attr("width",50).attr("height",30).attr("fill","white")
delta.append("text").attr("y",height/2-5).attr("x",xPos).text(period + " "+loc[lang].months).style("font-family","sans-serif").style("font-size",10).attr("text-anchor","middle")
delta.append("text").attr("y",height/2+5).attr("x",xPos).text(costDiff + "%").style("font-family","sans-serif").style("font-size",10).attr("text-anchor","middle")
}
}
try{svg.append(mileStone)}
catch{console.log("error but still works")}
}
reveal = path => {path.transition()
.duration(3000)
.ease(d3.easeLinear)
.attrTween("stroke-dasharray", function() {
const length = this.getTotalLength();
return d3.interpolate(`0,${length}`, `${length},${length}`);
})
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
