D3 Examples - base chart using d3.rebind

xxxxxxxxxx
 
<!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>
​
<p id="example1">
​
<p id="example2">
​
    <script>
​
​
        // 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>
    