Reusable Bar Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<script>
    
    var randomdata = d3.range(10).map(function(d){return Math.random()}); 
    
    var myChart = barchart({"width": 500,"height": 200,"svg":d3.select("#barchart")});
     
    d3.select("#barchart").datum(randomdata).call(myChart)
     
    function barchart(config){
      	
      	function chart() { 
         
          	var data = config.svg.data()[0];
          	console.log(data)
            
            var margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = config.width - margin.left - margin.right,
                height = config.height - margin.top - margin.bottom;

var x = d3.scaleBand()
                .range([0, width])
                .padding(0.1);

var y = d3.scaleLinear()
                .range([height, 0]);

config.svg
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .style("border","1px solid black")
                .append("g")
                .attr("transform","translate(" + margin.left + "," + margin.top + ")")
                .attr("id","chartcont");

// format the data
              data.forEach(function(d) {
                d = +d;
              });

// Scale the range of the data in the domains
              x.domain(data.map(function(d,i) { return i}));
              y.domain([0, d3.max(data, function(d) { return d; })]);

// append the rectangles for the bar chart
              config.svg.select("#chartcont")
                .selectAll(".bar")
                .data(data)
                .enter()
                .append("rect")
                .attr("class", "bar")
                .attr("x", function(d,i) { return x(i); })
                .attr("width", x.bandwidth())
                .attr("y", function(d) { return y(d); })
                .attr("height", function(d) { return height - y(d); });

// add the x Axis
              config.svg.select("#chartcont").append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));

// add the y Axis
             config.svg.select("#chartcont").append("g").call(d3.axisLeft(y));

}

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

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

return chart; 
      
    }

</script>
</body>

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