Line Chart with defaults example

<!DOCTYPE html>
<html>
  <head>
    <title>Line Chart</title>    
    <script src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <link href="lineplot.css" rel="stylesheet" type="text/css">    
  </head>
  <body>       
<script type="text/javascript">
function linePlot() {
    //Defaults//
   
    var margin = {"top": 20, "right": 20, "bottom": 20, "left": 20},    
    width = 400,
    height = 400,   
    xAxis = d3.svg.axis().orient("bottom").tickSize(-height),
    yAxis = d3.svg.axis().orient("left").tickSize(-width);  
    
    //Plot/Replot//
    function chart(selection) {
        xAxis = d3.svg.axis().orient("bottom").tickSize(-height);
        yAxis = d3.svg.axis().orient("left").tickSize(-width);
        selection.each(function(data) {                                           
                        
            // Update the x-scale.                  
            var xScale = d3.scale.linear()
                .domain([data[0][0],data[9][0]])
                .range([0, width]);    
                
            // Update the y-scale.
            var yScale = d3.scale.linear()
                .domain([data[0][1],data[9][1]])
                .range([height, 0]);

xAxis.scale(xScale);
            yAxis.scale(yScale);

//////////
            //Enters//
            //////////
            
            // The Plot
            var svg = d3.select(this),
                container = svg.selectAll("g").data([data]),
                gEnter = container.enter().append("g")
                .attr("class","container");  
                       
            // Axis
            gEnter.append("g").attr("class", "x axis");
            gEnter.append("g").attr("class", "y axis");  
            
            // Plotarea
            var plotarea =  gEnter.append("g")
                .attr("class","plotarea");

plotarea.append("rect")
                .attr("class", "plotarea");
            
            // Datapoints
            var dp = svg.selectAll("g.container").select("g.plotarea").selectAll("g.circle")
                .data(function(d){return d}); 
            
            dp.enter().append("circle")        
                .attr("class", "circle");

path.enter().append("path");                                
                        
            // Updates //
                        
            // Update the outer dimensions.             
            svg.attr("width", width + margin.left + margin.right) 
                .attr("height", height + margin.top + margin.bottom);

// Update the inner dimensions.
            var g = svg.selectAll("g.container")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            // Update plotarea
            var pa = g.select("g.plotarea");

pa.select("rect.plotarea")            
                .attr("width",width)
                .attr("height",height);

// Update the axes.
            g.select(".x.axis")
                .attr("transform", "translate(0," + yScale.range()[0] + ")")
                .call(xAxis);
            
            g.select(".y.axis")
                .attr("transform", "translate(0," + xScale.range()[0] + ")")
                .call(yAxis);

// Update datapoints/line
            g.selectAll("circle").attr("r",5)             
             .attr("transform",function(d){return "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")"})

g.selectAll("path")
             .attr("d",function(d){return myline(d)})

// Exits //
            dp.exit().remove()

});
    }
    
    //Accessors//          
    chart.width = function(_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };

chart.height = function(_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };

chart.xScale = function(_) {
        if (!arguments.length) return xScale;
        xScale = _;
        return chart;
    };

chart.yScale = function(_) {
        if (!arguments.length) return yScale;
        yScale = _;
        return chart;
    };

return chart;
}

var data = [[0,0],[1,1],[2,4],[3,9],[4,16],[5,25],[6,36],[7,49],[8,64],[9,81]],
plot1 = linePlot().width(300).height(200),
plot2 = linePlot();

d3.select("body").append("svg").datum(data).style("float","left").call(plot1);
d3.select("body").append("svg").datum(data).style("float","left").call(plot2);
</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

https://mbostock.github.com/d3/d3.v2.js