More examples

example/box-whisker-mode.md

@@ -0,0 +1,46 @@
+# Using a Different Box and Whisker Mode
+
+The "mode" of a Box and Whisker plot changes the placement of the extent of the whiskers. The [`BoxWhisker`](http://d3plus.org/docs/#BoxWhisker) class defaults to using the "[tukey](https://en.wikipedia.org/wiki/Box_plot#Variations)" method, but this can be changed by setting the `whiskerMode` property of the [`Box`](http://d3plus.org/docs/#Box) shape class using [shapeConfig](http://d3plus.org/docs/#Viz.shapeConfig). Accepted values are `"tukey"`, `"extent"`, or an Array of 2 numbers used as the bottom and top percentile.
+
+ ```js
+var myData = [
+  {id: "alpha", value: 840},
+  {id: "alpha", value: 940},
+  {id: "alpha", value: 780},
+  {id: "alpha", value: 650},
+  {id: "alpha", value: 720},
+  {id: "alpha", value: 430},
+  {id: "alpha", value: 1850},
+  {id: "alpha", value: 300},
+  {id: "alpha", value: 360},
+  {id: "alpha", value: 1690},
+  {id: "alpha", value: 690},
+  {id: "alpha", value: -950},
+  {id: "alpha", value: -600},
+  {id: "alpha", value: -850},
+  {id: "beta",  value: 980},
+  {id: "beta",  value: 300},
+  {id: "beta",  value: 120},
+  {id: "beta",  value: 500},
+  {id: "beta",  value: 140},
+  {id: "beta",  value: 115},
+  {id: "beta",  value: 14},
+  {id: "beta",  value: -30},
+  {id: "beta",  value: -1050},
+  {id: "beta",  value: -100},
+  {id: "beta",  value: -800},
+  {id: "beta",  value: -1100},
+];
+
+ new d3plus.BoxWhisker()
+  .config({
+    data: myData,
+    groupBy: ["id", "value"],
+    shapeConfig: {
+      whiskerMode: "extent"
+    },
+    x: "id",
+    y: "value"
+  })
+  .render();
+```

example/disabling-tooltip.md

@@ -0,0 +1,24 @@
+# Disabling Tooltips
+
+To hide the default tooltips in any D3plus chart, set the [tooltip](http://d3plus.org/docs/#Viz.tooltip) property to `false`.
+
+ ```js
+var myData = [
+  {id: "alpha", xAxis: 4, yAxis:  7},
+  {id: "alpha", xAxis: 5, yAxis: 25},
+  {id: "alpha", xAxis: 6, yAxis: 13},
+  {id: "beta",  xAxis: 4, yAxis: 17},
+  {id: "beta",  xAxis: 5, yAxis:  8},
+  {id: "beta",  xAxis: 6, yAxis: 13}
+];
+
+new d3plus.BarChart()
+  .config({
+    data: myData,
+    groupBy: "id",
+    tooltip: false,
+    x: "xAxis",
+    y: "yAxis"
+  })
+  .render();
+```

example/line-plot-grouping.md

@@ -0,0 +1,34 @@
+# Line Plot Grouping
+
+You can group the lines in a [LinePlot](http://d3plus.org/docs/#LinePlot) by passing the [`groupBy`](https://d3plus.org/docs/#Viz.groupBy) property a nested Array of keys instead of a single key. This enables automatic line groupings/nestings and click behavior to dive into groups. The default level shown is defined using the [`depth`](https://d3plus.org/docs/#Viz.depth) method.
+
+ ```js
+var myData = [
+  {"year": 1991, "name":"alpha", "value": 15, "parent": "parent 1"},
+  {"year": 1992, "name":"alpha", "value": 20, "parent": "parent 1"},
+  {"year": 1993, "name":"alpha", "value": 30, "parent": "parent 1"},
+  {"year": 1994, "name":"alpha", "value": 60, "parent": "parent 1"},
+  {"year": 1991, "name":"beta",  "value": 10, "parent": "parent 1"},
+  {"year": 1992, "name":"beta",  "value": 10, "parent": "parent 1"},
+  {"year": 1993, "name":"beta",  "value": 40, "parent": "parent 1"},
+  {"year": 1994, "name":"beta",  "value": 60, "parent": "parent 1"},
+  {"year": 1991, "name":"gamma", "value": 5,  "parent": "parent 2"},
+  {"year": 1992, "name":"gamma", "value": 10, "parent": "parent 2"},
+  {"year": 1993, "name":"gamma", "value": 20, "parent": "parent 2"},
+  {"year": 1994, "name":"gamma", "value": 25, "parent": "parent 2"},
+  {"year": 1991, "name":"delta", "value": 50, "parent": "parent 2"},
+  {"year": 1992, "name":"delta", "value": 43, "parent": "parent 2"},
+  {"year": 1993, "name":"delta", "value": 17, "parent": "parent 2"},
+  {"year": 1994, "name":"delta", "value": 32, "parent": "parent 2"}
+]
+
+ new d3plus.LinePlot()
+  .config({
+    data: myData,
+    depth: 0,
+    groupBy: ["parent", "name"],
+    x: "year",
+    y: "value"
+  })
+  .render();
+```

example/scatter-plot-grouping.md

@@ -0,0 +1,27 @@
+# Scatter Plot Grouping
+
+ You can group the bubbles in a Scatter Plot by passing the [`groupBy`](https://d3plus.org/docs/#Viz.groupBy) property a nested Array of keys instead of a single key. This enables automatic shape groupings/nestings and click behavior to dive into groups. The default level shown is defined using the [`depth`](https://d3plus.org/docs/#Viz.depth) method.
+
+ ```js
+var myData = [
+  {"value": 100, "weight":  .45, "name": "alpha",   "group": "group 1"},
+  {"value": 70,  "weight":  .60, "name": "beta",    "group": "group 2"},
+  {"value": 40,  "weight":  -.2, "name": "gamma",   "group": "group 2"},
+  {"value": 15,  "weight":   .1, "name": "delta",   "group": "group 2"},
+  {"value": 5,   "weight": -.43, "name": "epsilon", "group": "group 1"},
+  {"value": 1,   "weight":    0, "name": "zeta",    "group": "group 1"}
+]
+
+ new d3plus.Plot()
+  .config({
+    data: myData,
+    depth: 0,
+    groupBy: ["group", "name"],
+    size: "value",
+    sizeMax: 100,
+    sizeMin: 20,
+    x: "value",
+    y: "weight"
+  })
+  .render();
+```