score:1

Yes thats quite possible. You can even use just the SVG DOM api and some helper functions but I made a fiddle with D3. I used most stuff minimally, 2 lines for coordinates and the function itself:

https://jsfiddle.net/ibowankenobi/emwhw8fz/3/

//generate points y = ax^2+bx+c
function createPoints(a,b,c,rangeX,step){
    return Array.apply(null,Array((rangeX[1]-rangeX[0])/step|0 + 1))
    .map(function(d,i){
            var x = rangeX[0]+i*step;
            return [x,a * x * x + b * x + c];
    })
}
//points
var points = createPoints(-0.1,0,80,[-30,30],0.5);
//create svg and path
var svg = d3.select("#container").append("svg").attr("viewBox","0 0 200 200");
//coordinates
svg.selectAll(".coordinates").data(d3.range(2))
.enter()
.append("path")
.attr("class","coordinates")
.attr("stroke","black")
.attr("d",function(d,i){
    return i
  ? "M0,100h200"
  : "M100,0v200"
});
//path
svg
.append("g")
.attr("transform","translate(100,100) scale(1,-1)")
.append("path")
.attr("stroke-width","2")
.attr("stroke","black")
.attr("fill","transparent")
.transition()
.delay(250)
.duration(1500)
.call(animate);
//animate
function animate(selection){
    this
  .attrTween("d",function(){
    return function(t){
     return "M"+points.slice(0,Math.max(1,t*points.length|0)).join("L");
    }
  }).each("end",function(){
    d3.select(this)
        .transition()
            .delay(250)
            .duration(1500)
            .call(animate);
  })
}

Related Query