Plotting (GYDE)

Scatter Plot

Interactive scatter plots with selection, zoom, and color-by-category support.

Histogram

Distribution visualization with configurable bin counts.

Selection Integration

Click or drag to select data points, synced with table and sequence views.

Axis Configuration

Log scale, min/max limits, and axis label customization.

SVG Export

Export plots as SVG for publications and presentations.

Step 1: Install Dependencies

Add the required packages to your project:

npm install d3 d3-axis-for-react react-resize-detector file-saver

Step 2: Copy Component Files

Copy the plotting directory to your project:

• src/gyde/plotting/Scatter.js - Scatter plot component
• src/gyde/plotting/Histogram.js - Histogram component
• src/gyde/plotting/PlotHolder.js - Container with controls
• src/gyde/plotting/TAPPlot.js - TAP visualization

Step 3: Prepare Your Data

Format your data as parallel arrays:

// Numeric arrays for X and Y axes
const affinityValues = [1.2, 3.4, 2.1, 5.6, ...];
const expressionValues = [0.8, 0.95, 0.72, 0.88, ...];

// Optional: category array for color coding
const categoryValues = ['High', 'Low', 'High', 'Medium', ...];

// Row indices (usually just 0 to n-1)
const dataIndices = affinityValues.map((_, i) => i);

Step 4: Add a Scatter Plot

Import and render the Scatter component:

import Scatter from './gyde/plotting/Scatter';

function MyApp() {
  const [selection, setSelection] = useState([]);

  return (
    <Scatter
      x={affinityValues}
      y={expressionValues}
      colourBy={categoryValues}
      dataRows={dataIndices}
      selection={selection}
      onSelect={setSelection}
      dynamicWidth={true}
      dynamicHeight={true}
    />
  );
}

Step 5: Add a Histogram

For distribution visualization:

import Histogram from './gyde/plotting/Histogram';

<Histogram
  x={affinityValues}
  dataRows={dataIndices}
  thresholds={20}
  onSelect={setSelection}
  colour="#8DC8E8"
/>

Step 6: Export to SVG

Use the built-in export button or call the export function programmatically for publication-ready vector graphics.