     .entries(env.recruits)
 
   hotspots.sort (a, b) -> d3.descending(a.values, b.values)
-  topPlaces = hotspots[0..10].map (spot) -> spot.place = bygid[spot.key]; spot
+  topPlaces = hotspots[0..14].map (spot) -> spot.place = bygid[spot.key]; spot
 
   for recruit in env.recruits
     coordinates = env.projection [recruit.lat, recruit.lon]
     context.beginPath()
     context.arc coordinates[0], coordinates[1], radius(recruit.stars), 0, Math.PI * 2, false
-    context.fillStyle = env.colors[recruit.stars - 1]
-    context.shadowColor = env.colors[recruit.stars - 1]
+    context.fillStyle = 'rgba(223, 0, 83, 0.9)' #env.colors[recruit.stars - 1]
+    context.shadowColor = 'rgba(255, 255, 255, 0.5)'
     context.fill()
 
   context.restore()

  context.strokeStyle = "#333"
  context.stroke()

  context.shadowBlur = 6
  context.globalCompositeOperation = 'color-dodge'

  bygid = d3.nest()

  context.fillStyle = 'fff'
  context.lineWidth = 0.5
  context.strokeStyle = "333"
  context.font = "12px Helvetica Neue"

  for city in topPlaces
    place = city.place
    [x, y] = env.projection [place.lon, place.lat]
    label = "#{place.name}: #{city.values}"
    metrics = context.measureText label
    # Why the hell not?  http://stackoverflow.com/a/1135363/26876
    metrics.height = context.measureText('m').width
    margin = 5
    padding = 10

    x += margin
    y += margin

    context.beginPath()
    context.rect x, y - metrics.height, metrics.width + padding, metrics.height + padding
    context.fillStyle = 'rgba(31, 192, 30, 0.9)'
    context.fill()

    context.beginPath()
    context.fillStyle = 'rgba(255, 255, 255, 1)'
    context.arc x - margin, y - margin, 2, 0, Math.PI * 2, false
    context.fill()

    context.beginPath()
    context.fillStyle = '#fff'
    context.fillText(label, x + padding / 2, y + padding / 2)
    context.fill()
    # context.stroke()

$(document).on 'data.loaded', render
