[UNLISTED] Simplest Reusable Chart

A simple example of the Towards Reusable Charts pattern.

forked from curran's block: Reusable Bar Chart

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simplest Reusable Chart</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <svg id="simple-chart"></svg>
    <script>
      
      function SimpleChart(){
        var width,
            height;
            
        function my(selection){
          selection
            .attr("width", width)
            .attr("height", height)
            .style("background-color", "blue");
        }
        
        my.width = function (_){
          return arguments.length ? (width = _, my) : width;
        };
        
        my.height = function (_){
          return arguments.length ? (height = _, my) : height;
        };

return my;
      }
      
      function main(){

// Initialize the chart.
        var simpleChart = SimpleChart()
          .width(500)
          .height(300);

// Render for the first time.
        d3.select("#simple-chart")
          .call(simpleChart);

// Randomly resize every second.
        setInterval(function (){
          
          // Reconfigure width and height.
          simpleChart
            .width(Math.random() * 960)
            .height(Math.random() * 500);
          
          // Re-render.
          d3.select("#simple-chart")
            .call(simpleChart);
          
        }, 1000);

}
      
      main();
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js