Enable lasso initiator for all demos. Add demo to simulate embedding

Author: flekschas

example/axes.js

@@ -85,6 +85,7 @@ const scatterplot = createScatterplot({
   xScale,
   yScale,
   showReticle: true,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -181,6 +182,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/connected-points-by-segments.js

@@ -61,6 +61,7 @@ const scatterplot = createScatterplot({
   showPointConnections,
   pointConnectionColor,
   pointConnectionSize,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -150,6 +151,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/connected-points.js

@@ -59,6 +59,7 @@ const scatterplot = createScatterplot({
   showPointConnections,
   pointConnectionColor,
   pointConnectionSize,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -148,6 +149,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/dynamic-opacity.js

@@ -54,6 +54,7 @@ const scatterplot = createScatterplot({
   opacityBy: 'density',
   showReticle,
   reticleColor,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -194,6 +195,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/embedded.js

@@ -0,0 +1,133 @@
+/* eslint no-console: 0 */
+
+import createScatterplot from '../src';
+import { saveAsPng } 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-basic');
+
+const canvasWrapper = canvas.parentNode;
+canvasWrapper.style.padding = '15rem 0';
+canvasWrapper.style.height = '100vh';
+canvasWrapper.parentNode.style.overflow = 'auto';
+
+exampleEl.setAttribute('class', 'active');
+exampleEl.removeAttribute('href');
+
+let points = [];
+let numPoints = 100000;
+let pointSize = 4;
+let opacity = 0.33;
+let selection = [];
+
+const reticleColor = [1, 1, 0.878431373, 0.33];
+
+const selectHandler = ({ points: selectedPoints }) => {
+  selection = selectedPoints;
+  if (selection.length === 1) {
+    const point = points[selection[0]];
+    console.log(
+      `Selected: ${selectedPoints}`,
+      `X: ${point[0]}\nY: ${point[1]}\nCategory: ${point[2]}\nValue: ${point[3]}`
+    );
+  }
+};
+
+const deselectHandler = () => {
+  selection = [];
+};
+
+const scatterplot = createScatterplot({
+  canvas,
+  pointSize,
+  showReticle: true,
+  reticleColor,
+  lassoInitiator: true,
+});
+
+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(num).fill().map(() => [
+    -0.8 + Math.random() * 1.6, // x
+    -0.8 + Math.random() * 1.6, // y
+    Math.round(Math.random()), // category
+    Math.random(), // value
+  ]);
+
+const setNumPoint = (newNumPoints) => {
+  numPoints = newNumPoints;
+  numPointsEl.value = numPoints;
+  numPointsValEl.innerHTML = numPoints;
+  points = generatePoints(numPoints);
+  scatterplot.draw(points);
+};
+
+const numPointsInputHandler = (event) => {
+  numPointsValEl.innerHTML = `${+event.target
+    .value} <em>release to redraw</em>`;
+};
+
+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);
+
+setPointSize(pointSize);
+setOpacity(opacity);
+setNumPoint(numPoints);

example/index.js

@@ -69,6 +69,7 @@ const scatterplot = createScatterplot({
   pointSize,
   showReticle,
   reticleColor,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -139,6 +140,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/performance-mode.js

@@ -75,6 +75,7 @@ const scatterplot = createScatterplot({
   pointSize,
   showReticle: true,
   performanceMode: true,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -144,6 +145,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/size-encoding.js

@@ -55,6 +55,8 @@ const scatterplot = createScatterplot({
   pointSize,
   showReticle,
   reticleColor,
+  lassoInitiator: true,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -170,6 +172,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/texture-background.js

@@ -50,6 +50,7 @@ const scatterplot = createScatterplot({
     640,
     height
   )}/?random`,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -118,6 +119,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();

example/transition.js

@@ -53,6 +53,7 @@ const scatterplot = createScatterplot({
   pointSize,
   showReticle,
   reticleColor,
+  lassoInitiator: true,
 });
 
 exportEl.addEventListener('click', () => saveAsPng(scatterplot));
@@ -136,6 +137,7 @@ clickLassoInitiatorEl.addEventListener(
   'change',
   clickLassoInitiatorChangeHandler
 );
+clickLassoInitiatorEl.checked = scatterplot.get('lassoInitiator');
 
 const resetClickHandler = () => {
   scatterplot.reset();