D3 Ranged Bar Chart

This ranged bar chart uses D3 to visualize the price range. In the dataset Car&Vehicle will have a cost range from 55$ to 190$ Television & Video will have a cost range from 75$ to 190$ so on. For demo check here

<!DOCTYPE html>
<html>

<head>
  <title>Ranged D3 Bar - Charts</title>
  <style>
    #xaxis .domain {
      fill: none;
      stroke: #000;
    }
    
    #xaxis text,
    #yaxis text {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="wrapper">
  </div>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation', 'Home Audio', 'Office Electronics', 'Portable Audio', 'Portable Video', 'Security & Surveillance', 'Service', 'Television & Video', 'Car & Vehicle'];

var dollars = [
      [100, 213],
      [75, 209],
      [50, 190],
      [100, 179],
      [140, 156],
      [138, 209],
      [90, 190],
      [65, 179],
      [100, 213],
      [100, 209],
      [50, 190],
      [76, 179],
      [45, 156],
      [80, 209],
      [75, 190],
      [55, 190]
    ];

var colors = ['#0000b4', '#0082ca', '#0094ff', '#0d4bcf', '#0066AE', '#074285', '#00187B', '#285964', '#405F83', '#416545', '#4D7069', '#6E9985', '#7EBC89', '#0283AF', '#79BCBF', '#99C19E'];

var grid = d3.range(25).map(function(i) {
      return {
        'x1': 0,
        'y1': 0,
        'x2': 0,
        'y2': 480
      };
    });

var xscale = d3.scale.linear()
      .domain([10, 250])
      .range([0, 722]);

var yscale = d3.scale.linear()
      .domain([0, categories.length])
      .range([0, 480]);

var colorScale = d3.scale.quantize()
      .domain([0, categories.length])
      .range(colors);

var canvas = d3.select('#wrapper')
      .append('svg')
      .attr({
        'width': 900,
        'height': 550
      });

var xAxis = d3.svg.axis();
    xAxis
      .orient('bottom')
      .scale(xscale)

var yAxis = d3.svg.axis();
    yAxis
      .orient('left')
      .scale(yscale)
      .tickSize(2)
      .tickFormat(function(d, i) {
        return categories[i];
      })
      .tickValues(d3.range(17));

var y_xis = canvas.append('g')
      .attr("transform", "translate(150,0)")
      .attr('id', 'yaxis')
      .call(yAxis);

var x_xis = canvas.append('g')
      .attr("transform", "translate(150,480)")
      .attr('id', 'xaxis')
      .call(xAxis);

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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