title: How do i use d3.js to create a bar chart in my Rails5 app
body: <p>I keep getting this error in my terminal.</p>
  
  <p>I followed this tutorial <a href="http://www.overfitted.com/blog/?p=302" rel="nofollow">http://www.overfitted.com/blog/?p=302</a></p>
  
  <p>Started GET "/data" for ::1 at 2016-07-26 21:55:43 +0100</p>
  
  <p>ActionController::RoutingError (No route matches [GET] "/data"):
    actionpack (4.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in <code>call'
    web-console (2.3.0) lib/web_console/middleware.rb:28:in</code>block in call'
    web-console (2.3.0) lib/web_console/middleware.rb:18:in <code>catch'
    web-console (2.3.0) lib/web_console/middleware.rb:18:in</code>call'
    actionpack (4.2.6) lib/action_dispatch/middleware/show_exceptions.rb:30:in <code>call'
    railties (4.2.6) lib/rails/rack/logger.rb:38:in</code>call_app'
    railties (4.2.6) lib/rails/rack/logger.rb:20:in <code>block in call'
    activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in</code>block in tagged'
    activesupport (4.2.6) lib/active_support/tagged_logging.rb:26:in <code>tagged'
    activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in</code>tagged'
    railties (4.2.6) lib/rails/rack/logger.rb:20:in <code>call'
    actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:in</code>call'
    rack (1.6.4) lib/rack/methodoverride.rb:22:in <code>call'
    rack (1.6.4) lib/rack/runtime.rb:18:in</code>call'
    activesupport (4.2.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in <code>call'
    rack (1.6.4) lib/rack/lock.rb:17:in</code>call'
    actionpack (4.2.6) lib/action_dispatch/middleware/static.rb:120:in <code>call'
    rack (1.6.4) lib/rack/sendfile.rb:113:in</code>call'
    railties (4.2.6) lib/rails/engine.rb:518:in <code>call'
    railties (4.2.6) lib/rails/application.rb:165:in</code>call'
    rack (1.6.4) lib/rack/content_length.rb:15:in <code>call'
    puma (3.6.0) lib/puma/configuration.rb:225:in</code>call'
    puma (3.6.0) lib/puma/server.rb:578:in <code>handle_request'
    puma (3.6.0) lib/puma/server.rb:415:in</code>process_client'
    puma (3.6.0) lib/puma/server.rb:275:in <code>block in run'
    puma (3.6.0) lib/puma/thread_pool.rb:116:in</code>block in spawn_thread'</p>
  
  <p>Rendered /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (1.1ms)
    Rendered /Users/omorhefere/.rvm/gems/ruby-2.3.1@rails5.0/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/routing_error.text.erb (40.3ms)</p>
  
  <p>Here is my code:</p>
  
  <p>My controller</p>
  
  <pre><code>    class MeController &lt; ApplicationController
      def index
  
      end
  
      def data
       respond_to do |format|
        format.json {
         render :json =&gt; [1,2,3,4,5]
          }
       end
      end
  
  
   end
  </code></pre>
  
  <p>MY JAVASCRIPT</p>
  
  <pre><code>      $.ajax({
         type: "GET",
         contentType: "application/json; charset=utf-8",
         url: 'data',
         dataType: 'json',
         success: function (data) {
             draw(data);
         },
         error: function (result) {
             error();
         }
     });
  
  function draw(data) {
   var color = d3.scale.category20b();
   var width = 420,
      barHeight = 20;
  
   var x = d3.scale.linear()
      .range([0, width])
      .domain([0, d3.max(data)]);
  
   var chart = d3.select("#graph")
      .attr("width", width)
      .attr("height", barHeight * data.length);
  
   var bar = chart.selectAll("g")
      .data(data)
      .enter().append("g")
      .attr("transform", function (d, i) {
                return "translate(0," + i * barHeight + ")";
            });
  
   bar.append("rect")
      .attr("width", x)
      .attr("height", barHeight - 1)
      .style("fill", function (d) {
                 return color(d)
             })
  
   bar.append("text")
      .attr("x", function (d) {
                return x(d) - 10;
            })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .style("fill", "white")
      .text(function (d) {
                return d;
            });
  }
  
  function error() {
    console.log("error")
  }
  </code></pre>
  
  <p>MY ROUTES</p>
  
  <pre><code>       get 'me/data', :defaults =&gt; { :format =&gt; 'json' }
  </code></pre>
  
  <p>I have added this to my application.js file.</p>