Updating README to include the pings, fixed some issues with the hexbin

and how it was animating rapidly arriving data.

README.md

@@ -5,7 +5,7 @@
 ## What is it?
 A collection of Leaflet plugins that enable you to leverage various d3.js visualizations directly on Leaflet maps. If you would like to use these plugins with the [Angular Leaflet Directive](https://github.com/tombatossals/angular-leaflet-directive), use the [Angular Leaflet Directive Extension ](https://github.com/Asymmetrik/angular-leaflet-directive-ext) project.
 
-## Hexbins
+### Hexbins
 Create dynamic hexbin-based heatmaps on Leaflet maps. This plugin is based on [the work of Steven Hall](http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps). The primary difference is that this plugin leverages the data-binding power of d3 to allow you to dynamically update the data and visualize the transitions.
 
 <img src="https://cloud.githubusercontent.com/assets/480701/4594707/d995541a-5091-11e4-9955-5938b1cb977a.png" alt="map with hexbins"/>
@@ -19,6 +19,7 @@ To use, simply declare a hexbin layer and add it to your map. You can then add d
 var options = {
 	radius : 10,							// Size of the hexagons/bins
 	opacity: 0.5,							// Opacity of the hexagonal layer
+	duration: 200,							// millisecond duration of d3 transitions (see note below)
 	lng: function(d){ return d[0]; },		// longitude accessor
 	lat: function(d){ return d[1]; },		// latitude accessor
 	value: function(d){ return d.length; },	// value accessor - derives the bin value
@@ -39,6 +40,38 @@ hexLayer.data([[lng1, lat1], [lng2, lat2], ... [lngN, latN]]);
 
 ```
 
+Special note regarding transition durations: If your data is transforming faster than the transition duration, you may encounter unexpected behavior. You should reduce the transition duration or eliminate it entirely if you are going to be using this plugin in a realtime manner.
+
+### Pings
+Create realtime animated drops/pings/blips on a map. This plugin can be used to indicate a transient event, such as a real-time occurrance of an event at a specific geographical location.
+
+<img src="https://cloud.githubusercontent.com/assets/480701/4890582/5b6781ae-63a0-11e4-8e45-236eb7c75b85.gif" alt="map with pings"/>
+
+Live Demo: [JSFiddle](http://jsfiddle.net/reblace/7jfhLgnq/embedded/result/)
+
+To use, simply declare a ping layer and add it to your map. You can then add data by calling the ping() method.
+
+```js
+// Options for the ping layer
+var options = {
+	lng: function(d){ return d[0]; },
+	lat: function(d){ return d[1]; },
+	duration: 800
+};
+
+// Create the ping layer
+var pingLayer = L.pingLayer(options).addTo(map);
+
+// Optionally, access the radius scale and opacity scale
+pingLayer.radiusScale().range([2, 18]);
+pingLayer.opacityScale().range([1, 0]);
+
+// Submit data so that it shows up as a ping
+pingLayer.ping([longFn(), latFn()]);
+
+```
+
+
 ## How do I include this plugin in my project?
 The easiest way to include this plugin in your project, use [Bower](http://bower.io)
 

dist/leaflet-d3.js

@@ -19,7 +19,7 @@
 			value: function(d){
 				return d.length;
 			},
-			valueFloor: 0,
+			valueFloor: undefined,
 			valueCeil: undefined,
 			colorRange: ['#f7fbff', '#08306b']
 		},
@@ -36,6 +36,7 @@
 			this._colorScale = d3.scale.linear()
 				.range(this.options.colorRange)
 				.clamp(true);
+
 		},
 
 		onAdd : function(map) {
@@ -158,25 +159,28 @@
 			// Set the colorscale domain to be the extent (after we muck with it a bit)
 			that._colorScale.domain(extent);
 
-			// Update the d3 visualization
+			// Join - Join the Hexagons to the data
 			var join = g.selectAll('path.hexbin-hexagon')
 				.data(bins, function(d){ return d.i + ':' + d.j; });
 
+			// Update - set the fill and opacity on a transition (opacity is re-applied in case the enter transition was cancelled)
 			join.transition().duration(that.options.duration)
-				.attr('fill', function(d){ return that._colorScale(d.length); });
+				.attr('fill', function(d){ return that._colorScale(d.length); })
+				.attr('opacity', that.options.opacity);
 
+			// Enter - establish the path, the fill, and the initial opacity
 			join.enter().append('path').attr('class', 'hexbin-hexagon')
-				.attr('d', function(d){
-					return 'M' + d.x + ',' + d.y + that._hexLayout.hexagon();
-				})
+				.attr('d', function(d){ return 'M' + d.x + ',' + d.y + that._hexLayout.hexagon(); })
 				.attr('fill', function(d){ return that._colorScale(d.length); })
 				.attr('opacity', 0.01)
 				.transition().duration(that.options.duration)
-				.attr('opacity', that.options.opacity);
-
+					.attr('opacity', that.options.opacity);
+
+			// Exit
 			join.exit().transition().duration(that.options.duration)
 				.attr('opacity', 0.01)
 				.remove();
+
 		},
 
 		_project : function(coord) {