diff --git a/example/box-whisker-mode.md b/example/box-whisker-mode.md new file mode 100644 index 0000000..b2d1012 --- /dev/null +++ b/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(); +``` \ No newline at end of file diff --git a/example/disabling-tooltip.md b/example/disabling-tooltip.md new file mode 100644 index 0000000..9075cba --- /dev/null +++ b/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(); +``` \ No newline at end of file diff --git a/example/line-plot-grouping.md b/example/line-plot-grouping.md new file mode 100644 index 0000000..db914da --- /dev/null +++ b/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(); +``` \ No newline at end of file diff --git a/example/scatter-plot-grouping.md b/example/scatter-plot-grouping.md new file mode 100644 index 0000000..0717850 --- /dev/null +++ b/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(); +``` \ No newline at end of file