sabrinamochi

@sabrinamochi·7 public vizzes

three.js

This example combines 2D map tiles with a 3D plane using Three.js and OpenLayers. It loads New York City basemap and label layers from a WMTS service, then wraps the rendered map canvas as a texture onto a PlaneGeometry. TrackballControls enable interactive camera rotation around the mapped plane. The scene renders via WebGL, with the map texture updating on each map postrender event.

Mar 23, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of yellow SVG face icons fills the page; each face is identical, consisting of a yellow background circle and a dark arc for a mouth. The code builds each face using React components, with the arc shape generated by d3's `arc` generator. It renders fifty faces via `d3.range` and `ReactDom.render` into an HTML container.

Mar 23, 2021

Loading thumbnail…

nyc map

This example displays three rotating three-dimensional cubes on a gray background, each spinning continuously around its x- and y-axes. Built with Three.js and rendered to a Canvas via WebGL, the scene uses a perspective camera and directional lighting to give the geometric shapes depth. The cubes are created with `THREE.BoxGeometry` and `MeshPhongMaterial`, and the animation loop uses `requestAnimationFrame` to update rotations over time.

Mar 23, 2021

Loading thumbnail…

three.js points

A cluster of red points, arranged as a sphere, rotates slowly in three-dimensional space against a gray background. The example demonstrates the basic use of Three.js with a WebGL renderer, constructing a sphere geometry with specified width and height segments. A directional light illuminates the points material, and the animation updates the rotation of the points object over time using `requestAnimationFrame`.

Mar 23, 2021

Loading thumbnail…

three.js

Three colored cubes rotate continuously in a gray 3D scene, each spinning on its X and Y axes at staggered speeds. The visualization uses Three.js with a WebGL renderer to draw the cubes, a PerspectiveCamera, DirectionalLight, and MeshPhongMaterial for shading. The animation loop increments rotation based on time, driven by requestAnimationFrame, with cubes positioned at different X coordinates.

Mar 23, 2021

Loading thumbnail…

load data with d3 and update with react

This example demonstrates a minimal React-based data loading flow, where a Web page displays either "Loading..." or "yay" based on whether asynchronous CSV data has been fetched. The React component uses `useState` to hold the loaded dataset and `useEffect` to call D3’s `csv()` method on a remote URL containing named CSS colors. Once the data arrives, React re-renders the paragraph, proving D3 and React can work together for data acquisition and UI updates. The page uses D3 v6 and React 16.9, with an SVG placeholder for a smiley face.

Mar 11, 2021

Loading thumbnail…

mouse follower

A smiley face drawn with SVG circles follows the mouse cursor across the full browser window. The example uses React’s `useState` and `useCallback` hooks to track mouse position on the `<svg>` element, updating the circle’s `cx` and `cy` attributes in response to `onMouseMove` events. Rendering is handled by ReactDOM, with the viewport dimensions determined by `window.innerWidth` and `window.innerHeight`. The code includes a static yellow smiley face in a commented block, but the active visualization shows only a single black circle.

Mar 11, 2021