 
       feature = svg.selectAll("path")
 
+      highlight = g.append("g")
+      highlight.append("rect").attr("class", 'rect')
+
       # d3.timer(redraw)
 
 


    p.exit().remove()
    updateCities()

    rtn


      .attr("cy", (d,i) -> projection([d.lng, d.lat])[1])

    c.transition()
      .duration(2000)
      # .delay((d,i) -> 60 * i)
      .attr("r", (d) -> rScale(d.count))
  

  showHighlight = (d) ->
    if d
      rect = highlight.select('.rect')
      #   .attr("fill", "gray")

      img = highlight.selectAll(".img")
        .data([d])

      line = highlight.selectAll('path').data([d])
      line.enter().append("path")

      line
        .attr('x1', width / 2 + width / 6 + 50)
        .attr('y1', 100)
        .attr("stroke", "black")
        .attr("stroke-width", 2)

      line.transition()
        .duration(200)
        .attr "d", (d,i) ->
          start = "#{ width / 2 + width / 6 + 50} #{100}"
          endx = projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0]
          endy =  projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1]
          "M #{start} L #{endx} #{endy}"

      img.enter().append('image')
        .attr('class', 'img')

      img.attr('xlink:href', d.properties.img_url)
        .attr("width", 100)
        .attr("height", 200)
        .attr("x", width / 2 + width / 6)
        .attr("y", 0)
      
      img.transition()
        .duration(100)
        # .attr("x", (d,i) -> projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0])
        # .attr("y", (d,i) -> projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1])
        




  addData = (timediff) ->
    if (timediff - lastSec) < 2000
      return false
    else
      lastSec = timediff
    rtn = false
    # console.log(startTime)
    # randomStore = d3.values(locations)[Math.floor(Math.random() * d3.values(locations).length)]
