1 viewer
Back to Components
Component · Visualization

Heightfield

Scrolling grid surface with per-axis semantics (x=scroll, z=buckets, y=value) and a retained column window.

Category
Visualization
Slots
2
States
0
Writer
Legacy
cre8.primitive.heightfield

Preview

Live renderLegacy writer: Scene, Camera, Heightfield, Series3D

Heightfield Surface Topology

Heightfield Surface Topology Depth / Intensity by Time (Epoch) × Frequency / Price 7.5
t0 · Tier 1 · volume 1.2t0 · Tier 2 · volume 2.5t1 · Tier 1 · volume 2t0 · Tier 3 · volume 3.8t1 · Tier 2 · volume 3.2t2 · Tier 1 · volume 1.8t0 · Tier 4 · volume 5t1 · Tier 3 · volume 4.5t2 · Tier 2 · volume 2.8t3 · Tier 1 · volume 3t1 · Tier 4 · volume 6.2t2 · Tier 3 · volume 4t3 · Tier 2 · volume 4.2t4 · Tier 1 · volume 2.5t2 · Tier 4 · volume 5.5t3 · Tier 3 · volume 5.8t4 · Tier 2 · volume 3.8t3 · Tier 4 · volume 7.5t4 · Tier 3 · volume 5t4 · Tier 4 · volume 6.8Depth / Intensity by Time (Epoch) × Frequency / Price
<Scene
  height={280}
  projection="isometric"
  title="Heightfield Surface Topology"
>
  <Camera focus="surface" mode="orbit" />
  <Heightfield
    id="surface_grid"
    scrollAxis="x"
    window={8}
    xAxis={{ label: "Time (Epoch)", semantic: "time" }}
    yAxis={{ label: "Depth / Intensity", semantic: "value" }}
    zAxis={{ label: "Frequency / Price", semantic: "bucket" }}
  >
    <Series3D
      buckets={["Tier 1", "Tier 2", "Tier 3", "Tier 4"]}
      columns={[
        [0, [1.2, 2.5, 3.8, 5.0]],
        [1, [2.0, 3.2, 4.5, 6.2]],
        [2, [1.8, 2.8, 4.0, 5.5]],
        [3, [3.0, 4.2, 5.8, 7.5]],
        [4, [2.5, 3.8, 5.0, 6.8]]
      ]}
      id="depth_bids"
      label="Bids Depth"
      valueLabel="volume"
      window={8}
    />
  </Heightfield>
</Scene>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-heightfield
axes.primitive-heightfield__axes
2 rows

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
No published states
Platforms
webnative
Recipes
unstyledruntime-console

Renderers

Legacy writer
Heightfield has no shared writer yet: the server renders it through its legacy path, which the WASM DOM does not share.

The example above still needs shared writers for: Scene, Camera, Heightfield, Series3D.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
nativenative-adapterexperimental
2 rows

Accessibility

Semantic structure must stay available without visual styling.

  • Expose meaningful names for interactive controls.
  • Keep keyboard and pointer behavior equivalent where the platform supports it.
  • Publish state with native semantics and data attributes where the adapter supports them.