From 3a69e69f42b3d12eef9e4956ee20661e5a3fcd2e Mon Sep 17 00:00:00 2001 From: Rashmi Date: Mon, 20 May 2019 14:00:09 -0700 Subject: [PATCH 1/8] adds box and whisker mode example --- example/box-whisker-mode.md | 41 +++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 example/box-whisker-mode.md diff --git a/example/box-whisker-mode.md b/example/box-whisker-mode.md new file mode 100644 index 0000000..e5697fd --- /dev/null +++ b/example/box-whisker-mode.md @@ -0,0 +1,41 @@ +# Using a Different Box and Whisker Mode + +Mode in a Box and Whisker plot changes the extent of the whiskers. The [BoxWhisker](http://d3plus.org/docs/#BoxWhisker) mode defaults to being `tukey`. + +The mode can be changed by passing `whiskerMode` property to "tukey", "extent" or a percentile number, inside `Box` property of [shapeConfig](http://d3plus.org/docs/#Viz.shapeConfig). + + ```js +var myData = [ + {id: "alpha", value: 300}, + {id: "alpha", value: 20}, + {id: "alpha", value: 180}, + {id: "alpha", value: 40}, + {id: "alpha", value: 170}, + {id: "alpha", value: 125}, + {id: "alpha", value: 74}, + {id: "alpha", value: 80}, + {id: "beta", value: 180}, + {id: "beta", value: 30}, + {id: "beta", value: 120}, + {id: "beta", value: 50}, + {id: "beta", value: 140}, + {id: "beta", value: 115}, + {id: "beta", value: 14}, + {id: "beta", value: 30}, +]; + + new d3plus.BoxWhisker() + .config({ + data: myData, + groupBy: ["id", "value"], + x: "id", + y: "value", + shapeConfig: { + Box: { + whiskerMode: "extent" + } + }, + legend: false + }) + .render(); +``` \ No newline at end of file From c2d73ce36aaed171500e6dabcf23ffbdbb9dc14a Mon Sep 17 00:00:00 2001 From: Rashmi Date: Mon, 20 May 2019 14:01:52 -0700 Subject: [PATCH 2/8] adds lineplot grouping example --- example/line-plot-grouping.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 example/line-plot-grouping.md diff --git a/example/line-plot-grouping.md b/example/line-plot-grouping.md new file mode 100644 index 0000000..3e7578f --- /dev/null +++ b/example/line-plot-grouping.md @@ -0,0 +1,33 @@ +# Line Plot Grouping + +By passing the `groupBy` property an array instead of a single key, the [LinePlot](http://d3plus.org/docs/#LinePlot) class will group lines based on the keys (and order) you pass it in the array. + + ```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, + groupBy: ["name", "parent"], + x: "year", + y: "value" + }) + .render(); +``` \ No newline at end of file From 62136af64428466816879968fdd634ba482d7973 Mon Sep 17 00:00:00 2001 From: Rashmi Date: Mon, 20 May 2019 14:03:37 -0700 Subject: [PATCH 3/8] adds scatter plot example --- example/scatter-plot-grouping.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 example/scatter-plot-grouping.md diff --git a/example/scatter-plot-grouping.md b/example/scatter-plot-grouping.md new file mode 100644 index 0000000..1b9196a --- /dev/null +++ b/example/scatter-plot-grouping.md @@ -0,0 +1,26 @@ +# Scatter Plot Grouping + + With the help of a [Simple X/Y Plot](http://d3plus.org/docs/#Plot), you can group scatter plot by passing the `groupBy` property an array instead of a single key. Based on the keys (and order) you pass it in the array, [ X/Y Plot](http://d3plus.org/docs/#Plot) will group scattered plot. + + ```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, + groupBy: ["group", "name"], + x: "value", + y: "weight", + size: "value", + sizeMin: 20, + sizeMax: 100 + }) + .render(); +``` \ No newline at end of file From d34e150af77c60c52765eb023d0ef6e55a3c4e05 Mon Sep 17 00:00:00 2001 From: Rashmi Date: Mon, 20 May 2019 14:04:53 -0700 Subject: [PATCH 4/8] adds hide tooltip example --- example/hiding-tooltip.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 example/hiding-tooltip.md diff --git a/example/hiding-tooltip.md b/example/hiding-tooltip.md new file mode 100644 index 0000000..6d847b5 --- /dev/null +++ b/example/hiding-tooltip.md @@ -0,0 +1,26 @@ +# Hiding Tooltip + +To hide tooltip in a [D3plus](http://d3plus.org) chart, set the [tooltip](http://d3plus.org/docs/#Viz.tooltip) property to `false`: + + ```js +var myData = [ + {"Travel Time": "< 5 Minutes", "Population Percentage": 2}, + {"Travel Time": "15 - 24 Minutes", "Population Percentage": 30}, + {"Travel Time": "35 - 44 Minutes", "Population Percentage": 7}, + {"Travel Time": "45 - 89 Minutes", "Population Percentage": 11}, + {"Travel Time": "5 - 14 Minutes", "Population Percentage": 20}, + {"Travel Time": "90+ Minutes", "Population Percentage": 5}, + {"Travel Time": "25 - 34 Minutes", "Population Percentage": 25} +]; + +new d3plus.BarChart() + .config({ + data: myData, + groupBy: "Travel Time", + x: "Travel Time", + y: "Population Percentage", + tooltip: false, + legend: false + }) + .render(); +``` \ No newline at end of file From 5eea462c636c1b65d7747eb7302a2bf9d6c74b98 Mon Sep 17 00:00:00 2001 From: Rashmi Date: Thu, 23 May 2019 10:06:32 -0700 Subject: [PATCH 5/8] addresses all hiding tooltip comments in the PR --- example/disabling-tooltip.md | 24 ++++++++++++++++++++++++ example/hiding-tooltip.md | 26 -------------------------- 2 files changed, 24 insertions(+), 26 deletions(-) create mode 100644 example/disabling-tooltip.md delete mode 100644 example/hiding-tooltip.md diff --git a/example/disabling-tooltip.md b/example/disabling-tooltip.md new file mode 100644 index 0000000..d37a623 --- /dev/null +++ b/example/disabling-tooltip.md @@ -0,0 +1,24 @@ +# Disabling Tooltips + +To disable tooltip in a [D3plus](http://d3plus.org) 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/hiding-tooltip.md b/example/hiding-tooltip.md deleted file mode 100644 index 6d847b5..0000000 --- a/example/hiding-tooltip.md +++ /dev/null @@ -1,26 +0,0 @@ -# Hiding Tooltip - -To hide tooltip in a [D3plus](http://d3plus.org) chart, set the [tooltip](http://d3plus.org/docs/#Viz.tooltip) property to `false`: - - ```js -var myData = [ - {"Travel Time": "< 5 Minutes", "Population Percentage": 2}, - {"Travel Time": "15 - 24 Minutes", "Population Percentage": 30}, - {"Travel Time": "35 - 44 Minutes", "Population Percentage": 7}, - {"Travel Time": "45 - 89 Minutes", "Population Percentage": 11}, - {"Travel Time": "5 - 14 Minutes", "Population Percentage": 20}, - {"Travel Time": "90+ Minutes", "Population Percentage": 5}, - {"Travel Time": "25 - 34 Minutes", "Population Percentage": 25} -]; - -new d3plus.BarChart() - .config({ - data: myData, - groupBy: "Travel Time", - x: "Travel Time", - y: "Population Percentage", - tooltip: false, - legend: false - }) - .render(); -``` \ No newline at end of file From 1bf0b37434516e717231b85e220b6071c5d9ae0c Mon Sep 17 00:00:00 2001 From: Rashmi Date: Thu, 23 May 2019 10:08:35 -0700 Subject: [PATCH 6/8] modifies disabling tooltip description as suggested in PR --- example/disabling-tooltip.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/disabling-tooltip.md b/example/disabling-tooltip.md index d37a623..9075cba 100644 --- a/example/disabling-tooltip.md +++ b/example/disabling-tooltip.md @@ -1,6 +1,6 @@ # Disabling Tooltips -To disable tooltip in a [D3plus](http://d3plus.org) chart, set the [tooltip](http://d3plus.org/docs/#Viz.tooltip) property to `false`: +To hide the default tooltips in any D3plus chart, set the [tooltip](http://d3plus.org/docs/#Viz.tooltip) property to `false`. ```js var myData = [ From cbe6b1eeb5814a2f0e82be2bca950e366f7a11c3 Mon Sep 17 00:00:00 2001 From: Rashmi Date: Thu, 23 May 2019 19:15:55 -0700 Subject: [PATCH 7/8] Addresses PR comments for line plot and scatter plot groupings --- example/line-plot-grouping.md | 5 +++-- example/scatter-plot-grouping.md | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/example/line-plot-grouping.md b/example/line-plot-grouping.md index 3e7578f..db914da 100644 --- a/example/line-plot-grouping.md +++ b/example/line-plot-grouping.md @@ -1,6 +1,6 @@ # Line Plot Grouping -By passing the `groupBy` property an array instead of a single key, the [LinePlot](http://d3plus.org/docs/#LinePlot) class will group lines based on the keys (and order) you pass it in the array. +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 = [ @@ -25,7 +25,8 @@ var myData = [ new d3plus.LinePlot() .config({ data: myData, - groupBy: ["name", "parent"], + depth: 0, + groupBy: ["parent", "name"], x: "year", y: "value" }) diff --git a/example/scatter-plot-grouping.md b/example/scatter-plot-grouping.md index 1b9196a..0717850 100644 --- a/example/scatter-plot-grouping.md +++ b/example/scatter-plot-grouping.md @@ -1,6 +1,6 @@ # Scatter Plot Grouping - With the help of a [Simple X/Y Plot](http://d3plus.org/docs/#Plot), you can group scatter plot by passing the `groupBy` property an array instead of a single key. Based on the keys (and order) you pass it in the array, [ X/Y Plot](http://d3plus.org/docs/#Plot) will group scattered plot. + 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 = [ @@ -15,12 +15,13 @@ var myData = [ new d3plus.Plot() .config({ data: myData, + depth: 0, groupBy: ["group", "name"], - x: "value", - y: "weight", size: "value", + sizeMax: 100, sizeMin: 20, - sizeMax: 100 + x: "value", + y: "weight" }) .render(); ``` \ No newline at end of file From 42ca171445829b183ee3bd9e9bc7747e73364da8 Mon Sep 17 00:00:00 2001 From: Rashmi Date: Fri, 24 May 2019 08:26:26 -0700 Subject: [PATCH 8/8] addresses all PR comments for box-whisker-mode --- example/box-whisker-mode.md | 53 ++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/example/box-whisker-mode.md b/example/box-whisker-mode.md index e5697fd..b2d1012 100644 --- a/example/box-whisker-mode.md +++ b/example/box-whisker-mode.md @@ -1,41 +1,46 @@ # Using a Different Box and Whisker Mode -Mode in a Box and Whisker plot changes the extent of the whiskers. The [BoxWhisker](http://d3plus.org/docs/#BoxWhisker) mode defaults to being `tukey`. - -The mode can be changed by passing `whiskerMode` property to "tukey", "extent" or a percentile number, inside `Box` property of [shapeConfig](http://d3plus.org/docs/#Viz.shapeConfig). +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: 20}, - {id: "alpha", value: 180}, - {id: "alpha", value: 40}, - {id: "alpha", value: 170}, - {id: "alpha", value: 125}, - {id: "alpha", value: 74}, - {id: "alpha", value: 80}, - {id: "beta", value: 180}, - {id: "beta", value: 30}, - {id: "beta", value: 120}, - {id: "beta", value: 50}, - {id: "beta", value: 140}, - {id: "beta", value: 115}, - {id: "beta", value: 14}, - {id: "beta", value: 30}, + {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"], - x: "id", - y: "value", shapeConfig: { - Box: { - whiskerMode: "extent" - } + whiskerMode: "extent" }, - legend: false + x: "id", + y: "value" }) .render(); ``` \ No newline at end of file