refactor manifests to be lazier

Author: bmschmidt

.gitignore

@@ -31,3 +31,4 @@ cities.html
 assets
 atlas.sh
 tmp.csv
+newtiles

dev/Everyone.svelte

@@ -0,0 +1,63 @@
+<script>
+  import { Deeptable, 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';
+  import PositionScales from './svelte/PositionScales.svelte';
+  import SelectPoints from './svelte/SelectPoints.svelte';
+  const startSize = 0.8;
+  const prefs = {
+    max_points: 100000,
+    alpha: 35, // Target saturation for the full page.
+    zoom_balance: 0.05, // 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',
+    duration: 100,
+    encoding: {
+      x: {
+        field: 'x',
+        transform: 'literal',
+      },
+      y: {
+        field: 'y',
+        transform: 'literal',
+      },
+    },
+  };
+
+  let scatterplot = null;
+  onMount(async () => {
+    const tb = await Deeptable.fromQuadfeather({
+      baseUrl: 'http://localhost:8080/everyone',
+    });
+    window.tb = tb;
+    scatterplot = new Scatterplot({ selector: '#deepscatter', deeptable: tb });
+    window.scatterplot = scatterplot;
+    scatterplot.plotAPI(prefs);
+  });
+</script>
+
+<div id="overlay">
+  <!-- <SwitchPositions {scatterplot}></SwitchPositions>
+  <ColorChange {scatterplot}></ColorChange>
+  <SizeSlider size={startSize} {scatterplot}></SizeSlider>
+  <PositionScales {scatterplot} />
+  <SelectPoints {scatterplot}></SelectPoints> -->
+</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>

dev/FourClasses.svelte

@@ -8,8 +8,8 @@
   import SelectPoints from './svelte/SelectPoints.svelte';
   const startSize = 2;
   const prefs = {
-    source_url: '/tiles',
-    max_points: 1000000,
+    source_url: '/newtiles',
+    max_points: 10,
     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

dev/Main.svelte

@@ -7,12 +7,14 @@
 
   import FourClasses from './FourClasses.svelte';
   import SinglePoint from './SinglePoint.svelte';
+  import Everyone from './Everyone.svelte';
   import LabelMaker from './submodules/LabelMaker.svelte';
 
   const modes = {
     FourClasses,
     SinglePoint,
     LabelMaker,
+    Everyone,
   };
 
   $: mode = '';

integers.html

@@ -90,7 +90,6 @@
       const batch = make_batch(i * SIZE, SIZE);
       batches.push(batch);
       window.b = batch;
-      console.log(i);
     }
     const table = new Table([batches]);
     return table;
@@ -175,7 +174,6 @@
             op: 'gt',
             a: 0,
           };
-          console.log(JSON.stringify(encoding, null, 2));
           plot.plotAPI({
             encoding,
           });