2e:null 2f:["$","title",null,{"children":"Hello regl-scatterplot | Radamés Ajna | Observable"}] 34: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 35:[] 32:{"id":"b6a761c1b71b914a","slug":"hello-regl-scatterplot","title":"Hello regl-scatterplot","thumbnail":"e604ae5f1dfb2119631b74040c8f6a5a5e5fba5d98f9cb37056c3724a487c2d0","access_level":"public","create_time":"$D2021-07-13T20:47:10.604Z","update_time":"$D2021-07-14T21:37:23.118Z","view_time":null,"first_public_time":"$D2021-07-14T07:48:46.160Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":880,"publish_version":880,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"e875b7cb2b4040c3","slug":"scatter-plots","title":"Scatter Plots","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"title":"Hello regl-scatterplot","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"md`### ${n_points} points\nYou can pan, zoom, rotate (alt + drag), lasso (shift + drag) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"n_points = 200000 // you can go over millions here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`a scatterplot from your selection `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"createScatterplot = require(\"regl-scatterplot\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"