30:T6a5,The first parameter should be an array of point {x,y,z} objects. A second options object can be used to customise the plot as follows: * **`w`** : Width of the plot in pixels (_default:_ `640`) * **`h`** : Height of the plot in pixels (_default:_ `400`) * **`upAxis`**: The axis that points upwards in the initial view (_default:_ `"y"`) * **`zoom`**: Initial camera zoom setting (_default:_ `1`) * **`background`** : Background colour of the plot area (_default:_ `0xffffff`) * **`fill`** : = Point colour (_default:_ `(d) => 0x5f89b5`), * **`radiusF`** : Point radius as a proportion of axis length (_default:_ `0.005`) * **`axisClr`** : Axis colour (_default:_ `0x000000`) * **`tickF`** : = Tick size as a proportion of axis length (_default:_ `0.01`) * **`fontSize`** : Tick label font size (_default:_ `128`) * **`axisLength`** : Explicit axis length or `null` to calculate from data (_default:_ `null`) * **`targetTicks`** : Approxomate target number of axis ticks (_default:_ `10`) * **`getX`** : = x-value accessor for point data (_default:_ `(d) => d.x`) * **`getY`** : = y-value accessor for point data (_default:_ `(d) => d.y`) * **`getZ`** : = z-value accessor for point data (_default:_ `(d) => d.z`) * **`msg`** : = Message to display in plot (_default:_ `"Drag to rotate · scroll to zoom"`) If the `fill` function is reactive (e.g. changing in response to a range slider), instead of providing it as an option, call `update(fillFn)`, providing the reactive fill function. That way, the current view is preserved and just the scatterplot sphere colours are updated on redraw. For example the following colours points according to their interactively selected distance from the origin:31:T156f,function plot3d(points, options = {}) { const { w = 640, h = 400, zoom = 1, background = 0xffffff, axisClr = 0x000000, radiusF = 0.005, tickF = 0.01, fontSize = 128, axisLength = null, targetTicks = 10, getX = (d) => d.x, getY = (d) => d.y, getZ = (d) => d.z, fill = (d) => 0x5f89b5, msg = "Drag to rotate · scroll to zoom", upAxis = "y" } = options; // --------------------- Data bounds const values = points.flatMap((d) => [getX(d), getY(d), getZ(d)]); const minData = Math.min(...values, 0); const maxData = Math.max(...values, 0); const span = maxData - minData || 1; const axisLen = axisLength ?? span * 1.05; // --------------------- Nice tick intervals const niceStep = (range, count) => { const raw = range / count; const exp = 10 ** Math.floor(Math.log10(raw)); const f = raw / exp; const nf = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10; return nf * exp; }; const step = niceStep(span, 2 * targetTicks); const start = Math.floor(minData / step) * step; const ticks = []; for (let t = start; t <= maxData; t += step) { ticks.push(Math.round(t * 1e6) / 1e6); } // ---------------------- Scene and lights const scene = new THREE.Scene(); scene.background = new THREE.Color(background); scene.add(new THREE.AmbientLight(0xffffff, 1.2)); const dirLight = new THREE.DirectionalLight(0xffffff, 0.8); dirLight.position.set(axisLen, axisLen, axisLen); scene.add(dirLight); // ---------------------- Tick label helper const labelCache = new Map(); const makeLabel = (txt) => { if (!labelCache.has(txt)) { const S = 256; const c = document.createElement("canvas"); c.width = c.height = S; const ctx = c.getContext("2d"); ctx.fillStyle = "#000"; ctx.font = `${fontSize}px sans-serif`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(txt, S / 2, S / 2); labelCache.set(txt, new THREE.CanvasTexture(c)); } const spr = new THREE.Sprite( new THREE.SpriteMaterial({ map: labelCache.get(txt) }) ); const s = tickF * axisLen * 2; spr.scale.set(s, s, 1); return spr; }; // ----------------------- Axis ticks and labels const matAxis = new THREE.LineBasicMaterial({ color: axisClr }); const tickSize = tickF * axisLen; for (const [dir, vec] of [ ["x", [1, 0, 0]], ["y", [0, 1, 0]], ["z", [0, 0, 1]] ]) { const A = new THREE.Vector3(...vec).multiplyScalar(minData); const B = new THREE.Vector3(...vec).multiplyScalar(maxData); const offDir = new THREE.Vector3(...vec) .cross(new THREE.Vector3(1, 1, 1)) .normalize(); const tickOffset = offDir.clone().multiplyScalar(tickSize); scene.add( new THREE.Line(new THREE.BufferGeometry().setFromPoints([A, B]), matAxis) ); for (const t of ticks) { const pos = new THREE.Vector3(...vec).multiplyScalar(t); scene.add( new THREE.Line( new THREE.BufferGeometry().setFromPoints([ pos, pos.clone().add(tickOffset) ]), matAxis ) ); const lbl = makeLabel(String(t)); lbl.position.copy(pos).add(tickOffset.clone().multiplyScalar(1.5)); scene.add(lbl); } const nameLbl = makeLabel(dir.toUpperCase()); nameLbl.position.copy( B.clone().add(offDir.clone().multiplyScalar(tickSize * 3)) ); scene.add(nameLbl); } // --------------------- Plot points const radius = radiusF * axisLen; const meshes = []; for (const d of points) { const [x, y, z] = [getX(d), getY(d), getZ(d)]; const matPt = new THREE.MeshPhongMaterial({ color: fill(d), specular: 0x444444, emissive: 0xcccccc, emissiveIntensity: 0.3 }); const sph = new THREE.Mesh(new THREE.SphereGeometry(radius, 16, 16), matPt); meshes.push({ mesh: sph, datum: d }); sph.position.set(x, y, z); scene.add(sph); } // --------------------- Camera, renderer and controls const cam = new THREE.PerspectiveCamera(35, w / h, 0.1, axisLen * 10); if (upAxis === "z") { cam.up.set(0, 0, 1); } else if (upAxis === "x") { cam.up.set(1, 0, 0); } else { cam.up.set(0, 1, 0); } cam.position.set(axisLen / zoom, axisLen / zoom, axisLen / zoom); cam.lookAt(0, 0, 0); const r = new THREE.WebGLRenderer({ antialias: true }); r.setSize(w, h); r.setPixelRatio(devicePixelRatio); const ctrls = new OrbitControls(cam, r.domElement); ctrls.addEventListener("change", () => r.render(scene, cam)); invalidation.then(() => { ctrls.dispose(); r.dispose(); }); // Initial render r.render(scene, cam); // --------------------- Render as HTML DOM node const container = html`

${r.domElement}

${msg}

`; // This function will update the colours of the scatterplot so can be called // reactively if the fill colour function changes without a complete reset of the scatterplot. const defaultFill = fill; container.update = (newFill = defaultFill) => { for (const { mesh, datum } of meshes) { mesh.material.color.set(newFill(datum)); } r.render(scene, cam); }; return container; }32:[] 2e:{"title":"3d Scatterplot","cells":[{"id":0,"value":"# 3d Scatterplot","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"A function for drawing simple 3d scatterplots. Data should be supplied as an array of objects with at least `x`, `y` and `z` elements (accessors for the thee dimensions can be customised if you have objects with differently named elements).\n\nTo use\n\n```javascript\nimport { plot3d } from \"@jwolondon/3d-scatterplot\"\n```\n\nHere's a simple example:","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"pts = {\n const rand = d3.randomNormal(0, 30);\n return Array.from({ length: 500 }, () => ({\n x: rand(),\n y: rand(),\n z: rand()\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"plot3d(pts, { w: 400 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"viewof dist = Inputs.range([0, 100], { label: \"Distance\", step: 1, value: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"scatter = plot3d(pts, { w: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"scatter.update((d) =>\n Math.hypot(d.x, d.y, d.z) < dist ? \"firebrick\" : \"white\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"_Import [three.js](https://threejs.org) and camera controls:_","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"THREE = import(\"https://cdn.jsdelivr.net/npm/three@0.178/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"OrbitControls = import(\n \"three@0.178/examples/jsm/controls/OrbitControls.js\"\n).then((d) => d.OrbitControls)","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"_The main plotting class:_","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}