scatter fancy

example/app.js

@@ -28,20 +28,42 @@ class App extends Component {
  };
 
  const trace2 = {
- mode: 'scatter',
- positions: p2.positions,
- min: p2.min,
- max: p2.max,
- scatter: {
- size: 10,
- color: [0.0, 0.9, 0.0, 1],
- borderSize: 1,
- borderColor: [0, 0, 0, 1]
+ mode: 'scatterFancy',
+ positions: [
+ .5,.5, 1.5,.5, 2.5,.5, 3.5,.5, 4.5,.5, 5.5,.5, 6.5,.5, 7.5,.5, 8.5,.5, 9.5,.5,
+ .5,1.5, 1.5,1.5, 2.5,1.5, .5,2.5, 1.5,2.5, 2.5,2.5, .5,3.5, 1.5,3.5, 2.5,3.5,
+ 3.5,3.5, 4.5,3.5, 5.5,3.5
+ ],
+ min: { x: 0.5, y: 0.5 },
+ max: { x: 9.5, y: 3.5 },
+ scatterFancy: {
+ sizes: [
+ 40, 20, 30, 40, 50, 60, 70, 80, 90, 100,
+ 25, 30, 35, 40, 45, 50, 1, 5, 20, 50, 120, 150
+ ],
+ colors: [
+ 1,0,0,1, .1,0,0,1, .2,0,0,1, .3,0,0,1, .4,0,0,1, .5,0,0,1, .6,0,0,1, .7,0,0,1, .8,0,0,1, .9,0,0,1,
+ 1,0,0,1, 0,1,0,1, 0,0,1,1, 0,0,0,.2, 0,0,0,.5, 0,0,0,.8, 0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1,
+ 0,0,1,1
+ ],
+ glyphs: [
+ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+ '•', '+', '#', 'E', '=', 'mc²', '●', '●', '●', '●', '●', '●'
+ ],
+ borderWidths: [
+ 1,1,1,1,1,1,1,1,1,1,
+ 2,2,2, 0,0,0, .5, .5, .5, .5, .5, .5
+ ],
+ borderColors: [
+ 0,0,0,0, 0,0,1,.9, 0,0,1,.8, 0,0,1,.7, 0,0,1,.6, 0,0,1,.5, 0,0,1,.4, 0,0,1,.3, 0,0,1,.2, 0,0,1,.1,
+ 0,1,0,1, 0,0,1,1, 1,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1,
+ 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1
+ ]
  }
  };
 
  this.name1 = 'plot1';
- this.traces1 = [trace1, trace2];
+ this.traces1 = [trace2];
  this.debug1 = true;
  this.height1 = '200px';
  this.width1 = '100%';

index.ts

@@ -14,6 +14,7 @@ export {
  Point,
  PointPair,
  Scatter,
+ ScatterFancy,
  Tick,
  TickListPair,
  Trace

package.json

@@ -15,6 +15,7 @@
  "gl-line2d": "1.4.1",
  "gl-plot2d": "1.2.0",
  "gl-scatter2d": "1.2.2",
+ "gl-scatter2d-sdf": "1.3.2",
  "gl-select-box": "1.0.1",
  "gl-spikes2d": "1.0.1",
  "glslify": "6.0.1",

src/GlPlot2dComponent.tsx

@@ -4,13 +4,15 @@ import * as fit from 'canvas-fit';
 import * as createLine from 'gl-line2d';
 import * as createPlot from 'gl-plot2d';
 import * as createScatter from 'gl-scatter2d';
+import * as createScatterFancy from 'gl-scatter2d-sdf';
 import * as createSpikes from 'gl-spikes2d';
 import { debounce } from 'lodash';
 
 import { GlPlot2dComponentProps,
  GlPlot2dOptions,
  Line,
  Scatter,
+ ScatterFancy,
  Trace } from './';
 
 /**
@@ -48,7 +50,8 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  trace.min,
  trace.max,
  trace.line,
- trace.scatter);
+ trace.scatter,
+ trace.scatterFancy);
  });
  }
  }),
@@ -283,6 +286,9 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  else if (trace.scatter) {
  this.addScatterPlot(trace.positions, trace.scatter);
  }
+ else if (trace.scatterFancy) {
+ this.addScatterFancyPlot(trace.positions, trace.scatterFancy);
+ }
  });
 
  skate.emit(this, `gl-plot-2d-init-plot-done-${this['name']}`);
@@ -346,6 +352,25 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  });
  }
 
+ /**
+ * Helper that adds a scatter fancy plot to the current plot.
+ *
+ * @param {number[]} positions
+ * @param {ScatterFancy} scatterFancy
+ *
+ * @memberOf GlPlot2dComponent
+ */
+ public addScatterFancyPlot(positions: number[], scatterFancy: ScatterFancy): void {
+ createScatterFancy(this.plot, {
+ positions: new Float32Array(positions),
+ sizes: scatterFancy.sizes,
+ colors: scatterFancy.colors,
+ glyphs: scatterFancy.glyphs,
+ borderWidths: scatterFancy.borderWidths,
+ borderColors: scatterFancy.borderColors
+ });
+ }
+
  /**
  * Event handler helper for mouse down event.
  *

src/ScatterFancy.ts

@@ -0,0 +1,57 @@
+
+/**
+ * ScatterFancy.
+ *
+ * See https://github.com/gl-vis/gl-scatter2d-sdf.
+ *
+ * @export
+ * @class ScatterFancy
+ */
+export class ScatterFancy {
+ public sizes: number[];
+ public colors: number[];
+ public glyphs: string[];
+ public borderWidths: number[];
+ public borderColors: number[];
+
+ /**
+ * Creates an instance of ScatterFancy.
+ *
+ * @param {number[]} sizes
+ * @param {number[]} colors
+ * @param {string[]} glyphs
+ * @param {number[]} borderWidths
+ * @param {number[]} borderColors
+ *
+ * @memberOf ScatterFancy
+ */
+ constructor(sizes: number[], colors: number[], glyphs: string[], borderWidths: number[], borderColors: number[]) {
+ this.sizes = sizes;
+ this.colors = colors;
+ this.glyphs = glyphs;
+ this.borderWidths = borderWidths;
+ this.borderColors = borderColors;
+ }
+
+ /**
+ * Updates colors array to a given colors via a pointId.
+ *
+ * @param {number} pointId
+ * @param {number[]} color
+ *
+ * @memberOf ScatterFancy
+ */
+ public updateColorByPointId(pointId: number, color: number[]) {
+ const offset = pointId * 4;
+
+ if (color.length === 4) {
+ this.colors[offset] = color[0];
+ this.colors[offset + 1] = color[1];
+ this.colors[offset + 2] = color[2];
+ this.colors[offset + 3] = color[3];
+ }
+ else {
+ console.error('ScatterFancy: updateColorByPointId: color array length should be 4: ', color);
+ }
+ }
+}

src/Trace.ts

@@ -1,4 +1,4 @@
-import { Line, Point, Scatter } from './';
+import { Line, Point, Scatter, ScatterFancy } from './';
 
 /**
  * Trace.
@@ -15,6 +15,7 @@ export class Trace {
  public max: Point;
  public line: Line | null;
  public scatter: Scatter | null;
+ public scatterFancy: ScatterFancy | null;
 
  /**
  * Creates an instance of Trace.
@@ -25,6 +26,7 @@ export class Trace {
  * @param {Point} max
  * @param {(Line | null)} line
  * @param {(Scatter | null)} scatter
+ * @param {(ScatterFancy | null)} scatterFancy
  *
  * @memberOf Trace
  */
@@ -33,7 +35,8 @@ export class Trace {
  min: Point,
  max: Point,
  line: Line | null,
- scatter: Scatter | null) {
+ scatter: Scatter | null,
+ scatterFancy: ScatterFancy | null) {
  this.mode = mode;
  this.positions = positions;
  this.min = min;
@@ -52,5 +55,16 @@ export class Trace {
  else {
  this.scatter = null;
  }
+
+ if (scatterFancy) {
+ this.scatterFancy = new ScatterFancy(scatterFancy.sizes,
+ scatterFancy.colors,
+ scatterFancy.glyphs,
+ scatterFancy.borderWidths,
+ scatterFancy.borderColors);
+ }
+ else {
+ this.scatterFancy = null;
+ }
  }
 }

src/index.ts

@@ -6,6 +6,7 @@ export { Line } from './Line';
 export { Point } from './Point';
 export { PointPair } from './PointPair';
 export { Scatter } from './Scatter';
+export { ScatterFancy } from './ScatterFancy';
 export { Tick } from './Tick';
 export { TickListPair } from './TickListPair';
 export { Trace } from './Trace';