Skip to content
187WEB NATASHA technical blueprint — coordinate grid map of the mascot geometry

187VIZ skill

187VIZ — 3D network / node-edge data visualization.

Turns network and spatial data into 3D graphs and stories people can explore with clear interaction labels.

← Back to all skills/187 reference

Viz lab

4 live visualization systems

Every 187VIZ pattern as a real, GPU-drawn demo — an additive glowing orb field, a pointer-rippled point cloud, a rhythmic column visualizer, and a proximity-reactive pixel grid. Canvas/2D for cross-device resilience; each honours prefers-reduced-motion and only runs while visible.

Live

Glowing Orb Field

/187fiberorb

Additively-blended radial-gradient orbs drift and pulse — the physical-material glow of the WebGL sphere field.

Hover

Interactive Point Cloud

/187pointcloudocean

A field of points ripples on a sine sea; the pointer pushes a depth wave through the grid (50k in the real Three.js build).

Live

Rhythmic Column Visualizer

/187gridvisual

Vertical bars scaleY on a sine wave rippling out from centre — stagger + sine.inOut, continuous.

Hover

Proximity Pixel Grid

/187pixelgrid

Each cell's distance to the pointer (gsap.utils.distance) maps to scale + brightness, quickTo-smoothed.

Triggers

How to invoke 187VIZ

Trigger
/187viz
187VIZ
viz
network viz
node graph
3d data viz
force layout
spatial data story
graph visualization

Use cases

When to route to 187VIZ

Build a 3D network or node-edge graph

Animate data updates and selection states

Create spatial data stories with camera guidance

Add keyboard and screen-reader friendly selection

Output contract

What 187VIZ delivers

  1. 1Data schema and source plan
  2. 2Layout algorithm choice
  3. 3Interaction plan (hover, select, filter)
  4. 4Render performance notes
  5. 5Next actions

Routing

When to hand off to another skill

Route toWhen
187MODELnodes need detailed 3D product/model representations
187SCROLLthe visualization is part of a scroll narrative
187ACCESS+the graph needs screen-reader or keyboard navigation

Templates

Artifacts 187VIZ produces

TemplateWhen to use
network-viz-spec.mdA node-edge network visualization
data-storyboard.mdA spatial data story