d3 lines between dots not working
<p>I have made a scatter plot using d3 and want to connect the dots with lines, I have tried using what people have written online to connect the lines but it does not seem to be working. </p>

<pre><code>function makeGraph(sampleData){
    console.log(sampleData);
    var vis = d3.select("#svgVisualize");

    yMax = d3.max(sampleData, function (point) {return point.y;});

    //step 1 : scale the data

    xRange = d3.scale.ordinal().domain(sampleData.map(function (d) { return d.x; })).rangePoints([0, 700]);
    yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]);


    //step 2: scale the axis
    xAxis = d3.svg.axis().scale(xRange);
    yAxis = d3.svg.axis().scale(yRange).orient("left");

    //Step3: append the x and y axis
    vis.append('svg:g')
            .call(xAxis)
            .attr("transform", "translate(90,400)")
            .append("text")
            .text("Build Model")
            .attr("y", 70)
            .attr("x", 150);
    vis.append('svg:g')
            .call(yAxis)
            .attr("transform", "translate(90,0)")
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -80)
            .attr("x", -130)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Number of Users");

    var circles = vis.selectAll("circle").data(sampleData);

    circles
            .enter()
            .insert("circle")
            .attr("cx", function (d) {return xRange(d.x);})
            .attr("cy", function (d) { return yRange(d.y); })
            .attr("r", 4)
            .attr("transform", "translate(90,0)")
            .style("fill", "blue");
    var lineFunction = vis.line()
            .x(function (d) {
              return d.x;
            })
            .y(function (d) {
              return d.y;
            })
            .interpolate("linear");

    vis.append("path")
            .attr("d", lineFunction(sampleData))
            .style("stroke-width", 0.5)
            .style("stroke", "rgb(6,120,155)")
            .style("fill", "none")
            .on("mouseover", function () {
              d3.select(this)
                      .style("stroke", "orange");
            })
            .on("mouseout", function () {
              d3.select(this)
                      .style("stroke", "rgb(6,120,155)");
            });
}
</code></pre>

<p>If anyone could help that would be great, I'm still new to d3</p>