fix: add test page for point size alpha variables, allow plotting one point.

Author: bmschmidt

dev/Main.svelte

@@ -1,60 +1,16 @@
 <script>
-  import { Scatterplot } from '../src/deepscatter';
-  import { onMount } from 'svelte';
-  import SwitchPositions from './svelte/SwitchPositions.svelte';
-  import ColorChange from './svelte/ColorChange.svelte';
-  import SizeSlider from './svelte/SizeSlider.svelte';
-
-  const startSize = 2;
-  const prefs = {
-    source_url: '/tiles',
-    max_points: 1000000,
-    alpha: 35, // Target saturation for the full page.
-    zoom_balance: 0.22, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
-    point_size: startSize, // Default point size before application of size scaling
-    background_color: '#EEEDDE',
-    encoding: {
-      color: {
-        field: 'class',
-        range: 'category10',
-      },
-      x: {
-        field: 'x',
-        transform: 'literal',
-      },
-      y: {
-        field: 'y',
-        transform: 'literal',
-      },
-    },
+  import FourClasses from './FourClasses.svelte';
+  import SinglePoint from './SinglePoint.svelte';
+  const modes = {
+    FourClasses: FourClasses,
+    SinglePoint: SinglePoint,
   };
 
-  let scatterplot = null;
-  onMount(() => {
-    scatterplot = new Scatterplot('#deepscatter');
-    window.scatterplot = scatterplot;
-    scatterplot.plotAPI(prefs);
-  });
+  $: mode = 'SinglePoint';
 </script>
 
-<div id="overlay">
-  <SwitchPositions {scatterplot}></SwitchPositions>
-  <ColorChange {scatterplot}></ColorChange>
-  <SizeSlider size={startSize} {scatterplot}></SizeSlider>
-</div>
-
-<div id="deepscatter"></div>
-
-<style>
-  #overlay {
-    position: fixed;
-    z-index: 10;
-    left: 40px;
-    top: 40px;
-  }
-  #deepscatter {
-    z-index: 0;
-    width: 100vw;
-    height: 100vh;
-  }
-</style>
+{#if mode in modes}
+  <svelte:component this={modes[mode]} />
+{:else}
+  <h1>Mode not found</h1>
+{/if}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "deepscatter",
   "type": "module",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.1",
   "description": "Fast, animated zoomable scatterplots scaling to billions of points",
   "files": [
     "dist"

src/glsl/general.vert

@@ -9,7 +9,6 @@ uniform vec2 u_wrap_colors_after;
 uniform float u_jitter;
 uniform float u_last_jitter;
 
-
 // Whether to plot only a single category.
 uniform float u_only_color;
 uniform float u_grid_mode;
@@ -595,13 +594,16 @@ float texture_float_lookup(in vec2 domain,
     // Literal transforms aren't looked up, just returned as is.
     return attr;
   }
+
   float inrange = domainify(domain, transform, attr, 0.);
   if (texture_position > 0.5) {
     float y_pos = texture_position / 32. - 0.5 / 32.;
     vec4 encoded = texture2D(u_one_d_aesthetic_map, vec2(y_pos, inrange));
     return encoded.a;
   } else {
-    return mix(range.x, range.y, inrange);
+    // return 0.25;
+    // return inrange;
+    return mix(domain.x, domain.y, inrange);
   }
 }
 
@@ -1257,7 +1259,8 @@ void main() {
   float size_multiplier = texture_float_lookup(
     u_size_domain,
     u_size_range,
-    u_size_transform, a_size,
+    u_size_transform,
+    a_size,
     u_size_map_position);
 
   float last_size_multiplier = texture_float_lookup(
@@ -1267,11 +1270,10 @@ void main() {
   size_multiplier = u_base_size * 
      mix(last_size_multiplier, size_multiplier, ease);
 
-  float depth_size_adjust = (1.0 - ix / (u_maxix));
-
+  // float depth_size_adjust = (1.0 - ix / (u_maxix));
 
   point_size_adjust = exp(log(u_k) * u_zoom_balance) ;// * depth_size_adjust;
-//  point_size_adjust = exp(log(u_k) * u_zoom_balance);
+
   gl_PointSize = point_size_adjust * size_multiplier;
 
   if (gl_PointSize <= 5.1) {
@@ -1341,6 +1343,7 @@ void main() {
     fill = packFloat(ix_in_tile + 1.);
   } else {
     run_color_fill(ease);
+    // fill = packFloat(ix + 1.);
   }
 
   // Are we in a mode where we need to plot foreground and background?
@@ -1383,7 +1386,6 @@ void main() {
   }
 
   point_size = gl_PointSize;
-
 /*  if (u_use_glyphset > 0. && point_size > 5.0) {
     float random_letter = floor(64. * ix_to_random(ix, 1.3));
     letter_pos = vec2(

src/regl_rendering.ts

@@ -200,6 +200,7 @@ export class ReglRenderer extends Renderer {
         number,
       ],
     };
+    // console.log(props.alpha, 'alpha');
 
     // Clone.
     return JSON.parse(JSON.stringify(props)) as DS.GlobalDrawProps;
@@ -896,7 +897,10 @@ export class ReglRenderer extends Renderer {
         u_zoom_balance: regl.prop('zoom_balance'),
         u_base_size: (_: C, { point_size }: P) => point_size,
         u_maxix: (_: C, { max_ix }: P) => max_ix,
-        u_alpha: (_: C, { alpha }: P) => alpha,
+        u_alpha: (_: C, { alpha }: P) => {
+          //console.log(alpha);
+          return alpha;
+        },
         u_foreground_number: (_: C, { foreground }: P) => foreground as number,
         u_foreground_alpha: () => this.render_props.foreground_opacity,
         u_background_rgba: () => {
@@ -914,6 +918,9 @@ export class ReglRenderer extends Renderer {
         u_background_size: () => this.render_props.background_size,
         u_foreground_size: () => this.render_props.foreground_size,
         u_k: (_: DefaultContext, props: P) => {
+          if (Math.random() < 0.01) {
+            //console.log(props.transform.k);
+          }
           return props.transform.k;
         },
         // Allow interpolation between different coordinate systems.
@@ -1234,9 +1241,6 @@ export class TileBufferManager {
 
   async create_buffer_data(key: string): Promise<Float32Array> {
     const { tile } = this;
-    if (tile.key === '4/4/9') {
-      console.log('MAKING', key, tile.key);
-    }
     type ColumnType = Vector<Dictionary<Utf8> | Float | Bool | Int | Timestamp>;
 
     if (!tile.hasLoadedColumn(key)) {

src/rendering.ts

@@ -104,6 +104,7 @@ class RenderProps {
     return this.targetOpacity.value;
   }
   get point_size() {
+    // console.log('GETTING POINT SIZE', this.pointSize.value);
     return this.pointSize.value;
   }
   get foreground_opacity() {
@@ -185,15 +186,16 @@ export class Renderer {
     const k = this.zoom?.transform?.k ?? 1;
     const target_share = alpha / 100;
     const fraction_of_total_visible = 1 / k ** 2;
-    const pixelRatio = window.devicePixelRatio || 1;
+    const pixelRatio = window?.devicePixelRatio || 1;
 
     const pixel_area = (width * height) / pixelRatio;
     const total_intended_points = min([
       max_ix,
       this.dataset.highest_known_ix || 1e10,
     ]) as number;
-    const total_points = total_intended_points * (1 - discard_share);
 
+    const total_points = total_intended_points * (1 - discard_share);
+    //console.log({ total_points });
     const size_adjust = Math.exp(Math.log(k) * zoom_balance);
     const area_of_point =
       Math.PI * ((size_adjust * point_size) / pixelRatio / 2) ** 2;
@@ -214,11 +216,11 @@ export class Renderer {
     const { prefs } = this;
     const { max_points } = this.render_props;
     if (!this._use_scale_to_download_tiles) {
-      return max_points;
+      return max_points + 1;
     }
     const k = this.zoom.transform!.k;
     const point_size_adjust = Math.exp(Math.log(k) * prefs.zoom_balance);
-    return (max_points * k * k) / point_size_adjust / point_size_adjust;
+    return (max_points * k * k) / point_size_adjust / point_size_adjust + 0.5;
   }
 
   visible_tiles(): Array<Tile> {

src/tile.ts

@@ -545,7 +545,7 @@ export class Tile {
           manifest.max_ix = manifest.min_ix + 1e5;
           manifest.min_ix = 0;
         }
-        this.highest_known_ix = this.max_ix;
+        this.highest_known_ix = manifest.max_ix;
         this.manifest = {
           key: this.key,
           children: manifest.children,