title: D3.js -- Ordinal scale (version 3 to version 4)
body: <p>I am taking an Udemy's course on D3.js.</p>
  
  <p>Unfortunately because of the new version D3.js came out, there aren't any up-to-date tutorials on their new syntax so I am glancing at their API's wiki.</p>
  
  <p>That being said, I've been stuck on how to translate this code (version 3). I am learning <strong>ordinal scale</strong></p>
  
  <pre><code>var data = [
      {key: "Glazed",     value: 132},
      {key: "Jelly",      value: 71},
      {key: "Holes",      value: 337},
      {key: "Sprinkles",  value: 93},
      {key: "Crumb",      value: 78},
      {key: "Chocolate",  value: 43},
      {key: "Coconut",    value: 20},
      {key: "Cream",      value: 16},
      {key: "Cruller",    value: 30},
      {key: "Éclair",     value: 8},
      {key: "Fritter",    value: 17},
      {key: "Bearclaw",   value: 21}
  ];
  var w = 800;
  var h = 450;
  var margin = {
      top: 20,
      bottom: 20,
      left: 20,
      right: 20
  };
  var width = w - margin.left - margin.right;
  var height = h - margin.top - margin.bottom;
  var x = d3.scale.linear()
          .domain([0, d3.max(data, function(d){
              return d.value;
          })])
          .range([0, width]);
  var y = d3.scale.ordinal()
          .domain(data.map(function(entry){
              return entry.key;
          }))
          .rangeBands([0, height]);
  var svg = d3.select("body").append("svg")
              .attr("id", "chart")
              .attr("width", w)
              .attr("height", h);
  var chart = svg.append("g")
              .classed("display", true)
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  function plot(params){
      this.selectAll(".bar")
          .data(params.data)
          .enter()
              .append("rect")
              .classed("bar", true)
              .attr("x", 0)
              .attr("y", function(d,i){
                  return y(d.key);
              })
              .attr("height", function(d,i){
                  return y.rangeBand()-1;
              })
              .attr("width", function(d){
                  return x(d.value);
              });
      this.selectAll(".bar-label")
          .data(params.data)
          .enter()
              .append("text")
              .classed("bar-label", true)
              .attr("x", function(d){
                  return x(d.value);
              })
              .attr("dx", -4)
              .attr("y", function(d,i){
                  return y(d.key);
              })
              .attr("dy", function(d,i){
                  return y.rangeBand()/1.5+2;
              })
              .text(function(d){
                  return d.value;
              })
  }
  plot.call(chart, {data: data});
  </code></pre>
  
  <p>to version 4.</p>
  
  <p>Looking at their API Wiki, it seems that get rid <strong>rangeBand</strong> function <a href="https://github.com/d3/d3/blob/master/CHANGES.md" rel="noreferrer">CHANGES.MD</a></p>
  
  <p>I've tried my best translating but I can't figure it out what it's wrong:</p>
  
  <pre><code>var data = [
      {key: "Glazed",     value: 132},
      {key: "Jelly",      value: 71},
      {key: "Holes",      value: 337},
      {key: "Sprinkles",  value: 93},
      {key: "Crumb",      value: 78},
      {key: "Chocolate",  value: 43},
      {key: "Coconut",    value: 20},
      {key: "Cream",      value: 16},
      {key: "Cruller",    value: 30},
      {key: "Éclair",     value: 8},
      {key: "Fritter",    value: 17},
      {key: "Bearclaw",   value: 21}
  ];
  var w = 800;
  var h = 450;
  var margin = {
      top: 20,
      bottom: 20,
      left: 20,
      right: 20
  };
  var width = w - margin.left - margin.right;
  var height = h - margin.top - margin.bottom;
  var x = d3.scaleLinear()
          .domain([0, d3.max(data, function(d){
              return d.value;
          })])
          .range([0, width]);
  var y = d3.scaleOrdinal()
          .domain(data.map(function(entry){
              return entry.key;
          }))
          .range([0, height]);
  
  var svg = d3.select("body").append("svg")
              .attr("id", "chart")
              .attr("width", w)
              .attr("height", h);
  var chart = svg.append("g")
              .classed("display", true)
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  function plot(params){
      this.selectAll(".bar")
          .data(params.data)
          .enter()
              .append("rect")
              .classed("bar", true)
              .attr("x", 0)
              .attr("y", function(d,i){
                  return y(d.key);
              })
              .attr("height", function(d,i){
                  return y.range(1)-1;
              })
              .attr("width", function(d){
                  return x(d.value);
              });
      this.selectAll(".bar-label")
          .data(params.data)
          .enter()
              .append("text")
              .classed("bar-label", true)
              .attr("x", function(d){
                  return x(d.value);
              })
              .attr("dx", -4)
              .attr("y", function(d,i){
                  return y(d.key);
              })
              .attr("dy", function(d,i){
                  return y.range(1)/1.5+2;
              })
              .text(function(d){
                  return d.value;
              })
  }
  plot.call(chart, {data: data});
  </code></pre>
  
  <p><a href="http://codepen.io/neotriz/pen/JRWvQQ" rel="noreferrer">Working Version 3</a></p>
  
  <p><a href="http://codepen.io/neotriz/pen/jryQBP?editors=1010" rel="noreferrer">Not Working Version 4 </a></p>