     @height = @width
     @center = [@width/2, @height/2]
 
-    @projection = d3.geo.azimuthalEquidistant()
+    #d3.geo.azimuthalEquidistant()
+    @projection = d3.geo.azimuthalEqualArea()
       .clipAngle 90-1e-3
       .scale 150
       .translate @center

      .datum data
      .attr
        class: "nominal #{newClass}"
        #stroke: if main then 'rgb(255,0,0)' else 'rgb(100,100,100)'

  draw: =>
    @frame.selectAll 'path'

    @path = d3.geo.path()
      .projection @projection

    dragstarted = (d) ->
      #stopPropagation prevents dragging to "bubble up" which triggers same event for all elements below this object
      d3.event.sourceEvent.stopPropagation()
      d3.select @
        .classed 'dragging', true

    dragged = =>
      @projection.rotate [d3.event.x, -d3.event.y]
      @svg.selectAll('path').attr d: @path

    dragended = (d) ->
      d3.select @
        .classed 'dragging', false

    @drag = d3.behavior.drag()
      .origin =>
        r = @projection.rotate()
        {x: r[0], y: -r[1]}
      .on 'drag', dragged
      .on 'dragstart', dragstarted
      .on 'dragend', dragended

    graticule = d3.geo.graticule()

    @svg = d3.select el[0][0]
