adds Legend image and label examples

example/legend-image.md

@@ -0,0 +1,24 @@
+[width]: 400
+[height]: 200
+
+# Images in Legends
+
+Each pair of square and text in a Legend is just an extension of the [Shape](http://d3plus.org/docs/#Shape) class. In order to override how they are rendered, pass a valid [config](http://d3plus.org/docs/#BaseClass.config) object to [.shapeConfig( )](http://d3plus.org/docs/#Shape.shapeConfig). In this example, we are providing an accessor function to the [backgroundImage](http://d3plus.org/docs/#Shape.backgroundImage) method of [Shape](http://d3plus.org/docs/#Shape), which returns an image path from each data point.
+
+```js
+var data = [
+  {id: "Apple", color: "orange", image: "https://datausa.io/static/img/attrs/thing_apple.png"},
+  {id: "Fish", color: "blue", image: "https://datausa.io/static/img/attrs/thing_fish.png"},
+  {id: "Tomato", color: "red", image: "https://datausa.io/static/img/attrs/thing_tomato.png"}
+];
+
+var legend = new d3plus.Legend()
+  .data(data)
+  .shapeConfig({
+    backgroundImage: function(d) { return d.image; },
+    fill: function(d) { return d.color; },
+    height: 25,
+    width: 25
+  })
+  .render();
+```

example/legend-remove-label.md

@@ -0,0 +1,25 @@
+[width]: 400
+[height]: 200
+
+# Removing Legend Labels
+
+The text labels in a legend can be removed/disabled by setting the [.label( )](http://d3plus.org/docs/#Legend.label) method to `false`. This is common practice when using images, as in the [Images in Legends](http://d3plus.org/examples/d3plus-legend/legend-image/) example (which this code is based on).
+
+```js
+var data = [
+  {id: "Apple", color: "orange", image: "https://datausa.io/static/img/attrs/thing_apple.png"},
+  {id: "Fish", color: "blue", image: "https://datausa.io/static/img/attrs/thing_fish.png"},
+  {id: "Tomato", color: "red", image: "https://datausa.io/static/img/attrs/thing_tomato.png"}
+];
+
+var legend = new d3plus.Legend()
+  .data(data)
+  .label(false)
+  .shapeConfig({
+    backgroundImage: function(d) { return d.image; },
+    fill: function(d) { return d.color; },
+    height: 25,
+    width: 25
+  })
+  .render();
+```