D3 Examples - Reusable Bar Chart

xxxxxxxxxx
 
<!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>
​
<svg id="barchart">
</svg>
​
<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>
​
    