[med-svn] [r-cran-scatterd3] 01/03: New upstream version 0.8.1+dfsg
Andreas Tille
tille at debian.org
Thu Jan 5 16:18:14 UTC 2017
This is an automated email from the git hooks/post-receive script.
tille pushed a commit to branch master
in repository r-cran-scatterd3.
commit 652ac63362388b4e3b3048592547d4555f40ffd7
Author: Andreas Tille <tille at debian.org>
Date: Thu Jan 5 16:41:57 2017 +0100
New upstream version 0.8.1+dfsg
---
DESCRIPTION | 8 +-
MD5 | 18 ++---
NEWS | 11 +++
inst/doc/introduction.R | 15 +++-
inst/doc/introduction.Rmd | 22 +++++-
inst/doc/introduction.html | 151 +++++++++++++++++++-----------------
inst/htmlwidgets/scatterD3-axes.js | 14 ++--
inst/htmlwidgets/scatterD3-setup.js | 97 ++++++++++++++++-------
inst/htmlwidgets/scatterD3.js | 44 ++++++-----
vignettes/introduction.Rmd | 22 +++++-
10 files changed, 251 insertions(+), 151 deletions(-)
diff --git a/DESCRIPTION b/DESCRIPTION
index b5da09f..7d4530e 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -1,8 +1,8 @@
Package: scatterD3
Type: Package
Title: D3 JavaScript Scatterplot from R
-Version: 0.8
-Date: 2016-11-18
+Version: 0.8.1
+Date: 2016-12-13
Authors at R: c(
person(
"Julien", "Barnier",
@@ -43,7 +43,7 @@ Imports: htmlwidgets, digest, ellipse
Suggests: knitr, rmarkdown
RoxygenNote: 5.0.1
NeedsCompilation: no
-Packaged: 2016-11-18 10:33:01 UTC; julien
+Packaged: 2016-12-13 15:44:13 UTC; julien
Author: Julien Barnier [aut, cre],
Kent Russell [aut, ctb],
Mike Bostock [aut, cph] (d3.js library, http://d3js.org),
@@ -51,4 +51,4 @@ Author: Julien Barnier [aut, cre],
Speros Kokenes [aut, cph] (d3-lasso-plugin library,
https://github.com/skokenes/D3-Lasso-Plugin)
Repository: CRAN
-Date/Publication: 2016-11-18 12:43:19
+Date/Publication: 2016-12-13 21:24:10
diff --git a/MD5 b/MD5
index 5780f0e..7c42a1a 100644
--- a/MD5
+++ b/MD5
@@ -1,13 +1,13 @@
-cbe9d46eba15a2c9beeb5d888ccdfa1d *DESCRIPTION
+fed0035d5ab9f6ec0f779d55cf4c6254 *DESCRIPTION
6175be66a588675cfcc631efac40bccb *NAMESPACE
-6c9fdb0c6ea9825b433f27bda8bee9e2 *NEWS
+5b7bcff84788e3fac31a6eb718f46edd *NEWS
cceffe7465fc66364cdfb8c78319bcb7 *R/scatterD3-Rd.R
875b76191753b22ff96619a5a28de4f4 *R/scatterD3.R
b3589f000251b12fadfe9afa71c68e81 *README.md
3c5e3d328882205bbbfd78289f64fdd2 *build/vignette.rds
-18138c9193acd2d7e7368066d1e0d16d *inst/doc/introduction.R
-6347e6601d6e70a934431480c698d468 *inst/doc/introduction.Rmd
-0d512c39911af5765a41a9b52ee69292 *inst/doc/introduction.html
+8a7265c47f906ad49b86760e2fa7378b *inst/doc/introduction.R
+c93adc84f7f75787fbfa3a50189791c2 *inst/doc/introduction.Rmd
+e8e0a148086f3b8cd97647080771fdc3 *inst/doc/introduction.html
59827795b5ab14a5edc7e6bf8744cef7 *inst/htmlwidgets/lib/d3-lasso-plugin/LICENSE
95f5a84cb5c61c5abb84da94f8c87b2c *inst/htmlwidgets/lib/d3-lasso-plugin/README.md
ef54456443f8077b51e73565ef195f96 *inst/htmlwidgets/lib/d3-lasso-plugin/lasso.css
@@ -32,7 +32,7 @@ ebd16393d06ae1d06545d20ad28a3536 *inst/htmlwidgets/lib/d3/d3-timer.v1.min.js
9cc1892d4422f3d37583715c9b9b1277 *inst/htmlwidgets/lib/d3/d3-transition.v1.min.js
53a7a6c7509864215bc4b861ab0af01c *inst/htmlwidgets/lib/d3/d3-zoom-patched.min.js
9f5448c9c91f9f199a3e431dc36e3962 *inst/htmlwidgets/scatterD3-arrows.js
-98049707cdc14f18f4111d489618bed6 *inst/htmlwidgets/scatterD3-axes.js
+b732c6f7468ec34087bbabd1a498ef29 *inst/htmlwidgets/scatterD3-axes.js
6109b680c252f86e7388d74cd793e5f2 *inst/htmlwidgets/scatterD3-dots.js
fc0b93862a3ce9472d9b4473cb7775bf *inst/htmlwidgets/scatterD3-ellipses.js
fb5bed0f205bf2e139ffef27db48a869 *inst/htmlwidgets/scatterD3-exports.js
@@ -40,11 +40,11 @@ fb5bed0f205bf2e139ffef27db48a869 *inst/htmlwidgets/scatterD3-exports.js
824f0e4e0ef43e1c66a7130f4a2ee2e5 *inst/htmlwidgets/scatterD3-lasso.js
fcb449b2588e423278ff9a5c6a4f4e30 *inst/htmlwidgets/scatterD3-legend.js
492209fcdc68ca591a15f072432c3071 *inst/htmlwidgets/scatterD3-lines.js
-857a56ed9025052841459ba598b93a78 *inst/htmlwidgets/scatterD3-setup.js
+321b698752332f28d13c86bd158ac12b *inst/htmlwidgets/scatterD3-setup.js
479d82da539716c35e8a17a320136601 *inst/htmlwidgets/scatterD3-utils.js
5911a356340a999932d56c7521fe9ced *inst/htmlwidgets/scatterD3.css
-9c8fd09e6b45b439d2fa668a16267e5e *inst/htmlwidgets/scatterD3.js
+4cf338472604a8db32333a02edcebbb7 *inst/htmlwidgets/scatterD3.js
dee4ef6434928b083890f389fed71af4 *inst/htmlwidgets/scatterD3.yaml
12229f19d7fb5d246373d4a3e633534b *man/scatterD3-shiny.Rd
e2fdc4511a075587b3d253749c4bcd2b *man/scatterD3.Rd
-6347e6601d6e70a934431480c698d468 *vignettes/introduction.Rmd
+c93adc84f7f75787fbfa3a50189791c2 *vignettes/introduction.Rmd
diff --git a/NEWS b/NEWS
index d9be8b0..cce22a0 100644
--- a/NEWS
+++ b/NEWS
@@ -1,3 +1,14 @@
+scatterD3 0.8.1
+------------------------------------------------------
+
+* Bugfix : categorical axes labels shown as NaN (thanks @zji90)
+* Bugfix : plot not centered when fixed = TRUE (thanks @jon-nagra)
+* Bugfix : incorrect plot when only one point (thanks @CUinNYC)
+* Bugfix : xlim and ylim not taken into account when updating chart (thanks @CUinNYC)
+* Bugfix : plot with no data should return an empty plot, not an error
+* Bugfix : tick marks must be put below axes labels
+
+
scatterD3 0.8
------------------------------------------------------
diff --git a/inst/doc/introduction.R b/inst/doc/introduction.R
index e97f73d..f355ea1 100644
--- a/inst/doc/introduction.R
+++ b/inst/doc/introduction.R
@@ -47,8 +47,8 @@ scatterD3(data = mtcars, x = wt, y = mpg, col_var = disp)
scatterD3(data=mtcars, x=mpg, y=wt, opacity_var = drat)
## ----lines---------------------------------------------------------------
-scatterD3(data = mtcars, x = wt, y = mpg, fixed = TRUE,
- lines = data.frame(slope = 1, intercept = 0))
+scatterD3(data = mtcars, x = wt, y = mpg,
+ lines = data.frame(slope = -5.344, intercept = 37.285))
## ----lines_style---------------------------------------------------------
scatterD3(data = mtcars, x = wt, y = mpg,
@@ -116,10 +116,16 @@ scatterD3(data = mtcars, x = wt, y = mpg,
# scatterD3(data = mtcars, x = wt, y = mpg,
# click_callback = "function(id, index) {
# if(id && typeof(Shiny) != 'undefined') {
-# Shiny.onInputChange(id + '_selected', index);
+# Shiny.onInputChange('selected_point', index);
# }
# }")
+## ----click_callback_shiny_ui, eval = FALSE-------------------------------
+# textOutput("click_selected")
+
+## ----click_callback_shiny_server, eval = FALSE---------------------------
+# output$click_selected <- renderText(paste0("Clicked point : ", input$selected_point))
+
## ----zoom_callback-------------------------------------------------------
scatterD3(data = mtcars, x = wt, y = mpg,
zoom_callback = "function(xmin, xmax, ymin, ymax) {
@@ -169,5 +175,6 @@ scatterD3(data = mtcars, x = wt, y = mpg, lab = names)
scatterD3(x = c(1, 0.9, 0.7, 0.2, -0.4, -0.5), xlab = "x",
y = c(1, 0.1, -0.5, 0.5, -0.6, 0.7), ylab = "y",
lab = LETTERS[1:6], type_var = c("point", rep("arrow", 5)),
- unit_circle = TRUE, fixed = TRUE, xlim = c(-1.2, 1.2))
+ unit_circle = TRUE, fixed = TRUE,
+ xlim = c(-1.2, 1.2), ylim = c(-1.2, 1.2))
diff --git a/inst/doc/introduction.Rmd b/inst/doc/introduction.Rmd
index a1aa254..7f393b9 100644
--- a/inst/doc/introduction.Rmd
+++ b/inst/doc/introduction.Rmd
@@ -140,8 +140,8 @@ In addition to your data points, you can add to your scatterplot. This is done v
For example, if you want to add a 1:1 line :
```{r lines}
-scatterD3(data = mtcars, x = wt, y = mpg, fixed = TRUE,
- lines = data.frame(slope = 1, intercept = 0))
+scatterD3(data = mtcars, x = wt, y = mpg,
+ lines = data.frame(slope = -5.344, intercept = 37.285))
```
You can style your lines by adding `stroke`, `stroke_width` and `stroke_dasharray` columns. These columns values will be added as [corresponding styles](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) to the generated SVG line. So if you want a wide dashed red horizontal line :
@@ -278,11 +278,24 @@ One usage can be to pass the index of the clicked point back to Shiny when `scat
scatterD3(data = mtcars, x = wt, y = mpg,
click_callback = "function(id, index) {
if(id && typeof(Shiny) != 'undefined') {
- Shiny.onInputChange(id + '_selected', index);
+ Shiny.onInputChange('selected_point', index);
}
}")
```
+You could then add something like this in your Shiny app `ui` :
+
+```{r click_callback_shiny_ui, eval = FALSE}
+textOutput("click_selected")
+```
+
+And this in `server` :
+
+```{r click_callback_shiny_server, eval = FALSE}
+output$click_selected <- renderText(paste0("Clicked point : ", input$selected_point))
+```
+
+
Thanks to [detule](https://github.com/detule) and [harveyl888](https://github.com/harveyl888) for the code.
Note that `url_var` and `click_callback` cannot be used at the same time.
@@ -398,7 +411,8 @@ Finally, and for more specific use cases, you can represent some points as an ar
scatterD3(x = c(1, 0.9, 0.7, 0.2, -0.4, -0.5), xlab = "x",
y = c(1, 0.1, -0.5, 0.5, -0.6, 0.7), ylab = "y",
lab = LETTERS[1:6], type_var = c("point", rep("arrow", 5)),
- unit_circle = TRUE, fixed = TRUE, xlim = c(-1.2, 1.2))
+ unit_circle = TRUE, fixed = TRUE,
+ xlim = c(-1.2, 1.2), ylim = c(-1.2, 1.2))
```
diff --git a/inst/doc/introduction.html b/inst/doc/introduction.html
index e66cd07..88b71f7 100644
--- a/inst/doc/introduction.html
+++ b/inst/doc/introduction.html
@@ -12,7 +12,7 @@
<meta name="author" content="Julien Barnier" />
-<meta name="date" content="2016-11-18" />
+<meta name="date" content="2016-12-13" />
<title>scatterD3 : a Visual Guide</title>
@@ -38,8 +38,8 @@
<script src="data:application/x-javascript;base64,ZDMubGFzc28gPSBmdW5jdGlvbigpIHsKCiAgICB2YXIgaXRlbXMgPSBudWxsLAogICAgICAgIGNsb3NlUGF0aERpc3RhbmNlID0gNzUsCiAgICAgICAgY2xvc2VQYXRoU2VsZWN0ID0gdHJ1ZSwKICAgICAgICBpc1BhdGhDbG9zZWQgPSBmYWxzZSwKICAgICAgICBob3ZlclNlbGVjdCA9IHRydWUsCiAgICAgICAgcG9pbnRzID0gW10sCiAgICAgICAgYXJlYSA9IG51bGwsCiAgICAgICAgb24gPSB7c3RhcnQ6ZnVuY3Rpb24oKXt9LCBkcmF3OiBmdW5jdGlvbigpe30sIGVuZDogZnVuY3Rpb24oKXt9fTsKCiAgICBmdW5jdGlvbiBsYXNzbyhzZWxlY3Rpb24pIHsKCiAgICAgICAgLy8gdG [...]
<link href="data:text/css;charset=utf-8,%0A%2EscatterD3%2Dtooltip%20%7B%0Aposition%3A%20absolute%3B%0Acolor%3A%20%23222%3B%0Abackground%3A%20%23fff%3B%0Apadding%3A%20%2E5em%3B%0Atext%2Dshadow%3A%20%23f5f5f5%200%201px%200%3B%0Aborder%2Dradius%3A%202px%3B%0Abox%2Dshadow%3A%200px%200px%207px%201px%20%23a6a6a6%3B%0Aopacity%3A%200%2E95%3B%0Afont%2Dfamily%3A%20Open%20Sans%2C%20Droid%20Sans%2C%20Helvetica%2C%20Verdana%2C%20sans%2Dserif%3B%0Afont%2Dsize%3A%2010px%3B%0Az%2Dindex%3A%2010%3B%0A%7D% [...]
<script src="data:application/x-javascript;base64,Ly8gQ2xlYW4gdmFyaWFibGVzIGxldmVscyB0byBiZSB2YWxpZCBDU1MgY2xhc3NlcwpmdW5jdGlvbiBjc3NfY2xlYW4ocykgewogICAgaWYgKHMgPT09IHVuZGVmaW5lZCkgcmV0dXJuICIiOwogICAgcmV0dXJuIHMudG9TdHJpbmcoKS5yZXBsYWNlKC9bXlx3LV0vZywgIl8iKTsKfQoKLy8gRGVmYXVsdCB0cmFuc2xhdGlvbiBmdW5jdGlvbiBmb3IgcG9pbnRzIGFuZCBsYWJlbHMKZnVuY3Rpb24gdHJhbnNsYXRpb24oZCwgc2NhbGVzKSB7CiAgICAgcmV0dXJuICJ0cmFuc2xhdGUoIiArIHNjYWxlcy54KGQueCkgKyAiLCIgKyBzY2FsZXMueShkLnkpICsgIikiOwp9CgovLyBDcmVhdG [...]
-<script src="data:application/x-javascript;base64,Ly8gQ3VzdG9tIGNvbG9yIHNjaGVtZQpmdW5jdGlvbiBjdXN0b21fc2NoZW1lMTAgKCkgewogICAgLy8gc2xpY2UoKSB0byBjcmVhdGUgYSBjb3B5CiAgICB2YXIgc2NoZW1lID0gZDMuc2NoZW1lQ2F0ZWdvcnkxMC5zbGljZSgpOwogICAgLy8gU3dpdGNoIG9yYW5nZSBhbmQgcmVkCiAgICB2YXIJdG1wID0gc2NoZW1lWzNdOwogICAgc2NoZW1lWzNdID0gc2NoZW1lWzFdOwogICAgc2NoZW1lWzFdID0gdG1wOwogICAgcmV0dXJuIHNjaGVtZTsKfQoKLy8gU2V0dXAgZGltZW5zaW9ucwpmdW5jdGlvbiBzZXR1cF9zaXplcyAod2lkdGgsIGhlaWdodCwgc2V0dGluZ3MpIHsKCiAgICB2YX [...]
-<script src="data:application/x-javascript;base64,Ly8gQ3JlYXRlIGFuZCBkcmF3IHggYW5kIHkgYXhlcwpmdW5jdGlvbiBhZGRfYXhlcyhzZWxlY3Rpb24sIGRpbXMsIHNldHRpbmdzLCBzY2FsZXMpIHsKCiAgICAvLyB4IGF4aXMKICAgIHNlbGVjdGlvbi5hcHBlbmQoImciKQogICAgICAgIC5hdHRyKCJjbGFzcyIsICJ4IGF4aXMiKQogICAgICAgIC5hdHRyKCJ0cmFuc2Zvcm0iLCAidHJhbnNsYXRlKDAsIiArIGRpbXMuaGVpZ2h0ICsgIikiKQogICAgICAgIC5zdHlsZSgiZm9udC1zaXplIiwgc2V0dGluZ3MuYXhlc19mb250X3NpemUpCiAgICAgICAgLmNhbGwoc2NhbGVzLnhBeGlzKTsKCiAgICBzZWxlY3Rpb24uYXBwZW5kKCJ0ZX [...]
+<script src="data:application/x-javascript;base64,Ly8gQ3VzdG9tIGNvbG9yIHNjaGVtZQpmdW5jdGlvbiBjdXN0b21fc2NoZW1lMTAgKCkgewogICAgLy8gc2xpY2UoKSB0byBjcmVhdGUgYSBjb3B5CiAgICB2YXIgc2NoZW1lID0gZDMuc2NoZW1lQ2F0ZWdvcnkxMC5zbGljZSgpOwogICAgLy8gU3dpdGNoIG9yYW5nZSBhbmQgcmVkCiAgICB2YXIJdG1wID0gc2NoZW1lWzNdOwogICAgc2NoZW1lWzNdID0gc2NoZW1lWzFdOwogICAgc2NoZW1lWzFdID0gdG1wOwogICAgcmV0dXJuIHNjaGVtZTsKfQoKLy8gU2V0dXAgZGltZW5zaW9ucwpmdW5jdGlvbiBzZXR1cF9zaXplcyAod2lkdGgsIGhlaWdodCwgc2V0dGluZ3MpIHsKCiAgICB2YX [...]
+<script src="data:application/x-javascript;base64,Ly8gQ3JlYXRlIGFuZCBkcmF3IHggYW5kIHkgYXhlcwpmdW5jdGlvbiBhZGRfYXhlcyhzZWxlY3Rpb24sIGRpbXMsIHNldHRpbmdzLCBzY2FsZXMpIHsKCiAgICAvLyB4IGF4aXMKICAgIHNlbGVjdGlvbi5hcHBlbmQoImciKQogICAgICAgIC5hdHRyKCJjbGFzcyIsICJ4IGF4aXMiKQogICAgICAgIC5hdHRyKCJ0cmFuc2Zvcm0iLCAidHJhbnNsYXRlKDAsIiArIGRpbXMuaGVpZ2h0ICsgIikiKQogICAgICAgIC5zdHlsZSgiZm9udC1zaXplIiwgc2V0dGluZ3MuYXhlc19mb250X3NpemUpCiAgICAgICAgLmNhbGwoc2NhbGVzLnhBeGlzKTsKCiAgICAvLyB5IGF4aXMKICAgIHNlbGVjdG [...]
<script src="data:application/x-javascript;base64,Ly8gUmV0dXJucyBkb3Qgc2l6ZSBmcm9tIGFzc29jaWF0ZWQgZGF0YQpmdW5jdGlvbiBkb3Rfc2l6ZShkYXRhLCBzZXR0aW5ncywgc2NhbGVzKSB7CiAgICB2YXIgc2l6ZSA9IHNldHRpbmdzLnBvaW50X3NpemU7CiAgICBpZiAoc2V0dGluZ3MuaGFzX3NpemVfdmFyKSB7IHNpemUgPSBzY2FsZXMuc2l6ZShkYXRhLnNpemVfdmFyKTsgfQogICAgcmV0dXJuKHNpemUpOwp9CgovLyBJbml0aWFsIGRvdCBhdHRyaWJ1dGVzCmZ1bmN0aW9uIGRvdF9pbml0IChzZWxlY3Rpb24sIHNldHRpbmdzLCBzY2FsZXMpIHsKICAgIC8vIHRvb2x0aXBzIHdoZW4gaG92ZXJpbmcgcG9pbnRzCiAgICB2YX [...]
<script src="data:application/x-javascript;base64,CmZ1bmN0aW9uIGFkZF9hcnJvd3NfZGVmcyhzdmcsIHNldHRpbmdzLCBzY2FsZXMpIHsKICAgIC8vIDxkZWZzPgogICAgdmFyIGRlZnMgPSBzdmcuYXBwZW5kKCJkZWZzIik7CiAgICAvLyBhcnJvdyBoZWFkIG1hcmtlcnMKICAgIHNjYWxlcy5jb2xvci5yYW5nZSgpLmZvckVhY2goZnVuY3Rpb24oZCkgewogICAgICAgIGRlZnMuYXBwZW5kKCJtYXJrZXIiKQoJICAgIC5hdHRyKCJpZCIsICJhcnJvdy1oZWFkLSIgKyBzZXR0aW5ncy5odG1sX2lkICsgIi0iICsgZCkKCSAgICAuYXR0cigibWFya2VyV2lkdGgiLCAiMTAiKQoJICAgIC5hdHRyKCJtYXJrZXJIZWlnaHQiLCAiMTAiKQoJIC [...]
<script src="data:application/x-javascript;base64,Ci8vIEluaXRpYWwgdGV4dCBsYWJlbCBhdHRyaWJ1dGVzCmZ1bmN0aW9uIGxhYmVsX2luaXQgKHNlbGVjdGlvbikgewogICAgc2VsZWN0aW9uCiAgICAgICAgLmF0dHIoInRleHQtYW5jaG9yIiwgIm1pZGRsZSIpOwp9CgovLyBDb21wdXRlIGRlZmF1bHQgdmVydGljYWwgb2Zmc2V0IGZvciBsYWJlbHMKZnVuY3Rpb24gZGVmYXVsdF9sYWJlbF9keShzaXplLCB5LCB0eXBlX3ZhcixzZXR0aW5ncykgewogICAgaWYgKHkgPCAwICYmIHR5cGVfdmFyICE9PSB1bmRlZmluZWQgJiYgdHlwZV92YXIgPT0gImFycm93IikgewogICAgICAgIHJldHVybiAoTWF0aC5zcXJ0KHNpemUpIC8gMikgKy [...]
@@ -48,7 +48,7 @@
<script src="data:application/x-javascript;base64,Ly8gRm9ybWF0IGxlZ2VuZCBsYWJlbApmdW5jdGlvbiBsZWdlbmRfbGFiZWxfZm9ybWF0dGluZyAoc2VsZWN0aW9uKSB7CiAgICBzZWxlY3Rpb24KICAgICAgICAuc3R5bGUoInRleHQtYW5jaG9yIiwgImJlZ2lubmluZyIpCiAgICAgICAgLnN0eWxlKCJmaWxsIiwgIiMwMDAiKQogICAgICAgIC5zdHlsZSgiZm9udC13ZWlnaHQiLCAiYm9sZCIpOwp9CgovLyBDcmVhdGUgY29sb3IgbGVnZW5kCmZ1bmN0aW9uIGFkZF9jb2xvcl9sZWdlbmQoc3ZnLCBkaW1zLCBzZXR0aW5ncywgc2NhbGVzLCBkdXJhdGlvbikgewoKICAgIC8vIERlZmF1bHQgdHJhbnNpdGlvbiBkdXJhdGlvbiB0byAwCi [...]
<script src="data:application/x-javascript;base64,Ly8gTGFzc28gZnVuY3Rpb25zIHRvIGV4ZWN1dGUgd2hpbGUgbGFzc29pbmcKdmFyIGxhc3NvX3N0YXJ0ID0gZnVuY3Rpb24obGFzc28pIHsKICAgIGxhc3NvLml0ZW1zKCkKICAgICAgICAuZWFjaChmdW5jdGlvbihkKXsKCSAgICBpZiAoZDMuc2VsZWN0KHRoaXMpLmNsYXNzZWQoJ2RvdCcpKSB7CiAgICAgICAgICAgICAgICBkLnNjYXR0ZXJEM19sYXNzb19kb3Rfc3Ryb2tlID0gZC5zY2F0dGVyRDNfbGFzc29fZG90X3N0cm9rZSA/IGQuc2NhdHRlckQzX2xhc3NvX2RvdF9zdHJva2UgOiBkMy5zZWxlY3QodGhpcykuc3R5bGUoInN0cm9rZSIpOwogICAgICAgICAgICAgICAgZC5zY2 [...]
<script src="data:application/x-javascript;base64,Ly8gRXhwb3J0IHRvIFNWRyBmdW5jdGlvbgpmdW5jdGlvbiBleHBvcnRfc3ZnKHNlbCwgc3ZnLCBzZXR0aW5ncykgewogICAgdmFyIHN2Z19jb250ZW50ID0gc3ZnCiAgICAgICAgLmF0dHIoInhtbG5zIiwgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIikKICAgICAgICAuYXR0cigidmVyc2lvbiIsIDEuMSkKICAgICAgICAubm9kZSgpLnBhcmVudE5vZGUuaW5uZXJIVE1MOwogICAgLy8gRGlydHkgZGlydHkgZGlydHkuLi4KICAgIHN2Z19jb250ZW50ID0gc3ZnX2NvbnRlbnQucmVwbGFjZSgvPGcgY2xhc3M9ImdlYXItbWVudVtcc1xTXSo/PFwvZz4vLCAnJyk7CiAgICBzdmdfY2 [...]
-<script src="data:application/x-javascript;base64,ZnVuY3Rpb24gc2NhdHRlckQzKCkgewoKICAgIHZhciB3aWR0aCA9IDYwMCwgLy8gZGVmYXVsdCB3aWR0aAoJaGVpZ2h0ID0gNjAwLCAvLyBkZWZhdWx0IGhlaWdodAoJZGltcyA9IHt9LAoJc2V0dGluZ3MgPSB7fSwKCXNjYWxlcyA9IHt9LAoJZGF0YSA9IFtdLAoJc3ZnLAoJem9vbSwgZHJhZzsKICAgIAogICAgLy8gWm9vbSBiZWhhdmlvcgogICAgem9vbSA9IGQzLnpvb20oKQogICAgICAgIC5zY2FsZUV4dGVudChbMCwgMzJdKQogICAgICAgIC5vbigiem9vbSIsIHpvb21lZCk7CiAgICAKICAgIC8vIFpvb20gZnVuY3Rpb24KICAgIGZ1bmN0aW9uIHpvb21lZChyZXNldCkgewoJdm [...]
+<script src="data:application/x-javascript;base64,ZnVuY3Rpb24gc2NhdHRlckQzKCkgewoKICAgIHZhciB3aWR0aCA9IDYwMCwgLy8gZGVmYXVsdCB3aWR0aAoJaGVpZ2h0ID0gNjAwLCAvLyBkZWZhdWx0IGhlaWdodAoJZGltcyA9IHt9LAoJc2V0dGluZ3MgPSB7fSwKCXNjYWxlcyA9IHt9LAoJZGF0YSA9IFtdLAoJc3ZnLAoJem9vbSwgZHJhZzsKCiAgICAvLyBab29tIGJlaGF2aW9yCiAgICB6b29tID0gZDMuem9vbSgpCiAgICAgICAgLnNjYWxlRXh0ZW50KFswLCAzMl0pCiAgICAgICAgLm9uKCJ6b29tIiwgem9vbWVkKTsKCiAgICAvLyBab29tIGZ1bmN0aW9uCiAgICBmdW5jdGlvbiB6b29tZWQocmVzZXQpIHsKCXZhciByb290ID [...]
<style type="text/css">code{white-space: pre;}</style>
@@ -103,7 +103,7 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<h1 class="title toc-ignore">scatterD3 : a Visual Guide</h1>
<h4 class="author"><em>Julien Barnier</em></h4>
-<h4 class="date"><em>2016-11-18</em></h4>
+<h4 class="date"><em>2016-12-13</em></h4>
<div id="TOC">
@@ -141,8 +141,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="kw">scatterD3</span>(<span class="dt">x =</span> mtcars$wt, <span class="dt">y =</span> mtcars$mpg)</code></pre></div>
<p>You can pass data arguments as vectors, like above, but you can also give a data frame as <code>data</code> argument and then provide variable names which will be evaluated inside this data frame :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars , <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg)</code></pre></div>
-<div id="htmlwidget-703b8c0f3ab2d110741f" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-703b8c0f3ab2d110741f">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-df75a888bc0ba1ac7367" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-df75a888bc0ba1ac7367">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>This will display a simple visualization with the given variables as <code>x</code> and <code>y</code> axis. There are several interactive features directly available :</p>
<ul>
<li>you can zoom in and out with the mouse wheel while the mouse cursor is on the plot</li>
@@ -153,72 +153,72 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg,
<span class="dt">point_size =</span> <span class="dv">35</span>, <span class="dt">point_opacity =</span> <span class="fl">0.5</span>, <span class="dt">fixed =</span> <span class="ot">TRUE</span>,
<span class="dt">colors =</span> <span class="st">"#A94175"</span>)</code></pre></div>
-<div id="htmlwidget-a2c888a4ffcdb19fe8a2" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-a2c888a4ffcdb19fe8a2">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-ecf63d71796ba68cdda5" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-ecf63d71796ba68cdda5">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>You can change size and opacity of points when hovering with the <code>hover_size</code> and <code>hover_opacity</code> settings :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg,
<span class="dt">point_size =</span> <span class="dv">100</span>, <span class="dt">point_opacity =</span> <span class="fl">0.5</span>,
<span class="dt">hover_size =</span> <span class="dv">4</span>, <span class="dt">hover_opacity =</span> <span class="dv">1</span>)</code></pre></div>
-<div id="htmlwidget-6c204a10a4e6388428e6" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-6c204a10a4e6388428e6">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-bd8de9d2507c80ce6c1d" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-bd8de9d2507c80ce6c1d">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
</div>
<div id="categorical-x-and-y" class="section level2">
<h2>Categorical <code>x</code> and <code>y</code></h2>
<p>If the <code>x</code> or <code>y</code> variable is not numeric or is a factor, then an ordinal scale is used for the corresponding axis. Note that zooming is then not possible along this axis.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">mtcars$cyl_fac <-<span class="st"> </span><span class="kw">paste</span>(mtcars$cyl, <span class="st">"cylinders"</span>)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> cyl_fac, <span class="dt">y =</span> mpg)</code></pre></div>
-<div id="htmlwidget-e1465ff6a39f8ef8fa03" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-e1465ff6a39f8ef8fa03">{"x":{"data":{"x":["6 cylinders","6 cylinders","4 cylinders","6 cylinders","8 cylinders","6 cylinders","8 cylinders","4 cylinders","4 cylinders","6 cylinders","6 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","4 cylinders","4 cylinders","4 cylinders","4 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","4 cylinders","4 cylinders","4 cylinders","8 cyl [...]
+<div id="htmlwidget-525eb05c089721e4b109" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-525eb05c089721e4b109">{"x":{"data":{"x":["6 cylinders","6 cylinders","4 cylinders","6 cylinders","8 cylinders","6 cylinders","8 cylinders","4 cylinders","4 cylinders","6 cylinders","6 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","4 cylinders","4 cylinders","4 cylinders","4 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","4 cylinders","4 cylinders","4 cylinders","8 cyl [...]
<p>You can use the <code>left_margin</code> argument when using a categorical <code>y</code> variable if the axis labels are not entirely visible :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> cyl_fac, <span class="dt">left_margin =</span> <span class="dv">80</span>)</code></pre></div>
-<div id="htmlwidget-e88238fb16bfc947768b" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-e88238fb16bfc947768b">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":["6 cylinders","6 cylinders","4 cylinders","6 cylinders","8 cylinders","6 cylinders","8 cylinders","4 cylinders","4 cylinders","6 cylinders","6 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders [...]
+<div id="htmlwidget-829387576c250f6a968b" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-829387576c250f6a968b">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":["6 cylinders","6 cylinders","4 cylinders","6 cylinders","8 cylinders","6 cylinders","8 cylinders","4 cylinders","4 cylinders","6 cylinders","6 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders","8 cylinders [...]
</div>
<div id="point-labels" class="section level2">
<h2>Point labels</h2>
<p>You can add text labels to the points by passing a character vector to the <code>lab</code> parameter. Labels size are controlled by the <code>labels_size</code> parameter.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">mtcars$names <-<span class="st"> </span><span class="kw">rownames</span>(mtcars)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names, <span class="dt">labels_size =</span> <span class="dv">9</span>)</code></pre></div>
-<div id="htmlwidget-bff9f98b87a1119d24eb" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-bff9f98b87a1119d24eb">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
+<div id="htmlwidget-4ea5b2f78c3cdf43d9e2" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-4ea5b2f78c3cdf43d9e2">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
<p>Note that text labels are fully movable : click and drag a label with your mouse to place it where you want. Custom positions are preserved while zooming/panning.</p>
</div>
<div id="mapping-colors-symbols-size-and-opacity-to-variables" class="section level2">
<h2>Mapping colors, symbols, size and opacity to variables</h2>
<p>By passing vectors to the <code>col_var</code> and/or <code>symbol_var</code> arguments, you can map points colors and symbols to other variables.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl, <span class="dt">symbol_var =</span> gear)</code></pre></div>
-<div id="htmlwidget-701852bd55373d6ce33d" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-701852bd55373d6ce33d">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-d7930c7f1576534b42cc" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-d7930c7f1576534b42cc">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>A legend is then automatically added. You can manually specify its width with the <code>legend_width</code> argument. Use <code>legend_width = 0</code> to disable it entirely.</p>
<p>Note that when hovering over a legend item with your mouse, the corresponding points are highlighted. Also note that the mapped variables values are automatically added to the default tooltips.</p>
<p>You can also map symbol sizes with a variable with the <code>size_var</code> argument. <code>size_range</code> allows to customize the sizes range :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl, <span class="dt">size_var =</span> hp,
<span class="dt">size_range =</span> <span class="kw">c</span>(<span class="dv">10</span>,<span class="dv">1000</span>), <span class="dt">point_opacity =</span> <span class="fl">0.7</span>)</code></pre></div>
-<div id="htmlwidget-97368a497d84738b1cad" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-97368a497d84738b1cad">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-35ad2d145bf0bb7ecdbb" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-35ad2d145bf0bb7ecdbb">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>You can specify custom colors by passing a vector of hexadecimal strings to the <code>colors</code> argument. If the vector is named, then the colors will be associated with their names within <code>col_var</code>.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">colors =</span> <span class="kw">c</span>(<span class="st">"4"</span> =<span class="st"> "#ECD078"</span>, <span class="st">"8"</span> =<span class="st"> "#C02942"</span>, <span class="st">"6"</span> =<span class="st"> "#53777A"</span>))</code></pre></div>
-<div id="htmlwidget-fc4c30d2b1e3d0df5824" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-fc4c30d2b1e3d0df5824">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-4dfb17f300475a164bd4" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-4dfb17f300475a164bd4">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>If <code>col_var</code> is numeric, not a factor, and has more than 6 unique values, it is considered as continuous, and drawn accordingly using the Veridis d3 interpolator.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> disp)</code></pre></div>
-<div id="htmlwidget-2832b7d85c279436b4b0" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-2832b7d85c279436b4b0">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8, [...]
+<div id="htmlwidget-d55e021148cf0d677101" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-d55e021148cf0d677101">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8, [...]
<p>In this case, any <code>colors</code> argument is ignored. You can force <code>col_var</code> to be considered as continuous with <code>col_continuous = TRUE</code>.</p>
<p>You can also use the <code>opacity_var</code> argument to map point opacity to a variable. Note that for now no legend for opacity is added, though.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data=</span>mtcars, <span class="dt">x=</span>mpg, <span class="dt">y=</span>wt, <span class="dt">opacity_var =</span> drat)</code></pre></div>
-<div id="htmlwidget-efc8a6eda2768c89be5d" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-efc8a6eda2768c89be5d">{"x":{"data":{"x":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"y":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"opacity_var":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3 [...]
+<div id="htmlwidget-68311d47caed46a28410" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-68311d47caed46a28410">{"x":{"data":{"x":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"y":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"opacity_var":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3 [...]
</div>
<div id="adding-lines" class="section level2">
<h2>Adding lines</h2>
<p>In addition to your data points, you can add to your scatterplot. This is done vy passing a <em>data frame</em> to the <code>lines</code> argument. This <em>data frame</em> must have at least two columns called <code>slope</code> and <code>intercept</code>, and as many rows as lines you want to draw.</p>
<p>For example, if you want to add a 1:1 line :</p>
-<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">fixed =</span> <span class="ot">TRUE</span>,
- <span class="dt">lines =</span> <span class="kw">data.frame</span>(<span class="dt">slope =</span> <span class="dv">1</span>, <span class="dt">intercept =</span> <span class="dv">0</span>))</code></pre></div>
-<div id="htmlwidget-382d4d4e5a0c044e2c57" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-382d4d4e5a0c044e2c57">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg,
+ <span class="dt">lines =</span> <span class="kw">data.frame</span>(<span class="dt">slope =</span> -<span class="fl">5.344</span>, <span class="dt">intercept =</span> <span class="fl">37.285</span>))</code></pre></div>
+<div id="htmlwidget-7611de2da543a9c44ede" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-7611de2da543a9c44ede">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>You can style your lines by adding <code>stroke</code>, <code>stroke_width</code> and <code>stroke_dasharray</code> columns. These columns values will be added as <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes">corresponding styles</a> to the generated SVG line. So if you want a wide dashed red horizontal line :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg,
<span class="dt">lines =</span> <span class="kw">data.frame</span>(<span class="dt">slope =</span> <span class="dv">0</span>,
@@ -226,8 +226,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="dt">stroke =</span> <span class="st">"red"</span>,
<span class="dt">stroke_width =</span> <span class="dv">5</span>,
<span class="dt">stroke_dasharray =</span> <span class="st">"10,5"</span>))</code></pre></div>
-<div id="htmlwidget-70fb569e8ff52e0c1dd0" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-70fb569e8ff52e0c1dd0">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-457d8e8e0878db11018b" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-457d8e8e0878db11018b">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>If you want to draw a vertical line, pass the <code>Inf</code> value to <code>slope</code>. The value of <code>intercept</code> is then interpreted as the intercept along the x axis.</p>
<p>By default, if no <code>lines</code> argument is provided two dashed horizontal and vertical lines are drawn through the origin, which is equivalent to :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">fixed =</span> <span class="ot">TRUE</span>,
@@ -236,39 +236,39 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="dt">stroke =</span> <span class="st">"#000"</span>,
<span class="dt">stroke_width =</span> <span class="dv">1</span>,
<span class="dt">stroke_dasharray =</span> <span class="dv">5</span>))</code></pre></div>
-<div id="htmlwidget-cace3a8a9e346c939f27" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-cace3a8a9e346c939f27">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-77265a195ec16e3d78dd" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-77265a195ec16e3d78dd">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
</div>
<div id="scales-axes-and-legend" class="section level2">
<h2>Scales, axes and legend</h2>
<p>The <code>x_log</code> and <code>y_log</code> arguments allow to use logarithmic scales on the <code>x</code> and <code>y</code> values. Note that there must not be any value inferior or equal to zero in this case :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">x_log =</span> <span class="ot">TRUE</span>, <span class="dt">y_log =</span> <span class="ot">TRUE</span>)</code></pre></div>
-<div id="htmlwidget-bed2281d0713c82c5742" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-bed2281d0713c82c5742">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-dbb9468c2a9cf31f17b8" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-dbb9468c2a9cf31f17b8">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>You can manually specify the <code>x</code> or <code>y</code> axis limits with the <code>xlim</code> and <code>ylim</code> arguments :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">xlim=</span><span class="kw">c</span>(<span class="dv">0</span>,<span class="dv">10</span>), <span class="dt">ylim=</span><span class="kw">c</span>(<span class="dv">10</span>,<span class="dv">35</span>))</code></pre></div>
-<div id="htmlwidget-efbf38ce11a5891892cc" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-efbf38ce11a5891892cc">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-ccc0d0021f78117ee178" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-ccc0d0021f78117ee178">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>You can customize the value of the axes and legend labels with <code>xlab</code>, <code>ylab</code>, <code>col_lab</code>, <code>symbol_lab</code> and <code>size_lab</code> :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl, <span class="dt">symbol_var =</span> gear,
<span class="dt">xlab =</span> <span class="st">"Weight"</span>, <span class="dt">ylab =</span> <span class="st">"Mpg"</span>, <span class="dt">col_lab =</span> <span class="st">"Cylinders"</span>, <span class="dt">symbol_lab =</span> <span class="st">"Gears"</span>)</code></pre></div>
-<div id="htmlwidget-cf4b71ae4f00208f5986" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-cf4b71ae4f00208f5986">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-b544e312b6c6a7f25626" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-b544e312b6c6a7f25626">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>Note that default tooltips are updated accordingly.</p>
<p>You can also change the font size of axes and legend text with <code>axes_font_size</code> and <code>legend_font_size</code> :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">xlab =</span> <span class="st">"Weight"</span>, <span class="dt">ylab =</span> <span class="st">"Mpg"</span>,
<span class="dt">axes_font_size =</span> <span class="st">"120%"</span>,
<span class="dt">legend_font_size =</span> <span class="st">"14px"</span>)</code></pre></div>
-<div id="htmlwidget-ef8d768421281db44a6d" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-ef8d768421281db44a6d">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-f3076e99d2084de0ece7" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-f3076e99d2084de0ece7">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>You can provide any CSS compatible value, wether a fixed size such as <code>2em</code> or a relative one like <code>95%</code>.</p>
<p>If the left plot margin is not big enough and your y axis labels are truncated, you can adjust it with the <code>left_margin</code> argument :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">left_margin =</span> <span class="dv">80</span>)</code></pre></div>
-<div id="htmlwidget-2d22ca7cb8501a5a3fcc" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-2d22ca7cb8501a5a3fcc">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-ad416860ad59503b9489" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-ad416860ad59503b9489">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
</div>
<div id="caption" class="section level2">
<h2>Caption</h2>
@@ -276,15 +276,15 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<p>To do so, use the <code>caption</code> argument with either a single character string :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">caption =</span> <span class="st">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam egestas pretium. Donec auctor semper vestibulum. Phasellus in tempor lacus. Maecenas vehicula, ipsum id malesuada placerat, diam lorem aliquet lectus, non lacinia quam leo quis eros."</span>)</code></pre></div>
-<div id="htmlwidget-14d479001160a55a66c3" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-14d479001160a55a66c3">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-8000efafd8b66cf51a42" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-8000efafd8b66cf51a42">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>Or a list with the <code>title</code>, <code>subtitle</code> and <code>text</code> elements :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl,
<span class="dt">caption =</span> <span class="kw">list</span>(<span class="dt">title =</span> <span class="st">"Caption title"</span>,
<span class="dt">subtitle =</span> <span class="st">"Caption subtitle"</span>,
<span class="dt">text =</span> <span class="st">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam egestas pretium. Donec auctor semper vestibulum. Phasellus in tempor lacus. Maecenas vehicula, ipsum id malesuada placerat, diam lorem aliquet lectus, non lacinia quam leo quis eros."</span>))</code></pre></div>
-<div id="htmlwidget-5ac0603af9d0416b4c57" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-5ac0603af9d0416b4c57">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-4fe6000b289c5c26f9e7" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-4fe6000b289c5c26f9e7">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
</div>
<div id="custom-tooltips" class="section level2">
<h2>Custom tooltips</h2>
@@ -292,8 +292,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">tooltips <-<span class="st"> </span><span class="kw">paste</span>(<span class="st">"This is an incredible <strong>"</span>, <span class="kw">rownames</span>(mtcars),<span class="st">"</strong><br />with "</span>,
mtcars$cyl, <span class="st">"cylinders !"</span>)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">tooltip_text =</span> tooltips)</code></pre></div>
-<div id="htmlwidget-678f7ac0cffe7f804b13" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-678f7ac0cffe7f804b13">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-4b014fb9cdb0f68124fe" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-4b014fb9cdb0f68124fe">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>You can also disable tooltips entirely with <code>tooltips = FALSE</code>.</p>
</div>
<div id="open-urls-when-clicking-points" class="section level2">
@@ -301,8 +301,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<p>With the <code>url_var</code> argument, you can specify a character vectors of URLs, associated to each point, and which will be opened when the point is clicked.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">mtcars$urls <-<span class="st"> </span><span class="kw">paste0</span>(<span class="st">"https://www.duckduckgo.com/?q="</span>, <span class="kw">rownames</span>(mtcars))
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names, <span class="dt">url_var =</span> urls)</code></pre></div>
-<div id="htmlwidget-624045b2ee6edd9b3f39" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-624045b2ee6edd9b3f39">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
+<div id="htmlwidget-684977ad094bc554e8af" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-684977ad094bc554e8af">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
<p>Note that this won’t work inside RStudio’s internal browser.</p>
</div>
<div id="javascript-callback-on-clicking-point" class="section level2">
@@ -312,15 +312,19 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="dt">click_callback =</span> <span class="st">"function(id, index) {</span>
<span class="st"> alert('scatterplot ID: ' + id + ' - Point index: ' + index) </span>
<span class="st"> }"</span>)</code></pre></div>
-<div id="htmlwidget-3293443cb5ee9b5f3b70" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-3293443cb5ee9b5f3b70">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-32e6b5f36af524d0984f" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-32e6b5f36af524d0984f">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>One usage can be to pass the index of the clicked point back to Shiny when <code>scatterD3</code> is run inside a Shiny app. The following implementation can do it by using <code>Shiny.onInputChange()</code> :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg,
<span class="dt">click_callback =</span> <span class="st">"function(id, index) {</span>
<span class="st"> if(id && typeof(Shiny) != 'undefined') {</span>
-<span class="st"> Shiny.onInputChange(id + '_selected', index);</span>
+<span class="st"> Shiny.onInputChange('selected_point', index);</span>
<span class="st"> }</span>
<span class="st">}"</span>)</code></pre></div>
+<p>You could then add something like this in your Shiny app <code>ui</code> :</p>
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">textOutput</span>(<span class="st">"click_selected"</span>)</code></pre></div>
+<p>And this in <code>server</code> :</p>
+<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">output$click_selected <-<span class="st"> </span><span class="kw">renderText</span>(<span class="kw">paste0</span>(<span class="st">"Clicked point : "</span>, input$selected_point))</code></pre></div>
<p>Thanks to <a href="https://github.com/detule">detule</a> and <a href="https://github.com/harveyl888">harveyl888</a> for the code.</p>
<p>Note that <code>url_var</code> and <code>click_callback</code> cannot be used at the same time.</p>
</div>
@@ -332,8 +336,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="st"> var zoom = '<strong>Zoom</strong><br />xmin = ' + xmin + '<br />xmax = ' + xmax + '<br />ymin = ' + ymin + '<br />ymax = ' + ymax;</span>
<span class="st"> document.getElementById('zoomExample').innerHTML = zoom;</span>
<span class="st"> }"</span>)</code></pre></div>
-<div id="htmlwidget-7d47ad3906918ae86d13" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-7d47ad3906918ae86d13">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-89b5c98bde274534c8fb" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-89b5c98bde274534c8fb">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<div id="zoomExample" style="font-size: 80%; background-color: #F9F9F9; padding: 5px; margin-left: 5em; width: 15em;">
<strong>Zoom</strong><br /> None yet !
</div>
@@ -342,12 +346,12 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<h2>Confidence ellipses</h2>
<p>You can draw a confidence ellipse around the points :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">ellipses =</span> <span class="ot">TRUE</span>)</code></pre></div>
-<div id="htmlwidget-d61fdbcf145e479605a9" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-d61fdbcf145e479605a9">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-6ca7733f0e152125f989" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-6ca7733f0e152125f989">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
<p>Or around the different groups of points defined by <code>col_var</code> :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">col_var =</span> cyl, <span class="dt">ellipses =</span> <span class="ot">TRUE</span>)</code></pre></div>
-<div id="htmlwidget-008a8f724ef0cb4b645e" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-008a8f724ef0cb4b645e">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
+<div id="htmlwidget-eb54d4131013ec2a73d1" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-eb54d4131013ec2a73d1">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"col_var":["6","6","4","6","8","6","8","4","4","6","6","8","8","8","8 [...]
<p>Ellipses are computed by the <code>ellipse.default()</code> function of the <a href="https://cran.r-project.org/package=ellipse">ellipse package</a>. The confidence level can be changed with the <code>ellipse_level</code> argument (<code>0.95</code> by default).</p>
</div>
<div id="gear-menu" class="section level2">
@@ -355,16 +359,16 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<p>The “gear menu” is a small menu which can be displayed by clicking on the “gear” icon on the top-right corner of the plot. It allows to reset the zoom, export the current graph to SVG, and toggle lasso selection.</p>
<p>It is displayed by default, but you can hide it with the <code>menu = FALSE</code> argument.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">menu =</span> <span class="ot">FALSE</span>)</code></pre></div>
-<div id="htmlwidget-f6c733693a185c0d1880" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-f6c733693a185c0d1880">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
+<div id="htmlwidget-dd17cd46a51e54bfc5aa" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-dd17cd46a51e54bfc5aa">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"key_var":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,2 [...]
</div>
<div id="lasso-selection-tool" class="section level2">
<h2>Lasso selection tool</h2>
<p>Thanks to the <a href="https://github.com/skokenes/D3-Lasso-Plugin">d3-lasso-plugin</a> integration made by @<a href="https://github.com/timelyportfolio">timelyportfolio</a>, you can select and highlight points with a lasso selection tool. To activate it, just add a <code>lasso = TRUE</code> argument. The tool is used by shift-clicking and dragging on the plot area (if it doesn’t activate, click on the chart first to give it focus).</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">mtcars$names <-<span class="st"> </span><span class="kw">rownames</span>(mtcars)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names, <span class="dt">lasso =</span> <span class="ot">TRUE</span>)</code></pre></div>
-<div id="htmlwidget-0d8b54aafffc2e6ab4e9" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-0d8b54aafffc2e6ab4e9">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
+<div id="htmlwidget-0a21c41eb7cfd3ce4727" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-0a21c41eb7cfd3ce4727">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
<p>To undo the selection, just shift-click again.</p>
<p>You can specify a custom JavaScript callback function to be called by passing it to the <code>lasso_callback</code> argument as a character string. This function should accept a <code>sel</code> argument, which is a d3 selection of selected points.</p>
<p>Here is an example which shows an alert with selected point labels :</p>
@@ -373,8 +377,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names,
<span class="dt">lasso =</span> <span class="ot">TRUE</span>,
<span class="dt">lasso_callback =</span> <span class="st">"function(sel) {alert(sel.data().map(function(d) {return d.lab}).join('</span><span class="ch">\\</span><span class="st">n'));}"</span>)</code></pre></div>
-<div id="htmlwidget-5ad89f6202ef238f828f" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-5ad89f6202ef238f828f">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
+<div id="htmlwidget-d43f02205ba5a62cf045" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-d43f02205ba5a62cf045">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
</div>
<div id="custom-labels-positions-export" class="section level2">
<h2>Custom labels positions export</h2>
@@ -382,8 +386,8 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<p>For example, if you change the labels placement in the following plot :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">mtcars$names <-<span class="st"> </span><span class="kw">rownames</span>(mtcars)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names)</code></pre></div>
-<div id="htmlwidget-d57bdca4683ec0dba857" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-d57bdca4683ec0dba857">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
+<div id="htmlwidget-245ced4c9c2623cbdb7c" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-245ced4c9c2623cbdb7c">{"x":{"data":{"x":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"y":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"lab":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hor [...]
<p>You can then open the menu and select <em>Export labels positions</em> to save them into a CSV file. If you want to reuse these positions, you can use the <code>labels_positions</code> argument from <code>scatterD3</code> :</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">labels <-<span class="st"> </span><span class="kw">read.csv</span>(<span class="st">"scatterD3_labels.csv"</span>)
<span class="kw">scatterD3</span>(<span class="dt">data =</span> mtcars, <span class="dt">x =</span> wt, <span class="dt">y =</span> mpg, <span class="dt">lab =</span> names, <span class="dt">labels_positions =</span> labels)</code></pre></div>
@@ -403,9 +407,10 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">scatterD3</span>(<span class="dt">x =</span> <span class="kw">c</span>(<span class="dv">1</span>, <span class="fl">0.9</span>, <span class="fl">0.7</span>, <span class="fl">0.2</span>, -<span class="fl">0.4</span>, -<span class="fl">0.5</span>), <span class="dt">xlab =</span> <span class="st">"x"</span>,
<span class="dt">y =</span> <span class="kw">c</span>(<span class="dv">1</span>, <span class="fl">0.1</span>, -<span class="fl">0.5</span>, <span class="fl">0.5</span>, -<span class="fl">0.6</span>, <span class="fl">0.7</span>), <span class="dt">ylab =</span> <span class="st">"y"</span>,
<span class="dt">lab =</span> LETTERS[<span class="dv">1</span>:<span class="dv">6</span>], <span class="dt">type_var =</span> <span class="kw">c</span>(<span class="st">"point"</span>, <span class="kw">rep</span>(<span class="st">"arrow"</span>, <span class="dv">5</span>)),
- <span class="dt">unit_circle =</span> <span class="ot">TRUE</span>, <span class="dt">fixed =</span> <span class="ot">TRUE</span>, <span class="dt">xlim =</span> <span class="kw">c</span>(-<span class="fl">1.2</span>, <span class="fl">1.2</span>))</code></pre></div>
-<div id="htmlwidget-880e2a712506fc547ed2" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
-<script type="application/json" data-for="htmlwidget-880e2a712506fc547ed2">{"x":{"data":{"x":[1,0.9,0.7,0.2,-0.4,-0.5],"y":[1,0.1,-0.5,0.5,-0.6,0.7],"lab":["A","B","C","D","E","F"],"type_var":["point","arrow","arrow","arrow","arrow","arrow"],"key_var":[1,2,3,4,5,6]},"settings":{"x_log":false,"y_log":false,"labels_size":10,"labels_positions":null,"point_size":64,"point_opacity":1,"hover_size":1,"hover_opacity":null,"xlab":"x","ylab":"y","has_labels":true,"col_lab":"NULL","col_continuous": [...]
+ <span class="dt">unit_circle =</span> <span class="ot">TRUE</span>, <span class="dt">fixed =</span> <span class="ot">TRUE</span>,
+ <span class="dt">xlim =</span> <span class="kw">c</span>(-<span class="fl">1.2</span>, <span class="fl">1.2</span>), <span class="dt">ylim =</span> <span class="kw">c</span>(-<span class="fl">1.2</span>, <span class="fl">1.2</span>))</code></pre></div>
+<div id="htmlwidget-52703c4c59f0280976dd" style="width:480px;height:288px;" class="scatterD3 html-widget"></div>
+<script type="application/json" data-for="htmlwidget-52703c4c59f0280976dd">{"x":{"data":{"x":[1,0.9,0.7,0.2,-0.4,-0.5],"y":[1,0.1,-0.5,0.5,-0.6,0.7],"lab":["A","B","C","D","E","F"],"type_var":["point","arrow","arrow","arrow","arrow","arrow"],"key_var":[1,2,3,4,5,6]},"settings":{"x_log":false,"y_log":false,"labels_size":10,"labels_positions":null,"point_size":64,"point_opacity":1,"hover_size":1,"hover_opacity":null,"xlab":"x","ylab":"y","has_labels":true,"col_lab":"NULL","col_continuous": [...]
</div>
<div id="shiny-integration" class="section level2">
<h2>Shiny integration</h2>
diff --git a/inst/htmlwidgets/scatterD3-axes.js b/inst/htmlwidgets/scatterD3-axes.js
index 280f616..8a90503 100644
--- a/inst/htmlwidgets/scatterD3-axes.js
+++ b/inst/htmlwidgets/scatterD3-axes.js
@@ -8,6 +8,13 @@ function add_axes(selection, dims, settings, scales) {
.style("font-size", settings.axes_font_size)
.call(scales.xAxis);
+ // y axis
+ selection.append("g")
+ .attr("class", "y axis")
+ .style("font-size", settings.axes_font_size)
+ .call(scales.yAxis);
+
+ // x axis label
selection.append("text")
.attr("class", "x-axis-label")
.attr("transform", "translate(" + (dims.width - 5) + "," + (dims.height - 6) + ")")
@@ -15,12 +22,7 @@ function add_axes(selection, dims, settings, scales) {
.style("font-size", settings.axes_font_size)
.text(settings.xlab);
- // y axis
- selection.append("g")
- .attr("class", "y axis")
- .style("font-size", settings.axes_font_size)
- .call(scales.yAxis);
-
+ // y axis label
selection.append("text")
.attr("class", "y-axis-label")
.attr("transform", "translate(5,6) rotate(-90)")
diff --git a/inst/htmlwidgets/scatterD3-setup.js b/inst/htmlwidgets/scatterD3-setup.js
index 7be99c9..7a062c0 100644
--- a/inst/htmlwidgets/scatterD3-setup.js
+++ b/inst/htmlwidgets/scatterD3-setup.js
@@ -32,8 +32,8 @@ function setup_sizes (width, height, settings) {
// Fixed ratio
if (settings.fixed) {
- dims.height = Math.min(dims.height, dims.width);
- dims.width = dims.height;
+ dims.height = Math.min(dims.height, dims.width);
+ dims.width = dims.height;
}
dims.total_width = dims.width + margins.left + margins.right + dims.legend_width;
@@ -72,11 +72,28 @@ function setup_scales (dims, settings, data) {
var min_x, min_y, max_x, max_y, gap_x, gap_y;
var scales = {};
+ // if data is empty
+ if (data.length == 0) {
+ settings.x_categorical = false;
+ settings.y_categorical = false;
+ data = [{x:0, y:0, key:1}];
+ }
+
// x and y limits
if (settings.xlim === null) {
min_x = d3.min(data, function(d) { return(d.x);} );
max_x = d3.max(data, function(d) { return(d.x);} );
gap_x = (max_x - min_x) * 0.2;
+ if (min_x == max_x) {
+ min_x = min_x * 0.8;
+ max_x = max_x * 1.2;
+ gap_x = 0;
+ }
+ if (min_x == 0 && max_x == 0) {
+ min_x = -1;
+ max_x = 1;
+ gap_x = 0.1;
+ }
} else {
min_x = settings.xlim[0];
max_x = settings.xlim[1];
@@ -86,37 +103,61 @@ function setup_scales (dims, settings, data) {
min_y = d3.min(data, function(d) { return(d.y);} );
max_y = d3.max(data, function(d) { return(d.y);} );
gap_y = (max_y - min_y) * 0.2;
+ if (min_y == max_y) {
+ min_y = min_y * 0.8;
+ max_y = max_y * 1.2;
+ gap_y = 0;
+ }
+ if (min_y == 0 && max_y == 0) {
+ min_y = -1;
+ max_y = 1;
+ gap_y = 0.1;
+ }
} else {
min_y = settings.ylim[0];
max_y = settings.ylim[1];
gap_y = 0;
}
+ min_x = settings.x_log ? min_x * 0.8 : min_x - gap_x;
+ max_x = settings.x_log ? max_x * 1.3 : max_x + gap_x;
+ min_y = settings.y_log ? min_y * 0.9 : min_y - gap_y;
+ max_y = settings.y_log ? max_y * 1.1 : max_y + gap_y;
+
// Fixed ratio
- if (settings.fixed && !(settings.xlim !== null && settings.ylim !== null)) {
- if (settings.xlim === null && settings.ylim === null) {
- min_x = min_y = Math.min(min_x, min_y);
- max_x = max_y = Math.max(max_x, max_y);
- gap_x = gap_y = Math.max(gap_x, gap_y);
- }
- if (settings.xlim !== null) {
- min_y = min_x;
- max_y = max_x;
- gap_y = gap_x;
- }
- if (settings.ylim !== null) {
- min_x = min_y;
- max_x = max_y;
- gap_x = gap_y;
- }
+ var range_x = max_x - min_x;
+ var mid_x = (max_x + min_x) / 2;
+ var range_y = max_y - min_y;
+ var mid_y = (max_y + min_y) / 2;
+ if (settings.fixed && settings.xlim === null && settings.ylim === null) {
+ var ratio = (range_y / range_x);
+ if (ratio > 1) {
+ range_x = range_x * ratio;
+ min_x = mid_x - range_x / 2;
+ max_x = mid_x + range_x / 2;
+ } else {
+ range_y = range_y / ratio;
+ min_y = mid_y - range_y / 2;
+ max_y = mid_y + range_y / 2;
+ }
+ }
+ if (settings.fixed && settings.xlim != null) {
+ range_y = range_x;
+ min_y = mid_y - range_y / 2;
+ max_y = mid_y + range_y / 2;
+ }
+ if (settings.fixed && settings.ylim != null) {
+ range_x = range_y;
+ min_x = mid_x - range_x / 2;
+ max_x = mid_x + range_x / 2;
}
+
// x, y scales
if (!settings.x_categorical) {
scales.x = settings.x_log ? d3.scaleLog() : d3.scaleLinear();
- var x_domain = settings.x_log ? [min_x * 0.8, max_x * 1.3] : [min_x - gap_x, max_x + gap_x];
scales.x.range([0, dims.width])
- .domain(x_domain);
+ .domain([min_x, max_x]);
} else {
scales.x = d3.scalePoint()
.range([0, dims.width])
@@ -125,9 +166,8 @@ function setup_scales (dims, settings, data) {
}
if (!settings.y_categorical) {
scales.y = settings.y_log ? d3.scaleLog(): d3.scaleLinear();
- var y_domain = settings.y_log ? [min_y * 0.9, max_y * 1.1] : [min_y - gap_y, max_y + gap_y];
scales.y.range([dims.height, 0])
- .domain(y_domain);
+ .domain([min_y, max_y]);
} else {
scales.y = d3.scalePoint()
.range([dims.height, 0])
@@ -139,12 +179,15 @@ function setup_scales (dims, settings, data) {
scales.y_orig = scales.y;
// x and y axis functions
scales.xAxis = d3.axisBottom(scales.x)
- .tickSize(-dims.height)
- .tickFormat(d3.format(""));
+ .tickSize(-dims.height);
+ if (!settings.x_categorical) {
+ scales.xAxis.tickFormat(d3.format(""));
+ }
scales.yAxis = d3.axisLeft(scales.y)
- .tickSize(-dims.width)
- .tickFormat(d3.format(""));;
-
+ .tickSize(-dims.width);
+ if (!settings.y_categorical) {
+ scales.yAxis.tickFormat(d3.format(""));
+ }
// Continuous color scale
if (settings.col_continuous) {
scales.color = d3.scaleSequential(d3.interpolateViridis)
diff --git a/inst/htmlwidgets/scatterD3.js b/inst/htmlwidgets/scatterD3.js
index 56a9823..edf341f 100644
--- a/inst/htmlwidgets/scatterD3.js
+++ b/inst/htmlwidgets/scatterD3.js
@@ -8,12 +8,12 @@ function scatterD3() {
data = [],
svg,
zoom, drag;
-
+
// Zoom behavior
zoom = d3.zoom()
.scaleExtent([0, 32])
.on("zoom", zoomed);
-
+
// Zoom function
function zoomed(reset) {
var root = svg.select(".root");
@@ -327,7 +327,7 @@ function scatterD3() {
caption.classed("visible", false);
caption.style("margin-top", "0px");
});
-
+
}
// No title
else {
@@ -465,7 +465,7 @@ function scatterD3() {
if (settings.legend_changed) {
var legend = svg.select(".legend");
dims = setup_legend_sizes(dims, scales, settings);
-
+
// Move color legend
if(settings.has_color_var && settings.had_color_var && !settings.col_changed) {
legend.call(function(sel) {
@@ -473,14 +473,14 @@ function scatterD3() {
}
// Replace color legend
if(settings.has_color_var && settings.had_color_var && settings.col_changed) {
- legend.call(function(sel) {
- remove_color_legend(sel);
+ legend.call(function(sel) {
+ remove_color_legend(sel);
add_color_legend(svg, dims, settings, scales, 1000);
});
}
// Add color legend
if(settings.has_color_var && !settings.had_color_var) {
- add_color_legend(svg, dims, settings, scales, 1000);
+ add_color_legend(svg, dims, settings, scales, 1000);
}
// Remove color legend
if(!settings.has_color_var && settings.had_color_var) {
@@ -494,14 +494,14 @@ function scatterD3() {
}
// Replace symbol legend
if(settings.has_symbol_var && settings.had_symbol_var && settings.symbol_changed) {
- legend.call(function(sel) {
- remove_symbol_legend(sel);
+ legend.call(function(sel) {
+ remove_symbol_legend(sel);
add_symbol_legend(svg, dims, settings, scales, 1000);
});
}
// Add symbol legend
if(settings.has_symbol_var && !settings.had_symbol_var) {
- add_symbol_legend(svg, dims, settings, scales, 1000);
+ add_symbol_legend(svg, dims, settings, scales, 1000);
}
// Remove symbol legend
if(!settings.has_symbol_var && settings.had_symbol_var) {
@@ -515,14 +515,14 @@ function scatterD3() {
}
// Replace size legend
if(settings.has_size_var && settings.had_size_var && settings.size_changed) {
- legend.call(function(sel) {
- remove_size_legend(sel);
+ legend.call(function(sel) {
+ remove_size_legend(sel);
add_size_legend(svg, dims, settings, scales, 1000);
});
}
// Add size legend
if(settings.has_size_var && !settings.had_size_var) {
- add_size_legend(svg, dims, settings, scales, 1000);
+ add_size_legend(svg, dims, settings, scales, 1000);
}
// Remove size legend
if(!settings.has_size_var && settings.had_size_var) {
@@ -534,9 +534,9 @@ function scatterD3() {
svg.select(".root")
.transition().delay(1000).duration(0)
.call(zoom.transform, d3.zoomIdentity);
-
-
-
+
+
+
lasso_off(svg, settings, zoom);
};
@@ -566,7 +566,7 @@ function scatterD3() {
.call(function(sel) { add_unit_circle(sel, scales); });
}
}
-
+
// Dynamically resize chart elements
function resize_chart () {
// recompute sizes
@@ -589,7 +589,7 @@ function scatterD3() {
// Move legends
if (settings.has_legend && settings.legend_width > 0) {
var legend = svg.select(".legend");
- if (settings.has_color_var)
+ if (settings.has_color_var)
move_color_legend(legend, dims, 0);
if (settings.has_symbol_var)
move_symbol_legend(legend, dims, 0);
@@ -611,7 +611,7 @@ function scatterD3() {
.style("top", dims.svg_height + "px");
}
-
+
};
@@ -814,11 +814,13 @@ HTMLWidgets.widget({
obj.settings.colors_changed = scatter.settings().colors != obj.settings.colors;
obj.settings.x_log_changed = scatter.settings().x_log != obj.settings.x_log;
obj.settings.y_log_changed = scatter.settings().y_log != obj.settings.y_log;
+ obj.settings.xlim_changed = scatter.settings().xlim != obj.settings.xlim;
+ obj.settings.ylim_changed = scatter.settings().ylim != obj.settings.ylim;
obj.settings.had_color_var = scatter.settings().has_color_var;
obj.settings.had_symbol_var = scatter.settings().has_symbol_var;
obj.settings.had_size_var = scatter.settings().has_size_var;
-
+
function changed(varname) {
return obj.settings.hashes[varname] != scatter.settings().hashes[varname];
};
@@ -842,6 +844,8 @@ HTMLWidgets.widget({
obj.settings.ellipses_changed ||
obj.settings.x_log_changed ||
obj.settings.y_log_changed ||
+ obj.settings.xlim_changed ||
+ obj.settings.ylim_changed ||
changed("opacity_var") ||
changed("lines");
diff --git a/vignettes/introduction.Rmd b/vignettes/introduction.Rmd
index a1aa254..7f393b9 100644
--- a/vignettes/introduction.Rmd
+++ b/vignettes/introduction.Rmd
@@ -140,8 +140,8 @@ In addition to your data points, you can add to your scatterplot. This is done v
For example, if you want to add a 1:1 line :
```{r lines}
-scatterD3(data = mtcars, x = wt, y = mpg, fixed = TRUE,
- lines = data.frame(slope = 1, intercept = 0))
+scatterD3(data = mtcars, x = wt, y = mpg,
+ lines = data.frame(slope = -5.344, intercept = 37.285))
```
You can style your lines by adding `stroke`, `stroke_width` and `stroke_dasharray` columns. These columns values will be added as [corresponding styles](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) to the generated SVG line. So if you want a wide dashed red horizontal line :
@@ -278,11 +278,24 @@ One usage can be to pass the index of the clicked point back to Shiny when `scat
scatterD3(data = mtcars, x = wt, y = mpg,
click_callback = "function(id, index) {
if(id && typeof(Shiny) != 'undefined') {
- Shiny.onInputChange(id + '_selected', index);
+ Shiny.onInputChange('selected_point', index);
}
}")
```
+You could then add something like this in your Shiny app `ui` :
+
+```{r click_callback_shiny_ui, eval = FALSE}
+textOutput("click_selected")
+```
+
+And this in `server` :
+
+```{r click_callback_shiny_server, eval = FALSE}
+output$click_selected <- renderText(paste0("Clicked point : ", input$selected_point))
+```
+
+
Thanks to [detule](https://github.com/detule) and [harveyl888](https://github.com/harveyl888) for the code.
Note that `url_var` and `click_callback` cannot be used at the same time.
@@ -398,7 +411,8 @@ Finally, and for more specific use cases, you can represent some points as an ar
scatterD3(x = c(1, 0.9, 0.7, 0.2, -0.4, -0.5), xlab = "x",
y = c(1, 0.1, -0.5, 0.5, -0.6, 0.7), ylab = "y",
lab = LETTERS[1:6], type_var = c("point", rep("arrow", 5)),
- unit_circle = TRUE, fixed = TRUE, xlim = c(-1.2, 1.2))
+ unit_circle = TRUE, fixed = TRUE,
+ xlim = c(-1.2, 1.2), ylim = c(-1.2, 1.2))
```
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/debian-med/r-cran-scatterd3.git
More information about the debian-med-commit
mailing list