Volumetric cube plots

The following examples show how to use cubes.

The first simple example shows the basic usage of cubes. The first example shows 2 by 2 by 2 cubes and each cube is assigned a color. The opacity is set to 0.05 (and can be changed using the context menu).

kontrast.addEventListener('load', function () {
  let xCount = 2
  let yCount = 2
  let zCount = 2

let figure = kontrast.createFigure({
    element: 'figure-simple',
  })
  let graph = figure.createGraph({
    abscissae: { x: { yOrigin: -1, zOrigin: -1, min: -1, max: 2 } },
    ordinates: { y: { xOrigin: -1, zOrigin: -1, min: -1, max: 2 } },
    applicates: { z: { xOrigin: -1, yOrigin: -1, min: -1, max: 2 } },
    colorAxes: {
      c: {
        min: 0,
        max: xCount * yCount * zCount,
        color0: 'red',
        color1: 'blue',
        color2: 'white',
        stop1: 0.5,
        zone: 'right',
        lineThickness: 6,
        lineLength: 1,
      },
    },
    // angles of graph
    alpha: -0.3,
    beta: 1,
    gamma: 0,

cubeScale: 1 / Math.sqrt(3),
    interactionMode: 'rotate',
    allowShift: false,
    allowZoom: false,
    aspectRatio: 1,
  })

// Main part to create a cube plot.
  graph.createCubes({
    opacity: 0.05,
    data: {
      x: { type: 'width', start: 0, end: 1, count: xCount },
      y: { type: 'height', start: 0, end: 1, count: yCount },
      z: { type: 'depth', start: 0, end: 1, count: zCount },
      c: colorData,
    },
  })
})

The second example is more practical, showing 128 by 128 by 128 cubes. The color varies with $x$ while the opacity is determined from a simple test whether or not a cube lies within a sphere (see source code of this file for details).