D3 Bar Chart - Space after y-axis issue

[Sasikumar hx]

While using d3 bar chart, there appears space between y-axis and first bar, when number of bars is increased as in following image

When the bars are limited around some 40 there appears no issue, but as in above example when number of is more than 100 there appears space.

Above bar-chart is modified from the following reference http://bl.ocks.org/mbostock/3885705

<style>
    .axis text { font: 12px sans-serif; font-weight:bold; }
    .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
    .x.axis line { stroke: #000; }
    .bar { fill: steelblue; fill-opacity: .9; }
    .bar:hover { fill: orangered; }
    .x.axis path { display: none; }

    div.tooltip { color: #222; background: #fff; padding: .5em; text-shadow: #f5f5f5 0 1px 0; border-radius: 2px; box-shadow: 0px 0px 2px 0px #000000; opacity: 0.9; position: absolute; }
</style>
<div id="svg" class="svg_cont"></div>
<script>
    var margin = {top: 20, right: 20, bottom: 20, left: 80},
        width = 500,
        height = 450;
    var barWidth = 20;
        var dWidth = $(document).width();
        if(dWidth>600) {
            width = 900;
            $("#svg").removeClass("svg_cont");
        }
    var formatPercent = d3.format(".0%");

    var svg = d3.select("#svg")
                .attr("style","overflow-x:auto; width:"+width+"px;")
                .append("svg")
                .style("opacity","1")
                .attr("height",height+margin.bottom+margin.top)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var svgbutton = d3.select("#chartarea").append("button").attr("class","download").attr("id","downloadimage").html("Download as Image");';
    if($imagePathSuccess!=="") echo 'var imagebutton = d3.select("#chartarea").append("a").style("font-weight","normal").style("text-decoration","none").style("margin-left","10px").attr("class","download icon-bar").attr("target","_blank").attr("id","imagedownload").attr("href","'.$imagePathSuccess.'").attr("title","Bar");
    var message = d3.select("#chartarea").append("div").attr("class","message").attr("id","message");
    var tooltip = d3.select("#chartarea").append("div").attr("class", "tooltip hidden");

    var sortdiv = d3.select("#svg").append("div")
                    .attr("id","sortdiv")
                    .style("position","relative");

    var mycheck = d3.select("#sortdiv").append("label")
                    .text("Sort by value ")
                    .append("input")
                    .attr("type", "checkbox")
                    .style("position","absolute")
                    .attr("id", "sortcheck");

    if(globalJsonData=="") { d3.json("/a/23.json", function(error, datas) { initialize(error, datas); globalJsonData = datas; }); }
    else { initialize("", globalJsonData); }

    function initialize(error, datas) {
        if(dWidth>600) {
            var viewSize = (datas.children.length*barWidth);
            if(viewSize<800) viewSize = 800;
            d3.select("svg").attr("width",(viewSize+50));

            var x = d3.scale.ordinal().rangeRoundBands([0, viewSize], .1, 1);
        }
        else {
            d3.select("svg").attr("viewBox", "0 0 " + width +" "+height);
            d3.select("svg").attr("height",null);
            d3.select("#svg").attr("style",null)

            var x = d3.scale.ordinal().rangeRoundBands([0, width], .1, 1);
        }
        var y = d3.scale.linear().range([height, 0]);
        var xAxis = d3.svg.axis().scale(x).orient("bottom");
        var yAxis = d3.svg.axis().scale(y).orient("left");

        message.html("<span style=\"font-size:12px;\">&copy; statsmonkey.com</span><br><b>StatsYear : </b>"+datas.statsyear+"<br><b>Units : </b>"+datas.units);
        dataFull = datas.children;
        data = dataFull;
        data.forEach(function(d) { d.size = +d.size; });
        var min = d3.min(data, function(d) { return d.size; });
        var max = d3.max(data, function(d) { return d.size; });
        var avg = min-(((min+max)/2)-min);
        if(avg<0) avg = min;
        x.domain(data.map(function(d) { return d.name; }));
        y.domain([d3.min(data, function(d) { return d.size; }), d3.max(data, function(d) { return d.size; })]);

        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text(datas.parameter);

        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .style("fill","#83D7A6")
            .style("fill-opacity",".9")
            .style("cursor","pointer")
            .attr("id", function(d) { return toIdCase(d.name); })
            .attr("x", function(d) { return x(d.name); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(d.size); })
            .attr("height", function(d) { return height - y(d.size); })
            .on("mouseover", function(d) { d3.select(this).style("fill","#F1DDA2"); showToolTip(d); })
            .on("mouseout", function(d) { d3.select(this).style("fill","#83D7A6"); tooltip.classed("hidden", true); });

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0,"+height+")")
            .call(xAxis)
            .selectAll("text")
            .style("text-anchor", "start")
            .style("font", "12px sans-serif")
            .style("font-weight", "bold")
            .style("cursor", "pointer")
            .attr("dx", "0.5em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)")
            .on("mouseover", function() { showSplToolTip(d3.select(this).text()); })
            .on("mouseout", function() { tooltip.classed("hidden", true); });

        function showSplToolTip(dname) {
            (datas.children).forEach(function(d) { if(d.name===dname) showToolTip(d); });
        }

        d3.select("#sortcheck").on("change", change);

        var sortTimeout = setTimeout(function() { d3.select("#sortcheck").property("checked", true).each(change); }, 1000);

        function change() {
            clearTimeout(sortTimeout);

            // Copy-on-write since tweens are evaluated after a delay.
            var x0 = x.domain(data.sort(this.checked
                ? function(a, b) { return b.size - a.size; }
                : function(a, b) { return d3.ascending(a.name, b.name); })
                .map(function(d) { return d.name; }))
                .copy();

            var transition = svg.transition().duration(450),
                delay = function(d, i) { return i * 50; };

            transition.selectAll(".bar")
                .delay(delay)
                .attr("x", function(d) { return x0(d.name); });

            transition.select(".x.axis")
                        .call(xAxis)
                        .selectAll("g")
                        .selectAll("text")
                        .style("text-anchor", "start")
                        .attr("dx", "0.5em")
                        .attr("dy", "-.55em")
                        .attr("transform", "rotate(-90)" )
                        .delay(delay);
        }

        function showToolTip(d) {
            var mouse = d3.mouse(svg.node()).map( function(d) { return parseFloat(d); } );
            tooltip
                .classed("hidden", false)
                .attr("style", function () {
                    var left = d3.event.pageX;
                    var top = d3.event.pageY;
                    var width = window.innerWidth;
                    if(width<480) return "top:75%";
                    else return "left:"+(left+15)+"px; top:"+(top-40)+"px";
                })
                .html(function() {
                    myunit = "<br><span style=\"font-size:12px;\">units in "+datas.units+"</span>";   
                    return "<b>"+d.name+"</b><br><b>"+datas.parameter+": </b><span style=color:red>"+d.size +"</span>"+myunit;
                });
        }
    }
</script>

Above is the code block, used for retrieving the bar chart from my side.