-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
181 additions
and
30 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <style> | ||
| .ttooltip { | ||
| z-index: 99 | ||
| } | ||
| </style> | ||
|
|
||
| <body> | ||
| <h1>Welcome to a demo/test page.</h1> | ||
| <div id="deepscatter" style="position:fixed;top:0;left:0"> | ||
| </div> | ||
| <button id="flip" style="z-index:99;position:fixed;">Change encoding</button> | ||
| <pre id="ident" style="z-index:99;position:fixed;"></pre> | ||
|
|
||
| </body> | ||
| <script src="https://d3js.org/d3.v7.min.js"></script> | ||
|
|
||
| <script type = "module"> | ||
| import Scatterplot from './dist/deepscatter.es.js'; | ||
| const select = d3.select | ||
| // import { select } from 'd3-selection'; | ||
| window.select = select; // For the click function below. | ||
| const prefs = { | ||
| "source_url" : "/dist/tiles", | ||
| "max_points" : 25000, // a full cap. | ||
| "alpha" : .7, // Target saturation for the full page. | ||
| "zoom_balance" : 0.09, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js | ||
| "point_size": 10, // Default point size before application of size scaling | ||
| "background_color": "#EEEDDE", | ||
| "click_function": "select('#ident').html(JSON.stringify(datum, undefined, 2))", | ||
| "encoding": { | ||
| "color": { | ||
| "field": "class", | ||
| "range": "category10", | ||
| "domain": [-2047, 2047] | ||
| }, | ||
| "x": { | ||
| field: "x", | ||
| transform: "literal" | ||
| }, | ||
| "y": { | ||
| field: "y", | ||
| transform: "literal" | ||
| }, | ||
| "size": { | ||
| "field": "quantity", | ||
| "transform": "sqrt", | ||
| "domain": [0, 3], | ||
| "range": [0, 4] | ||
| } | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| const colors = [ | ||
| JSON.parse(JSON.stringify(prefs.encoding.color)), | ||
| { | ||
| "field": "quantity", | ||
| "range": "viridis", | ||
| "domain": [0, 1] | ||
| }, | ||
| { | ||
| "field": "x", | ||
| "range": "viridis", | ||
| "domain": [-3, 3] | ||
| } | ||
| ] | ||
|
|
||
| const plot = new Scatterplot("#deepscatter") | ||
| plot.plotAPI(prefs); | ||
| window.plot = plot; // For debugging | ||
|
|
||
|
|
||
| // Simple animation demonstration. | ||
|
|
||
| let cycle = 0; | ||
|
|
||
| select("#flip").on("click", () => { | ||
| cycle += 1 | ||
| const new_coding = { | ||
| "encoding": { | ||
| "x": {"field": cycle % 2 == 0 ? "x": "y"}, | ||
| "y": {"field": cycle % 2 == 0 ? "y": "x"}, | ||
| "color": colors[cycle % colors.length] | ||
| } | ||
| } | ||
| console.log(new_coding) | ||
| plot.plotAPI(new_coding) | ||
| }) | ||
|
|
||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,25 @@ | ||
| import glslify from 'rollup-plugin-glslify'; | ||
| import worker from 'rollup-plugin-web-worker-loader'; | ||
| import path from 'path'; | ||
| import { fileURLToPath } from 'url'; | ||
| const __filename = fileURLToPath(import.meta.url); | ||
| const __dirname = path.dirname(__filename); | ||
|
|
||
| export default { | ||
| build: { | ||
| target: "esnext", | ||
| lib: { | ||
| entry: path.resolve(__dirname, 'src/deepscatter.js'), | ||
| name: 'deepscatter', | ||
| formats: [/*'es', */'umd'], | ||
| }, | ||
| }, | ||
| rollupOptions: { | ||
| output: { | ||
| inlineDynamicImports: true, | ||
| manualChunks: {}, | ||
| name: 'Deepscatter', | ||
| formats: ['es', 'umd'], | ||
| }, | ||
| }, | ||
| plugins: [ | ||
| glslify({ compress: false }), | ||
| worker({ | ||
| /* worker({ | ||
| targetPlatform: 'browser', | ||
| pattern: /(.+)\?worker/, | ||
| // extensions: supportedExts, | ||
| preserveSource: true, // somehow results in slightly smaller bundle | ||
| }), | ||
| }), */ | ||
| ], | ||
| }; |