 
     @throttled_request_data = _.throttle((=> @request_data()), 40)
 
-    # Set up image plot for the spectrogram
-    @image_width = NGRAMS
-    @image_height = 256
-    @image = [new ArrayBuffer(SPECTROGRAM_LENGTH * NGRAMS * 4)]
-    @spec_source = Collections('ColumnDataSource').create(
-      data:{image: @image}
-    )
-    spec_model = @create_spec()
-    @spec_view = new spec_model.default_view(model: spec_model)
+    @spec_plot = new SpectrogramPlot({
+      width: NGRAMS, height: SPECTROGRAM_LENGTH/2, border: BORDER
+    })
 
     @power_plot = new SimpleIndexPlot({
       x0: 0, x1: window.TIMESLICE, y0: -0.5, y1: 0.5, width: 550, height: 220, border: BORDER

        location: 'min'
        bounds: 'auto'
      }
      parent: plot_model.ref()
    )

    glyphspec = {
      type: 'image_rgba'
      x: 0
      y: 0
      dw: NGRAMS
      dh: MAX_FREQ
      width: NGRAMS,
      height: SPECTROGRAM_LENGTH,
      image: 'image'
      palette:
        default: 'YlGnBu-9'
    }
    glyph = Collections('GlyphRenderer').create({
      data_source: @spec_source.ref()
      xdata_range: xrange.ref()
      ydata_range: yrange.ref()
      glyphspec: glyphspec
    })
    plot_model.add_renderers([glyph, xaxis, yaxis])

    return plot_model

class RadialHistogramPlot
  constructor: (options) ->

    slider_div = $('<div id="freq-range-slider" style="width: 200px;"></div>')
    slider_div.slider({
      animate: "fast",
      step: 1,
      min: FREQ_SLIDER_MIN,
      max: FREQ_SLIDER_MAX,
      values: [FREQ_SLIDER_MIN, FREQ_SLIDER_MAX],
      slide: ( event, ui ) =>
        @set_freq_range(event, ui)
    });
