[UNLISTED] Pseudo Bar Chart VI

A pseudo-bar chart demonstrating conventional margins with the D3 Towards Reusable Charts pattern. Uses:

forked from curran's block: Pseudo Bar Chart V

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pseudo Bar Chart IV</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <svg id="bar-chart"></svg>
    <script>
      
      function BarChart(){
        var width,
            height,
            xScale = d3.scaleBand(),
            yScale = d3.scaleLinear(),
            x,
            y,
            margin = { top: 20, bottom: 20, left: 20, right: 20 };
            
        function my(selection){
          
          if(!x) throw new Error("Bar Chart x column must be defined.");
          if(!y) throw new Error("Bar Chart y column must be defined.");
          if(!width) throw new Error("Bar Chart width must be defined.");
          if(!height) throw new Error("Bar Chart height must be defined.");
          
          selection.each(function(data) {
            
            var svg = d3.select(this)
                .attr("width", width)
                .attr("height", height);
            
            var g = svg.selectAll("g")
              .data([1]);
            g = g.enter().append("g")
              .merge(g)
                .attr("transform",
                      "translate(" + margin.left + "," + margin.top +")");
            
            var innerWidth = width - margin.left - margin.right;
            var innerHeight = height - margin.top - margin.bottom;
        
            xScale
              .domain(data.map(function (d){ return d[x]; }))
              .range([0, innerWidth]);
            
            yScale
              .domain([0, d3.max(data, function (d){ return d[y] })])
              .range([innerHeight, 0]);

return my;
      }
      
      function main(){

var barChart = BarChart()
          .width(960)
          .height(500)
          .x("name")
          .y("value")
          .padding(0.1);

function parseRow(d){
          d.value = +d.value; // Parses String to Number.
          return d;
        }

d3.csv("data.csv", parseRow, function (data){
          d3.select("#bar-chart")
            .datum(data)
            .call(barChart);
        });
      }
      main();
    </script>
  </body>
</html>

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