Function create3dModel

docs/ui/src/js/create3dModel.js:17–135

(dest, colorClasses, mode, scaleType = 'theme')

import {filterNaN, convertToCartesian, getChannelsAndFunction} from './utils';

function create3dModel(dest, colorClasses, mode, scaleType = 'theme') {
  // Force colorClasses to be an array if it was erroneously passed
  // as a single color class.
  if (!Array.isArray(colorClasses)) colorClasses = [colorClasses];

  // Hide all example images
  if (scaleType === 'theme') {
    let images = document.getElementsByClassName('ModelImage');
    for (let i = 0; i < images.length; i++) {
      if (!images[i].classList.contains('is-hidden')) images[i].classList.add('is-hidden');
    }
  }

  var pointCount = 3142;
  var i, r;

  var x = [];
  var y = [];
  var z = [];
  var c = [];

  for (i = 0; i < pointCount; i++) {
    r = i * (pointCount - i);
    x.push(r * Math.cos(i / 30));
    y.push(r * Math.sin(i / 30));
    z.push(i);
    c.push(i);
  }

  const data = createColorData(colorClasses, mode, scaleType);

  const colorWay = colorClasses.map((c) => {
    return c.colorKeys[0];
  });
  const mq = window.matchMedia('(prefers-color-scheme: dark)');
  const downloadFileName = scaleType === 'theme' ? `${getThemeName()}_3dModel` : `${scaleType}Scale_3dModel`;
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  const height = dest === 'paletteModelWrapper' ? windowHeight - 120 : windowHeight - 260;
  let width = windowWidth - (424 + 304 + 32); // Fit to window, minus panel and padding
  if (dest === 'sequentialModelWrapper' || dest === 'tabModelContent' || dest === 'divergingModelWrapper') {
    if (width > 796) width = 796; // Max width for scale views of 3d model
  }

  const canvasColor = mq.matches ? '#1d1d1d' : '#f5f5f5';

  const layout = {
    colorway: colorWay,
    autosize: true,
    height: height,
    width: width,
    showLegend: false,
    showscale: false,
    margin: {
      l: 24,
      r: 24,
      b: 24,
      t: 24,