Histogram2DPlotlyChartBuilder

Source

HistXYZ.js

function affine(inMin, val, inMax, outMin, outMax) {
  return ((val - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;
}

export default function HistXYZ(chartState, histogram, chartType) {
  if (!histogram) return null;

  const nBins = histogram.numberOfBins;
  const z = [];
  const x = [];
  const y = [];
  for (let i = 0; i < nBins; ++i) {
    const row = [];
    for (let j = 0; j < nBins; ++j) {
      row.push(0);
    }
    z.push(row);
    // x and y make sure the axes reflect the real extent of the binned data.
    x.push(
      affine(0, i, nBins - 1, histogram.x.extent[0], histogram.x.extent[1])
    );
    y.push(
      affine(0, i, nBins - 1, histogram.y.extent[0], histogram.y.extent[1])
    );
  }

  histogram.bins.forEach((bin) => {
    const xIndex = Math.floor(
      affine(histogram.x.extent[0], bin.x, histogram.x.extent[1], 0, nBins - 1)
    );
    const yIndex = Math.floor(
      affine(histogram.y.extent[0], bin.y, histogram.y.extent[1], 0, nBins - 1)
    );

    z[yIndex][xIndex] = bin.count;
  });

  return {
    nonsense: 'unknown value',
    forceNewPlot: chartState.forceNewPlot,
    traces: [
      {
        x,
        y,
        z,
        type: chartType,
        colorscale: chartState.colormap,
        reversescale: chartState.reversescale,
      },
    ],
    // redundant axis titles for 2D and 3D plots.
    layout: {
      margin: {
        t: 40,
      },
      xaxis: {
        title: histogram.x.name,
      },
      yaxis: {
        title: histogram.y.name,
      },
      scene: {
        xaxis: {
          title: histogram.x.name,
        },
        yaxis: {
          title: histogram.y.name,
        },
        zaxis: {
          title: 'Count',
        },
      },
    },
    config: {
      scrollZoom: true,
      displayModeBar: true,
      displaylogo: false,
      showLink: false,
      modeBarButtonsToRemove: ['sendDataToCloud'],
    },
  };
}

Scatter.js

export default function Scatter(chartState, histogram, chartType) {
  if (!histogram) return null;

  const x = [];
  const y = [];
  const color = [];

  histogram.bins.forEach((bin) => {
    x.push(bin.x);
    y.push(bin.y);
    color.push(bin.count);
  });

  // 'text' shows up in the hover popup.
  return {
    forceNewPlot: chartState.forceNewPlot,
    traces: [
      {
        x,
        y,
        text: color.map((count) => `Count: ${count}`),
        type: chartType,
        mode: 'markers',
        marker: {
          size: 12,
          // size: color,
          color,
          colorscale: chartState.colormap, // Viridis
          showscale: true,
          reversescale: chartState.reversescale,
        },
      },
    ],
    layout: {
      hovermode: 'closest',
      margin: {
        t: 40,
      },
      xaxis: {
        title: histogram.x.name,
      },
      yaxis: {
        title: histogram.y.name,
      },
    },
    config: {
      scrollZoom: true,
      displayModeBar: true,
      displaylogo: false,
      showLink: false,
      modeBarButtonsToRemove: ['sendDataToCloud'],
    },
  };
}

ScatterXY.js

export default function ScatterXY(chartState, scatter, chartType) {
  if (!scatter) return null;

  const x = scatter[0].data;
  const y = scatter[1].data;
  const trace2 = {
    x,
    y,
    type: chartType,
    colorscale: chartState.colormap,
    reversescale: chartState.reversescale,
  };

  return {
    forceNewPlot: chartState.forceNewPlot,
    traces: [
      {
        x,
        y,
        type: 'scatter',
        mode: 'markers',
        marker: {
          color: 'rgba(156, 165, 196, 0.65)',
          line: {
            color: 'rgba(106, 115, 146, 1.0)',
            width: 1,
          },
          symbol: 'circle',
          size: 8,
        },
      },
    ].concat(chartType !== 'scatter' ? trace2 : []),
    layout: {
      hovermode: 'closest',
      margin: {
        t: 40,
      },
      xaxis: {
        title: scatter[0].name,
      },
      yaxis: {
        title: scatter[1].name,
      },
    },
    config: {
      scrollZoom: true,
      displayModeBar: true,
      displaylogo: false,
      showLink: false,
      modeBarButtonsToRemove: ['sendDataToCloud'],
    },
  };
}

index.js

import Monologue from 'monologue.js';
import HistXYZ from './HistXYZ';
import Scatter from './Scatter';
import ScatterXY from './ScatterXY';

import '../../../React/CollapsibleControls/CollapsibleControlFactory/QueryDataModelWidget';

const defaultConfig = {
  scrollZoom: true,
  displayModeBar: true,
  displaylogo: false,
  showLink: false,
  modeBarButtonsToRemove: ['sendDataToCloud'],
};
const chartFactory = {
  Contour: { builder: HistXYZ, type: 'contour', data: 'histogram' },
  Heatmap: { builder: HistXYZ, type: 'heatmap', data: 'histogram' },
  Scatter: { builder: Scatter, type: 'scatter', data: 'histogram' },
  ScatterXY: { builder: ScatterXY, type: 'scatter', data: 'scatter' },
  ScatterXYContour: {
    builder: ScatterXY,
    type: 'histogram2dcontour',
    data: 'scatter',
  },
  Surface3D: { builder: HistXYZ, type: 'surface', data: 'histogram' },
  Trend: {
    builder: (chartState, data) => {
      if (data) data.config = data.config || defaultConfig;
      return data;
    },
    type: 'custom',
    data: 'plot',
  },
};

const DATA_READY_TOPIC = 'data-ready';

export default class Histogram2DPlotlyChartBuilder {
  constructor(queryDataModel) {
    this.queryDataModel = queryDataModel;
    this.availableChartTypes = Object.keys(chartFactory);
    this.chartState = {
      chartType: this.availableChartTypes[1],
      colormap: 'Portland',
    };

    // Handle data fetching
    if (this.queryDataModel) {
      this.queryDataModel.onDataChange((data, envelope) => {
        this.histogram = data.histogram2D.data;

        this.updateState();
      });
      this.queryDataModel.onStateChange((event) => {
        if (event.name === 'chartType') {
          this.chartState.chartType = event.value;
          this.chartState.forceNewPlot = true;
          this.updateState();
        }
      });
    }

    this.controlWidgets = [];
    if (this.queryDataModel) {
      this.controlWidgets.push({
        name: 'QueryDataModelWidget',
        queryDataModel,
      });
    }
  }

  // ------------------------------------------------------------------------

  buildChart() {
    if (this.chartState.chartType && (this.histogram || this.scatter)) {
      const builder = chartFactory[this.chartState.chartType].builder;
      const typeString = chartFactory[this.chartState.chartType].type;
      const dataType = chartFactory[this.chartState.chartType].data;
      const plotData = builder(this.chartState, this[dataType], typeString);
      this.chartState.forceNewPlot = false;
      if (plotData) {
        this.dataReady(plotData);
      }
    }
  }

  // ------------------------------------------------------------------------

  updateState(state, forceNewPlot) {
    if (state) {
      this.chartState = Object.assign(this.chartState, state);
      if (forceNewPlot) this.chartState.forceNewPlot = true;
    }

    this.buildChart();
  }

  // ------------------------------------------------------------------------

  getState() {
    return this.chartState;
  }

  // ------------------------------------------------------------------------
  getHistogram() {
    return this.histogram;
  }

  getScatter() {
    return this.scatter;
  }

  setHistogram(histogram) {
    // we need a new plot if the axes change, as opposed to just the data.
    if (
      !this.histogram ||
      this.histogram.x.name !== histogram.x.name ||
      this.histogram.x.extent !== histogram.x.extent ||
      this.histogram.y.name !== histogram.y.name ||
      this.histogram.y.extent !== histogram.y.extent
    ) {
      this.chartState.forceNewPlot = true;
    }
    this.histogram = histogram;
    this.buildChart();
  }

  setScatter(scatter) {
    // we need a new plot if the axes change, as opposed to just the data.
    if (
      !this.scatter ||
      this.scatter[0].name !== scatter[0].name ||
      this.scatter[0].extent !== scatter[0].extent ||
      this.scatter[1].name !== scatter[1].name ||
      this.scatter[1].extent !== scatter[1].extent
    ) {
      this.chartState.forceNewPlot = true;
    }
    this.scatter = scatter;
    this.buildChart();
  }

  setPlot(plot) {
    this.chartState.forceNewPlot = true;
    this.plot = plot;
    this.buildChart();
  }

  // ------------------------------------------------------------------------

  onDataReady(callback) {
    return this.on(DATA_READY_TOPIC, callback);
  }

  // ------------------------------------------------------------------------

  dataReady(readyData) {
    this.emit(DATA_READY_TOPIC, readyData);
  }

  // ------------------------------------------------------------------------

  // Method meant to be used with the WidgetFactory
  getControlWidgets() {
    return this.controlWidgets;
  }

  // ------------------------------------------------------------------------

  getControlModels() {
    return {
      queryDataModel: this.queryDataModel,
    };
  }

  getAvailableChartTypes() {
    return this.availableChartTypes;
  }

  getChartType() {
    return this.chartState.chartType;
  }

  getDataType() {
    return chartFactory[this.chartState.chartType].data;
  }
}

// Add Observer pattern using Monologue.js
Monologue.mixInto(Histogram2DPlotlyChartBuilder);