title: Uncaught TypeError: xScale.rangeBand is not a function in d3.js
body: <p>Trying to generate bar chart by following <a href="http://vegibit.com/create-a-bar-chart-with-d3-javascript/">Vegibit's tutorial</a> in <a href="https://jsfiddle.net/xameeramir/499q0un9/">my fiddle</a>.</p>
  
  <p>The <code>d3.min.js</code> reference works good.</p>
  
  <p>However when I try to implement <a href="https://github.com/d3/d3/releases/latest">downloaded local copy</a> by using:</p>
  
  <p><code>&lt;script type="text/javascript" src="~/Scripts/d3/d3.min.js"&gt;&lt;/script&gt;</code></p>
  
  <p>The path is <a href="http://i.stack.imgur.com/oaWQK.png">auto generated</a> by Visual Studio's ASP.NET project tool</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    d3BarChart({
        element: '#bar-chart',
        dataSource: [10, 20, 220, 240, 270, 300, 330, 370, 410, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120,
            135, 150, 165, 180, 200],
      });
  
      function d3BarChart(chartConfig) {
  
        var dataSource = chartConfig.dataSource;
        var margin = { top: 30, right: 10, bottom: 30, left: 50 };
  
        var height = 400 - margin.top - margin.bottom,
            width = 720 - margin.left - margin.right,
            barWidth = 30,
            barOffset = 10;
  
        var dynamicColor;
  
        var yScale = d3.scaleLinear()
            .domain([0, d3.max(chartConfig.dataSource)])
            .range([0, height])
  
        var xScale = d3.scaleBand()
            .domain(d3.range(0, chartConfig.dataSource.length))
            .range([0, width])
  
        var colors = d3.scaleLinear()
            .domain([0, chartConfig.dataSource.length])
            .range(['red', 'green'])
  
        var awesome = d3.select(chartConfig.element).append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
            .selectAll('rect').data(chartConfig.dataSource)
            .enter().append('rect')
            .style({
              'fill': function (data, i) {
                return colors(i);
              }, 'stroke': '#31708f', 'stroke-width': '5'
            })
            .attr('width', xScale.rangeBand())
            .attr('x', function (data, i) {
              return xScale(i);
            })
            .attr('height', 0)
            .attr('y', height)
            .on('mouseover', function (data) {
              dynamicColor = this.style.fill;
              d3.select(this)
                  .style('fill', 'brown')
            })
  
            .on('mouseout', function (data) {
              d3.select(this)
                  .style('fill', dynamicColor)
            })
  
        awesome.transition()
            .attr('height', function (data) {
              return yScale(data);
            })
            .attr('y', function (data) {
              return height - yScale(data);
            })
            .delay(function (data, i) {
              return i * 20;
            })
            .duration(2000)
            .ease('elastic')
  
        var verticalGuideScale = d3.scale.linear()
            .domain([0, d3.max(chartConfig.dataSource)])
            .range([height, 0])
  
        var vAxis = d3.svg.axis()
            .scale(verticalGuideScale)
            .orient('left')
            .ticks(10)
  
        var verticalGuide = d3.select('svg').append('g')
        vAxis(verticalGuide)
        verticalGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
        verticalGuide.selectAll('path')
            .style({ fill: 'none', stroke: "#3c763d" })
        verticalGuide.selectAll('line')
            .style({ stroke: "#3c763d" })
  
        var hAxis = d3.svg.axis()
            .scale(xScale)
            .orient('bottom')
            .ticks(chartConfig.dataSource.size)
  
        var horizontalGuide = d3.select('svg').append('g')
        hAxis(horizontalGuide)
        horizontalGuide.attr('transform', 'translate(' + margin.left + ', ' + (height + margin.top) + ')')
        horizontalGuide.selectAll('path')
            .style({ fill: 'none', stroke: "#3c763d" })
        horizontalGuide.selectAll('line')
            .style({ stroke: "#3c763d" });
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="bar-chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>it throws the below error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: xScale.rangeBand is not a function</p>
  </blockquote>