Skip to content

Commit

Permalink
refactor manifests to be lazier
Browse files Browse the repository at this point in the history
  • Loading branch information
bmschmidt committed Dec 17, 2024
1 parent de57740 commit cb409c1
Show file tree
Hide file tree
Showing 20 changed files with 931 additions and 314 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,4 @@ test_pages
cities.html
assets
tmp.csv
newtiles
63 changes: 63 additions & 0 deletions dev/Everyone.svelte
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions dev/FourClasses.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions dev/Main.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand Down
2 changes: 0 additions & 2 deletions integers.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -175,7 +174,6 @@
op: 'gt',
a: 0,
};
console.log(JSON.stringify(encoding, null, 2));
plot.plotAPI({
encoding,
});
Expand Down
Loading

0 comments on commit cb409c1

Please sign in to comment.