writings-1-a.coffee

# first check if there is no histogram around...
if @g.selectAll('path')[0].length == 0
  @bar = @g.selectAll("g.bar")
    .data(data)
    .enter().append("g")
  @bar.append("rect")
#
# ...more code...
#
else
  @g.selectAll("rect")
    .data(data)
    .transition()

writings-1-b.json

[
  {
    "lat":35.8706911472,
    "lng":104.1904317352,
    "state":"inactive",
    "size":2,
    "id":122,
    "uique_id":262.0611228824
  },
]

writings-1-c.coffee

initOverlays: ->
  self = this
  # Remove loading gif
  $(".ajax-loader").hide()
  @data = @collection.parseDataForMap()
  @max = @collection.getMaxVal()
  # Create an overlay.
  overlay = new google.maps.OverlayView()

  # Add the container when the overlay is added to the map.
  overlay.onAdd = ->
    layer = d3.select(@getPanes().overlayMouseTarget)
      .append("div").attr("class", "locations")
    self.drawSvg = _.bind self.drawSvg, @, layer, self

  overlay.draw = ->
    self.drawSvg self.data

  # Bind our overlay to the map…
  overlay.setMap @map

writings-1-d.coffee

drawSvg: (layer, self, data) ->
  #
  # ... more code...
  #
  marker = layer.selectAll("svg")
    .data(data, (d) -> d.uique_id)
    .each(transform) # update existing markers
    .attr("class", (d) -> d.state)

  enter = marker.enter().append("svg:svg")
    .each(transform)
    .attr("class", (d) -> d.state)

  # Lets position the text first (under the circle), 
  # so it does not interfere with the click events. 
  # Only works because our circles are semi-transparent.
  txt = enter.append("svg:text")
    .each(transformTxt)
    .attr("dy", ".31em")
    .text((d) -> d.size)
    .style("font-size", (d) -> 
      s = self.getFontSize d.size
      "#{s}px"
    )

  circle = enter.append("svg:circle")
    .each(addEventListeners)
    .each(transformCircle)

  exit = marker.exit()
    #.each(removeEventListener) # TODO?
    .remove()