Axes

An axis is a visual scale indicator meant to relate positions on a Cartesian plane to real-world data. Hypocube has two axis components: XAxis and YAxis which work the same way and accept the same props.

Usually, axes are used in conjunction with tick marks, which indicate landmark data points with a label. Hypocube uses two props to describe tick marks: tickPositions is the actual position of the ticks on the Cartesian scale, while getTickLabel is a function which derives the tick label from the position. In the following example, we are using both axes. Notice the different functions passed to getTickLabel.

<Chart height={300} view={[0, 0, 4, 1000]} gutter={[20, 20, 50, 50]}>
  <XAxis
    tickPositions={[0, 1, 2, 3, 4]}
    getTickLabel={(pos) => `#${pos + 1}`}
  />
  <YAxis tickPositions={[0, 500, 1000]} getTickLabel={(pos) => String(pos)} />
</Chart>
<Chart height={300} view={[0, 0, 4, 1000]} gutter={[20, 20, 50, 50]}>
  <XAxis
    tickPositions={[0, 1, 2, 3, 4]}
    getTickLabel={(pos) => `#${pos + 1}`}
  />
  <YAxis tickPositions={[0, 500, 1000]} getTickLabel={(pos) => String(pos)} />
</Chart>

Non-linear scales

What if we wish to plot the data on a log (or other non-linear) scale? It is important to note that Hypocube deals only with data on a Cartesian plane; to plot on a log scale, our scale is created differently. In this example, the endpoint of the y-axis is 3 (instead of 1000): the number of "logs". Of course, any data you plot needs to be similarly converted.

const data = [
  [0, 4],
  [1, 3],
  [2, 32],
  [3, 190],
  [4, 754],
];

return (
  <Chart height={300} view={[0, 0, 4, 3]} gutter={[20, 20, 50, 50]}>
    <XAxis
      tickPositions={[0, 1, 2, 3, 4]}
      getTickLabel={(pos) => `#${pos + 1}`}
    />
    <YAxis
      tickPositions={[0, 1, 2, 3]}
      getTickLabel={(pos) => String(Math.pow(10, pos))}
    />
    <LineSeries data={data.map(([x, y]) => [x, Math.log10(y)])} />
  </Chart>
);

Categorical scales

A special case of non-linear scales are categorical in which the position on the axis can be mapped based on its index. For example, the source data could contain strings for the x-axis data.

const data = [
  ['Cat A', 4],
  ['Cat B', 3],
  ['Cat C', 32],
  ['Cat D', 190],
  ['Cat E', 754],
];

return (
  <Chart height={300} view={[0, 0, 4, 3]} gutter={[20, 20, 50, 50]}>
    <XAxis
      tickPositions={data.map(_, i) => i}
      getTickLabel={(pos) => String(data[pos][0])}
    />
    <YAxis
      tickPositions={[0, 1, 2, 3]}
      getTickLabel={(pos) => String(Math.pow(10, pos))}
    />
    <LineSeries data={data.map(([x, y], i) => [i, Math.log10(y)])} />
  </Chart>
);

This example demonstrates a categorical x-axis and a logarithmic y-axis.

Props