31:T527,# Hello regl-scatterplot I came across this very scalable 2D scatterplot library regl-scatterplot made with WebGL and Regl

Personal news: I like scatter plots! 🤓 If you do too and would like to plot millions of points, check out https://t.co/8gWNrL0YhC. It just hit v1! 🥳 The library supports pan&zoom, fast lasso selections, animated transitions & point connections. Demos: https://t.co/comJlau8dk pic.twitter.com/Z8dXySpZ3S
— Fritz Lekschas (@flekschas) July 13, 2021

And it performs better than d3fc-webgl 32:[] 2f:{"title":"Hello regl-scatterplot","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"md`### ${n_points} points\nYou can pan, zoom, rotate (alt + drag), lasso (shift + drag) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"n_points = 200000 // you can go over millions here","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"// create viweof scatter one\nviewof scatterOne = createScatterplotView({\n width,\n height,\n lassoInitiator: true,\n performanceMode: n_points >= 1000000 //enable if you plot millions of points\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`a scatterplot from your selection `","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"// create viweof scatter two\nviewof scatterTwo = createScatterplotView({\n width,\n height,\n performanceMode: n_points >= 1000000,\n lassoInitiator: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n // sets and draw points on scatterplot One\n scatterOne.set({\n colorBy: \"value\",\n cameraTarget: [0, 0],\n cameraDistance: 3,\n cameraRotation: 0,\n pointColor: points.map((_, i) =>\n d3.color(d3.interpolateTurbo((0.8 * i) / points.length)).hex()\n )\n });\n scatterOne.draw(points);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"{\n // sets and draw points on scatterplot two if there are selected points on scatterplot one\n if (scatterOne.selectedPoints.length) {\n // using geoBounds to get points boundingBox to center the camera target\n const boundingBox = d3.geoBounds({\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: scatterOne.selectedPoints.map((p) => [\n points[p][0],\n points[p][1]\n ])\n }\n }\n ]\n });\n // get middle box points coordinates as cameraTarget\n scatterTwo.draw(scatterOne.selectedPoints.map((p) => points[p]));\n\n scatterTwo.set({\n colorBy: \"value\",\n pointColor: points.map((_, i) =>\n d3.color(d3.interpolateTurbo(i / points.length)).hex()\n ),\n cameraTarget: [\n (boundingBox[1][0] + boundingBox[0][0]) / 2,\n (boundingBox[1][1] + boundingBox[0][1]) / 2\n ]\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"points = {\n const points = new Array(n_points).fill().map((_, i) => {\n const x = d3.randomNormal()();\n const y = d3.randomNormal()();\n return [x, y, i, Math.sqrt(x ** 2 + y ** 2)];\n });\n\n const extr = d3.extent(points, (d) => d[3]);\n\n return points.map((pt) => [\n pt[0],\n pt[1],\n pt[2],\n pt[3] / Math.sqrt(extr[0] ** 2 + extr[1] ** 2)\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"//simple helper to create a dynamic viewof scatterplot\nfunction createScatterplotView(opts = {}) {\n const canvas = html`

`;\n\n const xScale = d3.scaleLinear();\n const yScale = d3.scaleLinear();\n const scatterplot = createScatterplot.default({\n canvas: canvas,\n pointSize: 5,\n xScale,\n yScale,\n ...opts\n });\n\n canvas.value = { ...scatterplot, xScale, yScale };\n canvas.value.selectedPoints = [];\n canvas.value.camera = scatterplot.get(\"camera\");\n\n scatterplot.subscribe(\"view\", ({ camera }) => {\n canvas.value.camera = camera;\n // canvas.dispatchEvent(new Event(\"input\")); //this generates a crazy infinity loop:()\n });\n\n scatterplot.subscribe(\"select\", ({ points }) => {\n console.log(\"select\");\n canvas.value.selectedPoints = points;\n canvas.dispatchEvent(new Event(\"input\"));\n });\n\n invalidation.then(() => scatterplot.destroy());\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"createScatterplot = require(\"regl-scatterplot\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}