D3.js ordinal scale only returning extremes the values

Question

I'm new to d3.js. I'm trying to plot to get the ordinal values ​​on the x-axis, replacing the date values. I'm using the example from http://bl.ocks.org/hopelessoptimism/b8ef4734abad1c644221. I'm having difficulty using d3.js: Ordinal scale.

I tried this link too and other alternatives with no success.

the data2 csv is:

timestamp,AJU,BEL,BPS,BSB,BVB,CGB,CGH,CGR,CNF,CWB,FLN,FOR,GIG,GRU,GYN,IGU,IMP,IOS,JOI,JPA,LDB,MAB,MAO,MCP,MCZ,NAT,NVT,PMW,POA,PVH,RAO,RBR,REC,SDU,SJP,SLZ,SSA,STM,THE,UDI,VCP,VIX A,7,5,8,4,3,8,6,7,10,4,10,2,6,8,2,3,3,4,5,10,4,4,2,9,8,9,5,7,7,7,10,4,6,9,5,3,8,5,4,3,8,3 B,7,6,10,7,6,4,7,5,3,4,7,6,5,2,9,10,10,4,7,6,2,2,2,9,3,4,7,9,2,4,8,10,2,3,9,2,2,2,2,10,4,9 C,6,4,7,4,5,8,8,10,9,5,2,2,8,2,2,6,8,4,10,5,2,9,3,4,6,3,9,2,2,4,2,10,9,5,6,4,10,10,4,3,7,10 D,8,5,10,2,7,3,6,3,6,9,7,8,5,2,3,5,6,7,2,10,3,4,4,6,9,3,4,7,2,2,3,7,4,8,6,7,3,8,5,9,7,8

error pic

This is a part of the line code:

       // maximum reviews
        var max_y = d3.max(data[2], function(d) {
            var max = 0;

            d3.values(d).forEach(function(i) {
              if (+i && (+i > max)) {
                max = +i;
              }
            });

            return max;
        });

        // Create y-axis scale mapping price -> pixels
        var measure_scale = d3.scale.linear()
            .range([height, 100])
            .domain([0, max_y])
   ;

        // Create D3 axis object from measure_scale for the y-axis
        var measure_axis = d3.svg.axis()
            .scale(measure_scale)
            .orient("right");

        // Append SVG to page corresponding to the D3 y-axis
        d3.select('#chart').append('g')
              .attr('class', 'y axis')
              .attr("transform", "translate(" + width + " , -15)")
              .call(measure_axis);

        // add label to y-axis 
        d3.select(".y.axis")
              .append("text")
              .attr('class', 'label')
              .text("Daily")
              .attr("transform", "translate(45,110) rotate(90)");

        // create a function to draw the timeseries for each neighborhood
        var drawChart = function(field) {
          // remove the previous chart
          d3.select('#chart').select('.x.axis').remove();
          d3.select('#chart').select('path').remove();

          // update the title
          d3.select('#heading')
            .text(field);

          // remove missing values
          var neigh_data = data[2].filter(function(d) {
            return d[field];
          });

          // get min/max dates
          var time_extent = d3.extent(neigh_data, function(d){
            return d['timestamp'];
    ;
          });
    
          // Create x-axis scale mapping dates -> pixels
          var time_scale = d3.scale.ordinal()
              .range([0, width - margin])
     // .rangePoints([0, width - margin])
           // .range([0, width - margin])
     // .rangeBands([0, width], .1)
     .domain(time_extent)
     ;

     
          // Create D3 axis object from time_scale for the x-axis
          var time_axis = d3.svg.axis()
              .scale(time_scale)
     // .ticks(10)
           // .tickFormat(d3.format(""))
     // .tickFormat(d3.time.format("%b '%y"))
     ;     
     
          // Append SVG to page corresponding to the D3 x-axis
          d3.select('#chart').append('g')
              .attr('class', 'x axis')
              .attr('transform', "translate(" + margin + ',' + (height - 15) + ")")
              .call(time_axis)
          .selectAll("text")
            .attr("y", 0)
            .attr("x", 9)
            .attr("dy", ".35em")
            .attr("transform", "rotate(90)")
            .style("text-anchor", "start");

          // define the values to map for x and y position of the line
          var line = d3.svg.line()
                       .x(function(d) { return time_scale(d['timestamp']); })
                       .y(function(d) { return measure_scale(+d[field]); });
        
      
        
        ;

          // append a SVG path that corresponds to the line chart
          d3.select('#chart').append("path")
            .datum(neigh_data)
            .attr("class", "line")
            .attr("d", line)
            .attr('transform', 'translate(' + margin + ', -15)');
        };

        drawChart(field);

        // create a callback for the neighborhood hover
        var mover = function(d) {
          var neigh = d.iata;
          d3.select('#map path.' + neigh).style('fill', '#9999ff');

          drawChart(neigh);
        };

Can someone tell me what am I doing wrong?