base chart using d3.rebind

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.js"></script>
    <style>
        .line {
            fill: none;
            stroke: #000;
            stroke-width: 1.5px;
        }

.area {
            fill: #969696;
        }
    </style>
</head>
<body>

// base chart
        ///////////////////////////////

var baseChart = function(){
            var my = {};

my.config = {
                margin: {top: 20, right: 20, bottom: 20, left: 20},
                width: 760,
                height: 120,
                xValue: function(d){
                    return d[0];
                },
                yValue: function(d){
                    return d[1];
                },
                xScale: d3.time.scale(),
                yScale: d3.scale.linear()
            };

my.X = function(d){
                return this.config.xScale(d[0]);
            };

my.Y = function(d){
                return this.config.yScale(d[1]);
            };

my.margin = function(_){
                if(!arguments.length){
                    return this.config.margin;
                }
                this.config.margin = _;
                return this;
            };

my.width = function(_){
                if(!arguments.length){
                    return this.config.width;
                }
                this.config.width = _;
                return this;
            };

my.height = function(_){
                if(!arguments.length){
                    return this.config.height;
                }
                this.config.height = _;
                return this;
            };

my.x = function(_){
                if(!arguments.length){
                    return this.config.xValue;
                }
                this.config.xValue = _;
                return this;
            };

my.y = function(_){
                if(!arguments.length){
                    return this.config.yValue;
                }
                this.config.yValue = _;
                return this;
            };

return my;
        };

// area chart
        ///////////////////////////////

function areaChart(){

function chart(selection){
                var c = chart.base.config;

var xAxis = d3.svg.axis().scale(c.xScale).orient("bottom").tickSize(6, 0),
                        area = d3.svg.area().x(chart.X).y1(chart.Y),
                        line = d3.svg.line().x(chart.X).y(chart.Y);

selection.each(function(data){

data = data.map(function(d, i){
                        return [c.xValue.call(data, d, i), c.yValue.call(data, d, i)];
                    });

c.xScale
                            .domain(d3.extent(data, function(d){
                                return d[0];
                            }))
                            .range([0, c.width - c.margin.left - c.margin.right]);

c.yScale
                            .domain([0, d3.max(data, function(d){
                                return d[1];
                            })])
                            .range([c.height - c.margin.top - c.margin.bottom, 0]);

var svg = d3.select(this).selectAll("svg").data([data]);

var gEnter = svg.enter().append("svg").append("g");
                    gEnter.append("path").attr("class", "area");
                    gEnter.append("path").attr("class", "line");
                    gEnter.append("g").attr("class", "x axis");

svg.attr("width", c.width)
                            .attr("height", c.height);

var g = svg.select("g")
                            .attr("transform", "translate(" + c.margin.left + "," + c.margin.top + ")");

g.select(".area")
                            .attr("d", area.y0(c.yScale.range()[0]));

g.select(".line")
                            .attr("d", line);

g.select(".x.axis")
                            .attr("transform", "translate(0," + c.yScale.range()[0] + ")")
                            .call(xAxis);
                });
            }

chart.base = baseChart();

d3.rebind(chart, chart.base, 'margin', 'width', 'height', 'x', 'y', 'X', 'Y');

return chart;
        }
        
        
        // usage
        ///////////////////////////////

var formatDate = d3.time.format("%b %Y");

var chart1 = areaChart()
                .x(function(d){ return formatDate.parse(d.date); })
                .y(function(d){ return +d.price; })
                .height(200)
                .width(400);

var chart2 = areaChart()
                .x(function(d){ return formatDate.parse(d.date); })
                .y(function(d){ return +d.price; })
                .height(50)
                .width(600);

d3.csv("sp500.csv", function(data){
            d3.select("#example1")
                    .datum(data)
                    .call(chart1);

d3.select("#example2")
                    .datum(data)
                    .call(chart2);
        });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js