-
-
-
- -  - -
-- -  - -
-Fashion MNIST embedding using four different techniques: PCA, t-SNE, UMAP, and a convolutional autoencoder.
+Select a point so see the corresponding image.
+`;const l=document.querySelector("#parent-wrapper"),s=document.createElement("div");s.id="note";s.style.opacity=0;l.appendChild(s);const L=(t,e)=>{s.style.opacity=1,s.style.background=e,s.textContent=t},T=()=>{s.style.opacity=0},a=document.createElement("div");a.id="center-note";a.style.opacity=0;const i=document.createElement("div");i.style.width="56px";i.style.height="56px";i.style.backgroundColor="black";i.style.backgroundSize="cover";i.style.backgroundRepeat="no-repeat";a.appendChild(i);l.appendChild(a);const O=(t,e)=>String(t).padStart(e,"0"),z=(t,e)=>{const n=new Image,r=`https://storage.googleapis.com/flekschas/regl-scatterplot/fashion-mnist-images/${O(t,5)}.png`;n.onload=()=>{a.style.opacity=1,a.style.transform="translate(-50%, -50%) scale(1)",i.style.backgroundImage=`url("${r}")`,a.style.background=p[e]},n.src=r},_=()=>{a.style.opacity=0,a.style.transform="translate(-50%, -50%) scale(0)"};l.style.display="grid";l.style.gridTemplateColumns=`repeat(${u}, minmax(0, 1fr))`;l.style.gridTemplateRows="repeat(2, minmax(0, 1fr))";l.style.gap="1rem";const g=document.querySelector("#canvas"),h=document.querySelector("#canvas-wrapper");h.style.position="relative";const y=[g];for(let t=0;tGeoNames – Cities Dataset visualized in three: by the cities' geographic location, by the total population across contintents, and by the citie's latitude distribution.
+`;const C=document.querySelector("#canvas");let S=1.5;const e=h({canvas:C,pointSize:S,lassoOnLongPress:!0});u(e);console.log(`Scatterplot v${e.get("version")}`);g({scatterplot:e,opacityChangesDisabled:!0});y.then(a=>d(a)).then(a=>{F();const o=a.data[0].children.map(t=>t.values),n=o[o.length-2],r=o[o.length-1],s=new Float32Array(n.length);for(let t=0;tFashion MNIST embedding using four different techniques: PCA, t-SNE, UMAP, and a convolutional autoencoder.
-Select a point so see the corresponding image.
-`; - -/** - * Note - */ -const parentWrapper = document.querySelector('#parent-wrapper'); -const noteEl = document.createElement('div'); -noteEl.id = 'note'; -noteEl.style.opacity = 0; -parentWrapper.appendChild(noteEl); - -const showNote = (text, color) => { - noteEl.style.opacity = 1; - noteEl.style.background = color; - noteEl.textContent = text; -}; - -const hideNote = () => { - noteEl.style.opacity = 0; -}; - -/** - * Image - */ -const centerNoteEl = document.createElement('div'); -centerNoteEl.id = 'center-note'; -centerNoteEl.style.opacity = 0; -const imgEl = document.createElement('div'); -imgEl.style.width = '56px'; -imgEl.style.height = '56px'; -imgEl.style.backgroundColor = 'black'; -imgEl.style.backgroundSize = 'cover'; -imgEl.style.backgroundRepeat = 'no-repeat'; -centerNoteEl.appendChild(imgEl); -parentWrapper.appendChild(centerNoteEl); - -const zeroPad = (num, places) => String(num).padStart(places, '0'); - -const showImg = (pointId, classId) => { - const img = new Image(); - const imgId = zeroPad(pointId, 5); - const src = `https://storage.googleapis.com/flekschas/regl-scatterplot/fashion-mnist-images/${imgId}.png`; - img.onload = () => { - centerNoteEl.style.opacity = 1; - centerNoteEl.style.transform = 'translate(-50%, -50%) scale(1)'; - imgEl.style.backgroundImage = `url("${src}")`; - centerNoteEl.style.background = CLASS_COLORS[classId]; - }; - img.src = src; -}; - -const hideImg = () => { - centerNoteEl.style.opacity = 0; - centerNoteEl.style.transform = 'translate(-50%, -50%) scale(0)'; -}; - -/** - * Set up the HTML template - */ -parentWrapper.style.display = 'grid'; -parentWrapper.style.gridTemplateColumns = `repeat(${NUM_COLUMNS}, minmax(0, 1fr))`; -parentWrapper.style.gridTemplateRows = `repeat(2, minmax(0, 1fr))`; -parentWrapper.style.gap = '1rem'; - -const baseCanvas = document.querySelector('#canvas'); -const baseCanvasWrapper = document.querySelector('#canvas-wrapper'); -baseCanvasWrapper.style.position = 'relative'; - -const canvases = [baseCanvas]; - -for (let i = 0; i < NUM_COLUMNS * NUM_ROWS - 1; i++) { - const newCanvas = baseCanvas.cloneNode(); - const newCanvasWrapper = baseCanvasWrapper.cloneNode(); - newCanvasWrapper.appendChild(newCanvas); - parentWrapper.appendChild(newCanvasWrapper); - canvases.push(newCanvas); -} - -/** - * Create a reusable renderer - */ -const renderer = createRenderer(); - -if (!renderer.isSupported) { - showModal( - 'Unfortunately, your browser does not support all WebGL extensions required by regl-scatterplot', - true - ); -} - -/** - * Create a scatter plot instances - */ - -const scatterplots = canvases.map((canvas) => - createScatterplot({ - renderer, - canvas, - pointSize: POINT_SIZE, - opacity: OPACITY, - lassoOnLongPress: true, - }) -); - -console.log(`Scatterplot v${scatterplots[0].get('version')}`); - -createMenu({ scatterplot: scatterplots }); - -/** - * Link scatter plots - */ -const syncSelection = (source, selectedPoints, classIds) => { - scatterplots - .filter((sp) => sp !== source) - .forEach((sp) => { - sp.select(selectedPoints, { preventEvent: true }); - }); - - scatterplots.forEach((sp) => { - sp.zoomToPoints(selectedPoints, { - padding: 0.2, - transition: true, - transitionDuration: 1500, - }); - }); - - const pointId = - selectedPoints[Math.floor(Math.random() * (selectedPoints.length - 1))]; - showImg(pointId, classIds[pointId]); -}; - -const syncDeselection = (source) => { - scatterplots - .filter((sp) => sp !== source) - .forEach((sp) => { - sp.deselect({ preventEvent: true }); - }); - - scatterplots.forEach((sp) => { - sp.zoomToOrigin({ - transition: true, - transitionDuration: 1500, - }); - }); - - hideImg(); -}; - -/** - * Finally, draw points 🎉 - */ - -whenData - .then((data) => tableFromIPC(data)) - .then((table) => { - closeModal(); - const columnValues = table.data[0].children.map((data) => data.values); - const classIds = columnValues[columnValues.length - 1]; - - scatterplots.forEach((sp, i) => { - sp.draw({ - x: columnValues[i * 2], - y: columnValues[i * 2 + 1], - z: classIds, - }); - sp.set({ - colorBy: 'z', - pointColor: CLASS_COLORS, - }); - sp.subscribe('pointover', (pointId) => { - showNote( - FASHION_MNIST_CLASS_LABELS[classIds[pointId]], - CLASS_COLORS[classIds[pointId]] - ); - }); - sp.subscribe('pointout', hideNote); - sp.subscribe('select', ({ points }) => - syncSelection(sp, points, classIds) - ); - sp.subscribe('deselect', () => syncDeselection(sp)); - }); - }) - .catch((error) => { - showModal('Could not load embedding... Damn...', true); - console.error(error); - }); diff --git a/example/performance-mode-point-worker.js b/example/performance-mode-point-worker.js deleted file mode 100644 index 25d495dc..00000000 --- a/example/performance-mode-point-worker.js +++ /dev/null @@ -1,41 +0,0 @@ -/* eslint-env worker */ -/* eslint no-restricted-globals: 1 */ - -const worker = function worker() { - self.onmessage = function onmessage(event) { - const num = event.data; - const bins = 10; - - try { - let points = []; - - const range = 2 / bins; - const numPerBin = num / bins ** 2; - - for (let i = 0; i < bins; i++) { - for (let j = 0; j < bins; j++) { - const xStart = -1 + j * range; - const yStart = -1 + i * range; - const tmp = []; - for (let k = 0; k < numPerBin; k++) { - tmp.push([ - xStart + Math.random() * range, // x - yStart + Math.random() * range, // y - Math.round(Math.random()), // category - Math.random(), // value - ]); - } - points = points.concat( - tmp.sort((a, b) => a[0] - b[0] || a[1] - b[1]) - ); - } - } - - self.postMessage({ points }); - } catch (error) { - self.postMessage({ error }); - } - }; -}; - -export default worker; diff --git a/example/performance-mode.js b/example/performance-mode.js deleted file mode 100644 index 44da2269..00000000 --- a/example/performance-mode.js +++ /dev/null @@ -1,186 +0,0 @@ -import { createWorker } from '@flekschas/utils'; -import { saveAsPng, checkSupport } from './utils'; - -import createScatterplot from '../src'; -import createMenu from './menu'; -import pointWorkerFn from './performance-mode-point-worker'; - -const modal = document.querySelector('#modal'); -const modalText = document.querySelector('#modal span'); -const canvas = document.querySelector('#canvas'); -const numPointsEl = document.querySelector('#num-points'); -const numPointsValEl = document.querySelector('#num-points-value'); -const pointSizeEl = document.querySelector('#point-size'); -const pointSizeValEl = document.querySelector('#point-size-value'); -const opacityEl = document.querySelector('#opacity'); -const opacityValEl = document.querySelector('#opacity-value'); -const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator'); -const resetEl = document.querySelector('#reset'); -const exportEl = document.querySelector('#export'); -const exampleEl = document.querySelector('#example-performance-mode'); - -exampleEl.setAttribute('class', 'active'); -exampleEl.removeAttribute('href'); - -let points = []; -let numPoints = 20000000; -let pointSize = 0.25; -let opacity = 0.33; -let selection = []; - -const lassoMinDelay = 10; -const lassoMinDist = 2; - -const pointWorker = createWorker(pointWorkerFn); - -const generatePoints = (num) => - new Promise((resolve, reject) => { - pointWorker.onmessage = (e) => { - if (e.data.error) reject(e.data.error); - else resolve(e.data.points); - }; - pointWorker.postMessage(num); - }); - -const showModal = (text) => { - modal.style.display = 'flex'; - modalText.textContent = text; -}; - -const closeModal = () => { - modal.style.display = 'none'; - modalText.textContent = ''; -}; - -const selectHandler = ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints); - selection = selectedPoints; - if (selection.length === 1) { - const point = points[selection[0]]; - console.log( - `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}` - ); - } -}; - -const deselectHandler = () => { - console.log('Deselected:', selection); - selection = []; -}; - -const scatterplot = createScatterplot({ - canvas, - lassoMinDelay, - lassoMinDist, - pointSize, - showReticle: true, - performanceMode: true, - lassoInitiator: true, -}); - -checkSupport(scatterplot); - -exportEl.addEventListener('click', () => saveAsPng(scatterplot)); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', selectHandler); -scatterplot.subscribe('deselect', deselectHandler); - -const setNumPoints = (newNumPoints) => { - showModal( - `Hang tight. Generating ${(numPoints / 1000000).toFixed( - 1 - )} million points...` - ); - numPoints = newNumPoints; - numPointsEl.value = numPoints; - numPointsValEl.innerHTML = numPoints; - - generatePoints(numPoints).then((newPoints) => { - points = newPoints; - scatterplot.draw(points); - closeModal(); - }); -}; - -createMenu({ scatterplot, setNumPoints }); - -const numPointsInputHandler = (event) => { - numPointsValEl.innerHTML = `${+event.target - .value} release to redraw`; -}; - -numPointsEl.addEventListener('input', numPointsInputHandler); - -const numPointsChangeHandler = (event) => setNumPoints(+event.target.value); - -numPointsEl.addEventListener('change', numPointsChangeHandler); - -const setPointSize = (newPointSize) => { - pointSize = newPointSize; - pointSizeEl.value = pointSize; - pointSizeValEl.innerHTML = pointSize; - scatterplot.set({ pointSize }); -}; - -const pointSizeInputHandler = (event) => setPointSize(+event.target.value); - -pointSizeEl.addEventListener('input', pointSizeInputHandler); - -const setOpacity = (newOpacity) => { - opacity = newOpacity; - opacityEl.value = opacity; - opacityValEl.innerHTML = opacity; - scatterplot.set({ opacity }); -}; - -const opacityInputHandler = (event) => setOpacity(+event.target.value); - -opacityEl.addEventListener('input', opacityInputHandler); - -const clickLassoInitiatorChangeHandler = (event) => { - scatterplot.set({ - lassoInitiator: event.target.checked, - }); -}; - -clickLassoInitiatorEl.addEventListener( - 'change', - clickLassoInitiatorChangeHandler -); -clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator'); - -const resetClickHandler = () => { - scatterplot.reset(); -}; - -resetEl.addEventListener('click', resetClickHandler); - -const colorsScale = [ - '#002072', // dark blue - '#162b79', - '#233680', - '#2e4186', - '#394d8d', - '#425894', - '#4b649a', - '#5570a1', - '#5e7ca7', - '#6789ae', - '#7195b4', - '#7ba2ba', - '#85aec0', - '#90bbc6', - '#9cc7cc', - '#a9d4d2', - '#b8e0d7', - '#c8ecdc', - '#ddf7df', - '#ffffe0', // bright yellow -]; -scatterplot.set({ colorBy: 'value', pointColor: colorsScale }); - -setPointSize(pointSize); -setOpacity(opacity); -setNumPoints(numPoints); diff --git a/example/programmatic-lasso.js b/example/programmatic-lasso.js deleted file mode 100644 index a4a24e82..00000000 --- a/example/programmatic-lasso.js +++ /dev/null @@ -1,293 +0,0 @@ -import { axisBottom, axisRight } from 'd3-axis'; -import { scaleLinear } from 'd3-scale'; -import { select } from 'd3-selection'; - -import createScatterplot from '../src'; -import createMenu from './menu'; -import { checkSupport } from './utils'; - -const parentWrapper = document.querySelector('#parent-wrapper'); -const canvasWrapper = document.querySelector('#canvas-wrapper'); -const canvas = document.querySelector('#canvas'); - -// Create button container with grid layout -const buttonContainer = document.createElement('div'); -buttonContainer.style.cssText = ` - position: absolute; - top: 10px; - left: 10px; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 6px; - max-width: 400px; - max-height: calc(100vh - 20px); - overflow-y: auto; - z-index: 1000; -`; -parentWrapper.appendChild(buttonContainer); - -const xDomain = [0, 100]; -const yDomain = [0, 100]; -const xScale = scaleLinear().domain(xDomain); -const yScale = scaleLinear().domain(yDomain); -const xAxis = axisBottom(xScale); -const yAxis = axisRight(yScale); -const axisContainer = select(parentWrapper).append('svg'); -const xAxisContainer = axisContainer.append('g'); -const yAxisContainer = axisContainer.append('g'); -const xAxisPadding = 20; -const yAxisPadding = 40; - -axisContainer.node().style.position = 'absolute'; -axisContainer.node().style.top = 0; -axisContainer.node().style.left = 0; -axisContainer.node().style.width = '100%'; -axisContainer.node().style.height = '100%'; -axisContainer.node().style.pointerEvents = 'none'; - -canvasWrapper.style.right = `${yAxisPadding}px`; -canvasWrapper.style.bottom = `${xAxisPadding}px`; - -let { width, height } = canvasWrapper.getBoundingClientRect(); - -xAxisContainer.attr('transform', `translate(0, ${height})`).call(xAxis); -yAxisContainer.attr('transform', `translate(${width}, 0)`).call(yAxis); - -// Render grid -xAxis.tickSizeInner(-height); -yAxis.tickSizeInner(-width); - -let points = []; -let numPoints = 5000; -let pointSize = 4; -let opacity = 0.66; -let selection = []; - -const selectHandler = ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints.length, 'points'); - selection = selectedPoints; -}; - -const deselectHandler = () => { - console.log('Deselected'); - selection = []; -}; - -const scatterplot = createScatterplot({ - canvas, - pointSize, - opacity, - xScale, - yScale, - showReticle: true, - lassoInitiator: true, - pointColor: [0.33, 0.5, 1, 1], - pointColorActive: [1, 0.5, 0, 1], -}); - -checkSupport(scatterplot); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', selectHandler); -scatterplot.subscribe('deselect', deselectHandler); -scatterplot.subscribe('view', (event) => { - xAxisContainer.call(xAxis.scale(event.xScale)); - yAxisContainer.call(yAxis.scale(event.yScale)); -}); - -scatterplot.subscribe( - 'init', - () => { - xAxisContainer.call(xAxis.scale(scatterplot.get('xScale'))); - yAxisContainer.call(yAxis.scale(scatterplot.get('yScale'))); - }, - 1 -); - -const resizeHandler = () => { - ({ width, height } = canvasWrapper.getBoundingClientRect()); - - xAxisContainer.attr('transform', `translate(0, ${height})`).call(xAxis); - yAxisContainer.attr('transform', `translate(${width}, 0)`).call(yAxis); - - // Render grid - xAxis.tickSizeInner(-height); - yAxis.tickSizeInner(-width); -}; - -window.addEventListener('resize', resizeHandler); -window.addEventListener('orientationchange', resizeHandler); - -// Generate points in DATA SPACE (not NDC) -const generatePoints = (num) => { - const pts = []; - for (let i = 0; i < num; i++) { - const x = Math.random() * 100; // 0 to 100 (data space) - const y = Math.random() * 100; // 0 to 100 (data space) - - // Convert to NDC for scatterplot - const xNdc = (x / 100) * 2 - 1; - const yNdc = (y / 100) * 2 - 1; - - pts.push([ - xNdc, - yNdc, - Math.round(Math.random() * 4), // category - Math.random(), // value - x, // store original x for reference - y, // store original y for reference - ]); - } - return pts; -}; - -const setNumPoints = (newNumPoints) => { - points = generatePoints(newNumPoints); - scatterplot.draw(points); -}; - -createMenu({ scatterplot, setNumPoints }); - -scatterplot.set({ - colorBy: 'category', - pointColor: [ - '#3a84cc', - '#56bf92', - '#eecb62', - '#c76526', - '#d192b7', - ], -}); - -// Helper function to create a button -const createButton = (label, onClick, wide = false) => { - const btn = document.createElement('button'); - btn.textContent = label; - btn.style.cssText = ` - padding: 6px 10px; - background: #3a84cc; - color: white; - border: none; - border-radius: 3px; - cursor: pointer; - font-size: 11px; - white-space: nowrap; - text-align: center; - ${wide ? 'grid-column: 1 / -1;' : ''} - `; - btn.addEventListener('mouseenter', () => { - btn.style.background = '#2a6cb0'; - }); - btn.addEventListener('mouseleave', () => { - btn.style.background = '#3a84cc'; - }); - btn.addEventListener('click', onClick); - return btn; -}; - -// Button 1: Select bottom-left triangle -buttonContainer.appendChild( - createButton('△ Bottom-Left', () => { - scatterplot.lassoSelect([ - [10, 10], - [40, 10], - [10, 40], - ]); - }) -); - -// Button 2: Select top-right circle (approximated by polygon) -buttonContainer.appendChild( - createButton('○ Top-Right', () => { - const cx = 75; - const cy = 75; - const radius = 20; - const sides = 16; - const polygon = []; - - for (let i = 0; i < sides; i++) { - const angle = (i / sides) * Math.PI * 2; - polygon.push([ - cx + Math.cos(angle) * radius, - cy + Math.sin(angle) * radius, - ]); - } - - scatterplot.lassoSelect(polygon); - }) -); - -// Button 3: Select center rectangle -buttonContainer.appendChild( - createButton('▭ Center', () => { - scatterplot.lassoSelect([ - [30, 30], - [70, 30], - [70, 70], - [30, 70], - ]); - }) -); - -// Button 4: Add diagonal stripe (merge) -buttonContainer.appendChild( - createButton('+ Diagonal (Merge)', () => { - scatterplot.lassoSelect( - [ - [0, 40], - [60, 100], - [70, 100], - [10, 40], - ], - { merge: true } - ); - }) -); - -// Button 5: Remove center square -buttonContainer.appendChild( - createButton('− Center (Remove)', () => { - scatterplot.lassoSelect( - [ - [40, 40], - [60, 40], - [60, 60], - [40, 60], - ], - { remove: true } - ); - }) -); - -// Button 6: Star shape -buttonContainer.appendChild( - createButton('★ Star', () => { - const cx = 50; - const cy = 50; - const outerRadius = 30; - const innerRadius = 15; - const points = 5; - const polygon = []; - - for (let i = 0; i < points * 2; i++) { - const angle = (i / (points * 2)) * Math.PI * 2 - Math.PI / 2; - const radius = i % 2 === 0 ? outerRadius : innerRadius; - polygon.push([ - cx + Math.cos(angle) * radius, - cy + Math.sin(angle) * radius, - ]); - } - - scatterplot.lassoSelect(polygon); - }) -); - -// Button 7: Deselect all (wide button) -buttonContainer.appendChild( - createButton('✕ Deselect All', () => { - scatterplot.deselect(); - }, true) -); - -setNumPoints(numPoints); diff --git a/example/size-encoding.js b/example/size-encoding.js deleted file mode 100644 index 480c2987..00000000 --- a/example/size-encoding.js +++ /dev/null @@ -1,133 +0,0 @@ -import { scaleLog } from 'd3-scale'; -import { randomExponential } from 'd3-random'; - -import createScatterplot from '../src'; -import createMenu from './menu'; -import { checkSupport } from './utils'; - -const canvas = document.querySelector('#canvas'); - -let points = []; -let numPoints = 100000; -let pointSize = 2; -let opacity = 1.0; -let selection = []; - -const lassoMinDelay = 10; -const lassoMinDist = 2; -const showReticle = true; -const reticleColor = [1, 1, 0.878431373, 0.33]; - -const selectHandler = ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints); - selection = selectedPoints; - if (selection.length === 1) { - const point = points[selection[0]]; - console.log( - `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}` - ); - } -}; - -const deselectHandler = () => { - console.log('Deselected:', selection); - selection = []; -}; - -const scatterplot = createScatterplot({ - canvas, - lassoMinDelay, - lassoMinDist, - pointSize, - opacity, - showReticle, - reticleColor, - lassoInitiator: true, - opacityInactiveScale: 0.66, -}); - -checkSupport(scatterplot); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', selectHandler); -scatterplot.subscribe('deselect', deselectHandler); - -const rndA = randomExponential(2); -const rndB = randomExponential(4); -const rndC = randomExponential(5); - -const generatePoints = (num) => { - const newPoints = [ - ...new Array(Math.round((num * 2) / 12)).fill().map(() => [ - -1 + (Math.random() * 2 * 1) / 3, // x - -1 + Math.random() * 2, // y - 0, // category - rndA(), // value - ]), - ...new Array(Math.round((num * 4) / 12)).fill().map(() => [ - -1 + 2 / 3 + (Math.random() * 2 * 1) / 3, // x - -1 + Math.random() * 2, // y - 1, // category - rndB(), // value - ]), - ...new Array(Math.round((num * 6) / 12)).fill().map(() => [ - -1 + 4 / 3 + (Math.random() * 2 * 1) / 3, // x - -1 + Math.random() * 2, // y - 2, // category - rndC(), // value - ]), - ]; - - const [minVal, maxVal] = newPoints.reduce( - ([min, max], point) => [Math.min(min, point[3]), Math.max(max, point[3])], - [Infinity, -Infinity] - ); - - const valRange = maxVal - minVal; - - newPoints.forEach((point) => { - point[3] = (point[3] - minVal) / valRange; - }); - - return newPoints; -}; - -const setNumPoints = (newNumPoints) => { - points = generatePoints(newNumPoints); - scatterplot.draw(points); -}; - -const getPointSizeRange = (basePointSize) => { - const pointSizeScale = scaleLog() - .domain([1, 10]) - .range([basePointSize, basePointSize * 10]); - - return Array.from( - { length: 100 }, (_, i) => pointSizeScale(1 + (i / 99) * 9) - ); -}; - -const setPointSize = (newPointSize) => { - scatterplot.set({ pointSize: getPointSizeRange(newPointSize) }); -}; - -const getOpacityRange = (baseOpacity) => - Array.from({ length: 10 }, (_, i) => ((i + 1) / 10) * baseOpacity); - -const setOpacity = (newOpacity) => { - scatterplot.set({ opacity: getOpacityRange(newOpacity) }); -}; - -createMenu({ scatterplot, setNumPoints, setPointSize, setOpacity }); - -scatterplot.set({ - colorBy: 'category', - pointColor: ['#ff80cb', '#57c7ff', '#eee462'], - sizeBy: 'w', - opacityBy: 'w', -}); - -setPointSize(pointSize); -setOpacity(opacity); -setNumPoints(numPoints); diff --git a/example/text-labels.js b/example/text-labels.js deleted file mode 100644 index 7d133fb1..00000000 --- a/example/text-labels.js +++ /dev/null @@ -1,155 +0,0 @@ -import { scaleLinear, scaleLog } from 'd3-scale'; - -import createScatterplot from '../src'; -import createMenu from './menu'; -import { checkSupport } from './utils'; - -const canvas = document.querySelector('#canvas'); -const canvasWrapper = document.querySelector('#canvas-wrapper'); - -const noteEl = document.createElement('div'); -noteEl.id = 'note'; -noteEl.textContent = 'Zoom in to see labels!'; -canvasWrapper.appendChild(noteEl); - -const textOverlayEl = document.createElement('canvas'); -textOverlayEl.id = '#text-overlay'; -textOverlayEl.style.position = 'absolute'; -textOverlayEl.style.top = 0; -textOverlayEl.style.right = 0; -textOverlayEl.style.bottom = 0; -textOverlayEl.style.left = 0; -textOverlayEl.style.pointerEvents = 'none'; - -canvasWrapper.appendChild(textOverlayEl); - -const resizeTextOverlay = () => { - const { width, height } = canvasWrapper.getBoundingClientRect(); - textOverlayEl.width = width * window.devicePixelRatio; - textOverlayEl.height = height * window.devicePixelRatio; - textOverlayEl.style.width = `${width}px`; - textOverlayEl.style.height = `${height}px`; -}; -resizeTextOverlay(); - -window.addEventListener('resize', resizeTextOverlay); - -const overlayFontSize = 12; -const textOverlayCtx = textOverlayEl.getContext('2d'); -textOverlayCtx.font = `${ - overlayFontSize * window.devicePixelRatio -}px sans-serif`; -textOverlayCtx.textAlign = 'center'; - -let points = []; -let numPoints = 10000; -let pointSize = 4; -let opacity = 1.0; -let selection = []; - -const maxPointLabels = 200; -const lassoMinDelay = 10; -const lassoMinDist = 2; -const showReticle = true; -const reticleColor = [1, 1, 0.878431373, 0.33]; - -const scatterplot = createScatterplot({ - canvas, - lassoMinDelay, - lassoMinDist, - pointSize, - opacity, - showReticle, - reticleColor, - xScale: scaleLinear().domain([-1, 1]), - yScale: scaleLinear().domain([-1, 1]), - pointColor: '#fff', - opacityBy: 'density', - lassoInitiator: true, -}); - -checkSupport(scatterplot); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints); - selection = selectedPoints; - if (selection.length === 1) { - const point = points[selection[0]]; - console.log( - `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}` - ); - } -}); - -scatterplot.subscribe('deselect', () => { - selection = []; -}); - -const showPointLabels = (pointsInView, xScale, yScale) => { - textOverlayCtx.clearRect(0, 0, textOverlayEl.width, textOverlayEl.height); - textOverlayCtx.fillStyle = 'rgb(255, 255, 255)'; - - const dpr = window.devicePixelRatio; - - for (let i = 0; i < pointsInView.length; i++) { - const [x, y] = points[pointsInView[i]]; - textOverlayCtx.fillText( - pointsInView[i], - xScale(x) * dpr, - yScale(y) * dpr - overlayFontSize * 1.2 * dpr - ); - } -}; - -const hidePointLabels = () => { - textOverlayCtx.clearRect(0, 0, canvas.width, canvas.height); -}; - -scatterplot.subscribe('drawing', ({ xScale, yScale }) => { - const pointsInView = scatterplot.get('pointsInView'); - if (pointsInView.length <= maxPointLabels) { - showPointLabels(pointsInView, xScale, yScale); - } else { - hidePointLabels(); - } -}); - -const generatePoints = (num) => - Array.from({ length: num }, () => [ - -1 + Math.random() * 2, - -1 + Math.random() * 2, - ]); - -const setNumPoints = (newNumPoints) => { - points = generatePoints(newNumPoints); - scatterplot.draw(points); -}; - -const getPointSizeRange = (basePointSize) => { - const pointSizeScale = scaleLog() - .domain([1, 10]) - .range([basePointSize, basePointSize * 10]); - - return Array.from( - { length: 100 }, (_, i) => pointSizeScale(1 + (i / 99) * 9) - ); -}; - -const setPointSize = (newPointSize) => { - scatterplot.set({ pointSize: getPointSizeRange(newPointSize) }); -}; - -const getOpacityRange = (baseOpacity) => - Array.from({ length: 10 }, (_, i) => ((i + 1) / 10) * baseOpacity); - -const setOpacity = (newOpacity) => { - scatterplot.set({ opacity: getOpacityRange(newOpacity) }); -}; - -createMenu({ scatterplot, setNumPoints, setPointSize }); - -setPointSize(pointSize); -setOpacity(opacity); -setNumPoints(numPoints); diff --git a/example/texture-background.js b/example/texture-background.js deleted file mode 100644 index c21675bf..00000000 --- a/example/texture-background.js +++ /dev/null @@ -1,67 +0,0 @@ -import createScatterplot from '../src'; -import createMenu from './menu'; -import { checkSupport } from './utils'; - -const canvas = document.querySelector('#canvas'); - -const { width, height } = canvas.getBoundingClientRect(); - -let points = []; -let numPoints = 100000; -let pointSize = 3; -let opacity = 1; -let selection = []; - -const selectHandler = ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints); - selection = selectedPoints; - if (selection.length === 1) { - const point = points[selection[0]]; - console.log( - `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}` - ); - } -}; - -const deselectHandler = () => { - console.log('Deselected:', selection); - selection = []; -}; - -const scatterplot = createScatterplot({ - canvas, - pointSize, - opacity, - showReticle: true, - backgroundImage: `https://picsum.photos/${Math.min(640, width)}/${Math.min( - 640, - height - )}/?random`, - lassoInitiator: true, -}); - -checkSupport(scatterplot); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', selectHandler); -scatterplot.subscribe('deselect', deselectHandler); - -const generatePoints = (num) => - new Array(num).fill().map(() => [ - -1 + Math.random() * 2, // x - -1 + Math.random() * 2, // y - Math.round(Math.random()), // category - Math.random(), // value - ]); - -const setNumPoints = (newNumPoints) => { - points = generatePoints(newNumPoints); - scatterplot.draw(points); -}; - -createMenu({ scatterplot, setNumPoints }); - -scatterplot.set({ colorBy: 'category', pointColor: ['#3a78aa', '#aa3a99'] }); - -setNumPoints(numPoints); diff --git a/example/transition-old.js b/example/transition-old.js deleted file mode 100644 index f087b872..00000000 --- a/example/transition-old.js +++ /dev/null @@ -1,184 +0,0 @@ -/* eslint no-console: 0 */ - -import createScatterplot from '../src'; -import { saveAsPng, checkSupport } from './utils'; - -const canvas = document.querySelector('#canvas'); -const numPointsEl = document.querySelector('#num-points'); -const numPointsValEl = document.querySelector('#num-points-value'); -const pointSizeEl = document.querySelector('#point-size'); -const pointSizeValEl = document.querySelector('#point-size-value'); -const opacityEl = document.querySelector('#opacity'); -const opacityValEl = document.querySelector('#opacity-value'); -const clickLassoInitiatorEl = document.querySelector('#click-lasso-initiator'); -const resetEl = document.querySelector('#reset'); -const exportEl = document.querySelector('#export'); -const exampleEl = document.querySelector('#example-transition'); - -exampleEl.setAttribute('class', 'active'); -exampleEl.removeAttribute('href'); - -let points = []; -let pointStates = []; -let numPoints = 100000; -let pointSize = 2; -let opacity = 0.33; -let selection = []; - -const lassoMinDelay = 10; -const lassoMinDist = 2; -const showReticle = true; -const reticleColor = [1, 1, 0.878431373, 0.33]; - -const selectHandler = ({ points: selectedPoints }) => { - console.log('Selected:', selectedPoints); - selection = selectedPoints; - if (selection.length === 1) { - const point = points[selection[0]]; - console.log( - `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}` - ); - } -}; - -const deselectHandler = () => { - console.log('Deselected:', selection); - selection = []; -}; - -const scatterplot = createScatterplot({ - canvas, - lassoMinDelay, - lassoMinDist, - pointSize, - showReticle, - reticleColor, - lassoInitiator: true, -}); - -checkSupport(scatterplot); - -exportEl.addEventListener('click', () => saveAsPng(scatterplot)); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -scatterplot.subscribe('select', selectHandler); -scatterplot.subscribe('deselect', deselectHandler); - -const generatePoints = (num) => [ - ...new Array(Math.round(num / 2)).fill().map(() => [ - -1 + Math.random(), // x - -1 + (Math.random() * 2) / 3, // y - 0, // category - Math.random() * 0.33, // value - ]), - ...new Array(Math.round(num / 2)).fill().map(() => [ - Math.random(), // x - -1 + Math.random() * 2, // y - 1, // category - 0.66 + Math.random() * 0.33, // value - ]), -]; - -const setNumPoint = (newNumPoints) => { - numPoints = newNumPoints; - numPointsEl.value = numPoints; - numPointsValEl.innerHTML = numPoints; - points = generatePoints(numPoints); - pointStates = [ - points, - points.map(([x, y, c, v], j) => - j < points.length / 2 - ? [x, (y + 1) * 3 - 1, c, v + 0.66] - : [x, (y + 1) / 3 - 1, c, v - 0.66] - ), - ]; - scatterplot.draw(points); -}; - -const numPointsInputHandler = (event) => { - numPointsValEl.innerHTML = `${+event.target - .value} release to redraw`; -}; - -numPointsEl.addEventListener('input', numPointsInputHandler); - -const numPointsChangeHandler = (event) => setNumPoint(+event.target.value); - -numPointsEl.addEventListener('change', numPointsChangeHandler); - -const setPointSize = (newPointSize) => { - pointSize = newPointSize; - pointSizeEl.value = pointSize; - pointSizeValEl.innerHTML = pointSize; - scatterplot.set({ pointSize }); -}; - -const pointSizeInputHandler = (event) => setPointSize(+event.target.value); - -pointSizeEl.addEventListener('input', pointSizeInputHandler); - -const setOpacity = (newOpacity) => { - opacity = newOpacity; - opacityEl.value = opacity; - opacityValEl.innerHTML = opacity; - scatterplot.set({ opacity }); -}; - -const opacityInputHandler = (event) => setOpacity(+event.target.value); - -opacityEl.addEventListener('input', opacityInputHandler); - -const clickLassoInitiatorChangeHandler = (event) => { - scatterplot.set({ - lassoInitiator: event.target.checked, - }); -}; - -clickLassoInitiatorEl.addEventListener( - 'change', - clickLassoInitiatorChangeHandler -); -clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator'); - -const resetClickHandler = () => { - scatterplot.reset(); -}; - -resetEl.addEventListener('click', resetClickHandler); - -const colorsCat = ['#3a78aa', '#aa3a99']; -scatterplot.set({ colorBy: 'category', pointColor: colorsCat }); - -const colorsScale = [ - '#ff80cb', // bright pink - '#df80b8', - '#bf80a5', - '#9f8092', - '#808080', - '#75919f', - '#6ba3bf', - '#61b5df', - '#57c7ff', // bright blue -]; -scatterplot.set({ colorBy: 'value', pointColor: colorsScale }); - -setPointSize(pointSize); -setOpacity(opacity); -setNumPoint(numPoints); - -let i = 0; -const transitionPoints = () => { - i++; - scatterplot - .draw(pointStates[i % pointStates.length], { - transition: true, - transitionDuration: 1000 - ((i - 1) % 5) * 150, - transitionEasing: 'quadInOut', - }) - .then(() => { - setTimeout(transitionPoints, +!(i % 5) * 3000); - }); -}; - -transitionPoints(); diff --git a/example/transition.js b/example/transition.js deleted file mode 100644 index 107aed76..00000000 --- a/example/transition.js +++ /dev/null @@ -1,111 +0,0 @@ -import { tableFromIPC } from 'apache-arrow'; - -import createScatterplot from '../src'; -import createMenu from './menu'; -import { checkSupport, showModal, closeModal } from './utils'; - -const CLASS_COLORS = [ - '#FFFF00', // bright yellow - '#1CFFD9', // turrtoise - '#FF34FF', // pink/purple - '#FF4A46', // pale red - '#008941', // forrest green - '#1966FF', // dark blue - '#C00069', // violette - '#FFDBE5', // almost white - '#FF9900', // yellow - '#8148D5', // grass green -]; - -/** - * Load Embedding Example - */ -const whenData = fetch( - 'https://storage.googleapis.com/flekschas/regl-scatterplot/cities.arrow' -); - -/** - * Modal - */ -showModal('Loading...'); - -/** - * Add info to footer - */ -const footer = document.querySelector('#footer'); -footer.classList.remove('hidden'); -const infoContent = document.querySelector('#info-content'); -infoContent.innerHTML = ` -GeoNames – Cities Dataset visualized in three: by the cities' geographic location, by the total population across contintents, and by the citie's latitude distribution.
-`; - -const canvas = document.querySelector('#canvas'); - -let pointSize = 1.5; - -const scatterplot = createScatterplot({ - canvas, - pointSize, - lassoOnLongPress: true, -}); - -checkSupport(scatterplot); - -console.log(`Scatterplot v${scatterplot.get('version')}`); - -createMenu({ scatterplot, opacityChangesDisabled: true }); - -whenData - .then((data) => tableFromIPC(data)) - .then((table) => { - closeModal(); - const columnValues = table.data[0].children.map((data) => data.values); - - const population = columnValues[columnValues.length - 2]; - const continents = columnValues[columnValues.length - 1]; - - const staticOpacity = new Float32Array(population.length); - for (let i = 0; i < population.length; i++) { - staticOpacity[i] = 1; - } - - scatterplot.draw({ - x: columnValues[0], - y: columnValues[1], - z: continents, - w: population, - }); - scatterplot.set({ - colorBy: 'z', - pointColor: CLASS_COLORS, - opacityBy: 'w', - opacity: Array.from({ length: 10 }, (_, i) => 0.33 + (i / 9) * 0.33), - }); - - let i = 0; - const transitionPoints = () => { - i++; - - const startCol = (i % 3) * 2; - - scatterplot - .draw( - { - x: columnValues[startCol], - y: columnValues[startCol + 1], - z: continents, - w: [population, staticOpacity, staticOpacity][i % 3], - }, - { - transition: true, - transitionDuration: 750, - transitionEasing: 'quadInOut', - } - ) - .then(() => { - setTimeout(transitionPoints, 2500); - }); - }; - - setTimeout(transitionPoints, 2500); - }); diff --git a/example/tweakpane-link-plugin.js b/example/tweakpane-link-plugin.js deleted file mode 100644 index b82db44a..00000000 --- a/example/tweakpane-link-plugin.js +++ /dev/null @@ -1,136 +0,0 @@ -import { - bindValue, - createPlugin, - parseRecord, - BladeApi, - BladeController, - ValueMap -} from '@tweakpane/core'; - -class LinkController extends BladeController { - constructor(doc, config) { - super({ - ...config, - view: new LinkView(doc, { - props: config.props, - viewProps: config.viewProps, - }), - }); - } -} - -class LinkView { - constructor(doc, { props, viewProps }) { - // Create view elements - this.element = doc.createElement('div'); - this.element.classList.add('tp-link'); - viewProps.bindClassModifiers(this.element); - - // Create an `a` element for user interaction - const linkElement = doc.createElement('a'); - viewProps.bindDisabled(linkElement); - - function setLink(link) { - linkElement.href = link ?? ''; - } - - function setLabel(label) { - linkElement.textContent = label ?? ''; - } - - function setActive(active) { - if (active) { - linkElement.classList.add('active'); - linkElement.removeAttribute('href'); - linkElement.removeAttribute('target'); - } else { - linkElement.classList.remove('active'); - setLink(props.get('link')); - setNewPage(props.get('newPage')); - } - } - - function setNewPage(newPage) { - if (newPage) { - linkElement.target = '_blank'; - } else { - linkElement.removeAttribute('target'); - } - } - - bindValue(props.value('link'), setLink); - bindValue(props.value('label'), setLabel); - bindValue(props.value('active'), setActive); - bindValue(props.value('newPage'), setNewPage); - - this.element.appendChild(linkElement); - this.linkElement = linkElement; - } -} - -class LinkApi extends BladeApi { - get label() { - return this.controller.props.get('label') ?? ''; - } - - set label(label) { - this.controller.props.set('label', label); - } - - get link() { - return this.controller.props.get('link'); - } - - set link(link) { - this.controller.props.set('link', link); - } - - get active() { - return this.controller.props.get('active'); - } - - set active(active) { - this.controller.props.set('active', Boolean(active)); - } - - get newPage() { - return this.controller.props.get('newPage'); - } - - set newPage(newPage) { - this.controller.props.set('newPage', Boolean(newPage)); - } -} - -export const LinkPlugin = createPlugin({ - id: 'link', - type: 'blade', - accept(params) { - const result = parseRecord(params, (p) => ({ - view: p.required.constant('link'), - link: p.required.string, - label: p.required.string, - active: p.optional.boolean, - newPage: p.optional.boolean, - })); - return result ? { params: result } : null; - }, - controller(args) { - return new LinkController(args.document, { - blade: args.blade, - props: ValueMap.fromObject({ - label: args.params.label, - link: args.params.link, - active: args.params.active, - newPage: args.params.newPage, - }), - viewProps: args.viewProps, - }); - }, - api(args) { - if (!(args.controller instanceof LinkController)) { - return null; - } - return new LinkApi(args.controller); - }, -}); diff --git a/example/utils.js b/example/utils.js deleted file mode 100644 index 14fdaef6..00000000 --- a/example/utils.js +++ /dev/null @@ -1,62 +0,0 @@ -export function downloadBlob(blob, name = 'file.txt') { - const link = document.createElement('a'); - link.href = URL.createObjectURL(blob); - link.download = name; - - document.body.appendChild(link); - - link.dispatchEvent( - new MouseEvent('click', { - bubbles: true, - cancelable: true, - view: window, - }) - ); - - document.body.removeChild(link); -} - -export function saveAsPng(scatterplot) { - const imageObject = new Image(); - imageObject.onload = () => { - scatterplot.get('canvas').toBlob((blob) => { - downloadBlob(blob, 'regl-scatterplot.png'); - }); - }; - imageObject.src = scatterplot.get('canvas').toDataURL(); -} - -export function closeModal() { - const modal = document.querySelector('#modal'); - const modalText = document.querySelector('#modal-text'); - modal.style.display = 'none'; - modalText.textContent = ''; -} - -export function showModal(text, isError, isClosable) { - const modal = document.querySelector('#modal'); - modal.style.display = 'flex'; - - const modalText = document.querySelector('#modal-text'); - modalText.style.color = isError ? '#cc79A7' : '#bbb'; - modalText.textContent = text; - - const modalClose = document.querySelector('#modal-close'); - if (isClosable) { - modalClose.style.display = 'block'; - modalClose.style.background = isError ? '#cc79A7' : '#bbb'; - modalClose.addEventListener('click', closeModal, { once: true }); - } else { - modalClose.style.display = 'none'; - } -} - -export function checkSupport(scatterplot) { - if (!scatterplot.isSupported) { - showModal( - 'Your browser does not support all necessary WebGL features. The scatter plot might not render properly.', - true, - true - ); - } -} diff --git a/public/favicon.png b/favicon.png similarity index 100% rename from public/favicon.png rename to favicon.png diff --git a/public/index.html b/index.html similarity index 96% rename from public/index.html rename to index.html index dccce48a..5fe658d6 100644 --- a/public/index.html +++ b/index.html @@ -11,7 +11,7 @@ /> - + + + + @@ -437,5 +440,5 @@