D3 chart skeleton using closures and getter-setters config methods

chart_skeleton.js

//   ____ __  __ ___ ________  _   ___   __          ____ _____   _     
//  / ___|  \/  |_ _|__  / _ \| \ | \ \ / /         |  _ \___ /  (_)___ 
// | |   | |\/| || |  / / | | |  \| |\ V /   _____  | | | ||_ \  | / __|
// | |___| |  | || | / /| |_| | |\  | | |   |_____| | |_| |__) | | \__ \
//  \____|_|  |_|___/____\___/|_| \_| |_|           |____/____(_)/ |___/
//                                                             |__/  

/**
* @method getSkeletonChart
*
* @description Skeleton or reusable chat implemented as closures with
* getter-setter methods
*
* @params {Array} Data to render
* @return {Function} Callable function to render the chart
*/
function getSkeletonChart () {

  var data = [];
  var width = 800;
  var height = 500;

  function my (container) {

    // Remove existing SVG
    container.select("svg").remove();

    // Create new SVG
    var svg = container.append("svg")
    .attr("width", width)
    .attr("height", height);

    // TODO Code Chart


    return my;
  };

  my.data = function (value) {
    if (!arguments.length) {
      return data;
    }
    data = value;
    return my;
  };

  my.width = function(value) {
    if (!arguments.length) {
      return width;
    }
    width = value;
    return my;
  };

  my.height = function(value) {
    if (!arguments.length) {
      return height;
    }
    height = value;
    return my;
  };

  return my;
}