Allow pointSize per point. Default colorVariation reduced.

NEWS.md

@@ -2,6 +2,8 @@
 # langevitour 0.7
 
 * Refine full-screen logic.
+* Default colorVariation seemed a bit much, reduced to 0.1.
+* pointSize can now be specified per-point.
 
 # langevitour 0.6
 

R/langevitour.R

@@ -32,7 +32,7 @@
 #'
 #' @param colorVariation Number between 0 and 1. Individual points are given slightly different brightnesses. How strong should this effect be?
 #'
-#' @param pointSize Point radius in pixels.
+#' @param pointSize Point radius in pixels. A single number, or a number for each row in X.
 #'
 #' @param subsample For speed, randomly subsample down to this many rows.
 #'
@@ -74,7 +74,7 @@
 langevitour <- function(
         X, group=NULL, name=NULL, center=NULL, scale=NULL, 
         extraAxes=NULL, lineFrom=NULL, lineTo=NULL, lineColors=NULL,
-        axisColors=NULL, levelColors=NULL, colorVariation=0.3, pointSize=1, subsample=NULL, 
+        axisColors=NULL, levelColors=NULL, colorVariation=0.1, pointSize=1, subsample=NULL, 
         state=NULL, width=NULL, height=NULL, elementId=NULL,
         link=NULL, link_filter=TRUE) {
 
@@ -121,6 +121,7 @@ langevitour <- function(
         ncol(X) >= 2,
         length(columnNames) == ncol(X),
         length(group) == nrow(X),
+        length(pointSize) == 1 || length(pointSize) == nrow(X),
         is.null(name) || length(name) == nrow(X),
         length(lineFrom) == length(lineTo),
         is.null(lineColors) || length(lineColors) == length(lineFrom),
@@ -227,7 +228,7 @@ langevitour <- function(
         axisColors=as.list(as.character(axisColors)),
         levelColors=as.list(as.character(levelColors)),
         colorVariation=as.numeric(colorVariation),
-        pointSize=as.numeric(pointSize),
+        pointSize=as.numeric(pointSize), # Javascript side can handle unboxing here (number|number[])
 
         crosstalkGroup=crosstalkGroup,
         crosstalkKey=crosstalkKey,

README.md

@@ -20,7 +20,7 @@ Further material:
 
 * useR! 2022 conference [slides](https://logarithmic.net/langevitour/2022-useR/) and [video (extended edition)](https://www.youtube.com/watch?v=vKv9P13UACw)
 
-* IASC-ARS 2023 [slides](https://logarithmic.net/langevitour/2023-iasc-ars/) for *Visualising high-dimensional genomics data: what Non-Linear Dimension Reduction hides and misrepresents.* Demonstrates some advanced tricks setting the state of the widget using buttons in a Quarto presentation.
+* IASC-ARS 2023 [slides](https://logarithmic.net/langevitour/2023-iasc-ars/) and [short video](https://www.youtube.com/watch?v=gwqU9OoFwjQ) for *Visualising high-dimensional genomics data: what Non-Linear Dimension Reduction hides and misrepresents.* Demonstrates some advanced tricks setting the state of the widget using buttons in a Quarto presentation.
 
 * [R examples](https://logarithmic.net/langevitour/articles/examples.html)
 

example.html

@@ -30,13 +30,14 @@
 "use strict";
 
 // Generate a sample dataset
-let X = [ ], group = [ ];
+let X = [ ], group = [ ], pointSize = [ ];
 let r = ()=>jStat.normal.sample(0,0.02);
-let n = 20000;
+let n = 1000;
 for(let i=0;i<n;i++) {
     let a=i/n * Math.PI * 2;
     X.push([ 10+Math.sin(a)/3+r(), 20+Math.sin(a*2)/3+r(), 30+Math.sin(a*3)/3, 40+Math.sin(a*4)/3, 50+Math.sin(a*5)/3 ]);
     group.push( Math.floor(i*4/n) );
+    pointSize.push(i%10+1);
 }
 
 // Extra axes (specified as columns of a matrix)
@@ -60,7 +61,8 @@
     extraAxes:extraAxes,
     extraAxesNames:extraAxesNames,
 
-    pointSize:1,
+    //pointSize: 3,
+    pointSize: pointSize,
 };
 
 let container = document.getElementById("container");

py/langevitour/langevitour.py

@@ -30,7 +30,7 @@ class Langevitour:
         axis_colors (list[str], optional): CSS colors for each variable and extra axis.
         level_colors (list[str], optional): CSS colors for each level of `group`.
         color_variation (float, 0-1, optional): Brightness variation among individual points. Defaults to 0.3.
-        point_size (int, optional): Point radius in pixels. Defaults to 1.
+        point_size (float|list[float], optional): Point radius in pixels. Defaults to 1. A single value or a value for each point.
         subsample (int, optional): Randomly subsample to this many rows for speed. Defaults to None.
         state (str, optional): Initial widget state settings. Defaults to None.
         width (int, optional): Width of widget in pixels. Defaults to 700.
@@ -58,7 +58,7 @@ def __init__(
         line_colors=None,
         axis_colors=None,
         level_colors=None,
-        color_variation=0.3,
+        color_variation=0.1,
         point_size=1,
         subsample=None,
         state=None,

src/langevitour.ts

@@ -226,7 +226,6 @@ export class Langevitour extends EventTarget {
     originalWidth = 1;
     originalHeight = 1;
 
-    pointSize = 1;
 
     center: number[] = [];
     scale: number[] = [];
@@ -238,6 +237,7 @@ export class Langevitour extends EventTarget {
     unpermutor: number[] = [];
     rownames: string[] = [];
     group: number[] = [];
+    pointSize: number[] = [];
     levels: string[] = [];
     levelColors: string[] = [];
     lineFrom: number[] = [];
@@ -564,7 +564,7 @@ export class Langevitour extends EventTarget {
      *
      * [data.colorVariation] Amount of brightness variation of points, between 0 and 1.
      *
-     * [data.pointSize] Radius of points in pixels.
+     * [data.pointSize] Radius of points in pixels either, a number or an array of numbers for each point.
      *
      * [data.state] State to be passed on to setState().
      */
@@ -584,7 +584,7 @@ export class Langevitour extends EventTarget {
             axisColors?: string[],
             levelColors?: string[],
             colorVariation?: number,
-            pointSize?: number,
+            pointSize?: number | number[],
             state?: any
         }) {
 
@@ -600,8 +600,6 @@ export class Langevitour extends EventTarget {
         this.n = data.X.length;
         this.m = data.X[0].length;
 
-        this.pointSize = data.pointSize != null ? data.pointSize : 1;
-
         let axisColors = data.axisColors || [];
 
         this.center = data.center || Array(this.m).fill(0);
@@ -619,6 +617,15 @@ export class Langevitour extends EventTarget {
         this.X = this.X.map(item => item.map((value, i) => 
             (value-this.center[i])/this.scale[i] ));
 
+        if (data.pointSize == null) { //check for null or undefined
+            this.pointSize = Array(this.n).fill(1)
+        } else if (typeof(data.pointSize) === "number") {
+            this.pointSize = Array(this.n).fill(data.pointSize);
+        } else {
+            let pointSize = data.pointSize;
+            this.pointSize = this.permutor.map(i => pointSize[i]);
+        }
+
         if (!data.rownames || data.rownames.length == 0) {
             this.rownames = [ ];
         } else {
@@ -692,7 +699,7 @@ export class Langevitour extends EventTarget {
 
         // Point colors are given a small back-to-front brightness gradient,
         // to add some variation and give a pseudo-3D effect.
-        let colorVariation = data.colorVariation == null ? 0.3 : data.colorVariation;
+        let colorVariation = data.colorVariation == null ? 0.1 : data.colorVariation;
         this.fills = [ ];
         for(let i=0;i<this.n;i++) {
             let pointColor = rgb(this.levelColors[this.group[i]]);
@@ -1295,9 +1302,9 @@ export class Langevitour extends EventTarget {
         }
 
         // Draw points that aren't hidden
-        let size = this.pointSize;
         for(let i=0;i<this.n;i++) {
             if (this.pointActive[i]) {
+                let size = this.pointSize[i];
                 ctx.fillStyle = this.fillsFrame[i];
                 ctx.fillRect(this.xScaleClamped(this.xy[0][i])-size, this.yScaleClamped(this.xy[1][i])-size, size*2, size*2);
             }

vignettes/examples.Rmd

@@ -237,7 +237,7 @@ langevitour(
     lineFrom=cube$edges[,"from"], 
     lineTo=cube$edges[,"to"], 
     lineColors=rainbow(nrow(cube$edges)),
-    pointSize=3)
+    pointSize=sqrt(seq_len(nrow(cube$points))))
 ```
 
 ## Torus