💡 chromoMap2 Platform Documentation

Quick start

For the full teaching guide, see the nine-unit tutorial.

Download test datasets and follow reproducible testing walkthroughs.

1. In Select Data, provide chromosome and annotation tables for every chromosome set.
2. In Visualise Data, choose the set, data type, heat map state, and plot type.
3. Use Plot Properties and Additional Features to configure appearance and overlays.
4. Click Create chromoMap in the bottom status bar after changing settings.
5. Use Export for PNG, SVG, standalone HTML, or window data.

Navigate the app

The left panel contains configuration tabs and the right canvas displays output. The bottom status bar reports readiness and contains the main Create button.

Hover over a ? beside any field for a short definition. Plot Properties and Additional Features include section jump buttons. In per-set properties, the chromosome-set selector remains visible while scrolling.

The status bar reports the current operation. Select View Logs to inspect timestamped errors, successful operations and input row counts. The log window opens only on request, scrolls independently, and includes Clear history. Logs are retained in memory for this page session.

Provide chromosome and annotation data

Create from files or tables

Set the number of chromosome sets. Chromosome sets may represent tracks, samples, species, experimental conditions, or ploidy layers. Numeric, categorical and annotation-only modes are configured independently for each set in Visualise Data. Upload CSV/TSV files or create them in the table editor. Set names clarify selectors, summaries, legends, and assistant interpretation.

• Reorder sets with arrow buttons; link set numbers are remapped automatically.
• Use View/edit to correct cells, add rows or optional columns, and reorder records.
• Use plain numbers for numeric data and text labels for categorical data.

Edit an exported chromoMap

Import a standalone HTML plot exported by the app to recover recognized data and configuration.

Start from an example

Load scientific examples into the editable interface. The Plot Types gallery is display-only and uses synthetic data.

Create gene maps from GFF3

1. Select GFF3 and an optional Tabix index, then click Read genes.
2. Search for a gene, set flanking base pairs, and select gene, exon, CDS, and UTR features.
3. Choose gene structure, transcripts, alignment, or structure plus regional data.
4. For alignment, provide coordinate-sorted BAM and matching BAI files; choose depth or reads. For regional data, provide BED, bedGraph, or BigWig.
5. Run the analysis to populate editable chromoMap inputs.

Use bgzip GFF3 plus TBI for large catalogs. Larger flanks provide context but increase processing.

Reduce large-scale omics data

Adaptive windows scale with chromosome length; Window factor controls detail. Fixed windows use one base-pair size. Choose count, sum, average, minimum, maximum, or median. Region type and filter select chromosomes, scaffolds, or contigs.

Choose what each set displays

• Annotations only: maps locations without interpreting values.
• Categorical: maps text groups to discrete colors.
• Numeric: maps continuous values and enables quantitative plots.

Show heat map applies data-dependent colors to chromosome windows. Plot choices include bar, scatter, line, area, density, histogram, box, violin, epi-tag/lollipop, and multi-series variants where compatible. Select the chromosome set before changing its visualization.

Control the complete canvas

Layout

Chromosome width changes body thickness; Window width changes window footprint. Corner curve rounds chromosome ends. Chromosome gap separates chromosomes and chromosome-set gap separates tracks. Automatic left margin fits names; center plot aligns the composition.

Scale and typography

Display absolute, relative, or both coordinate modes. Configure major/minor ticks, suffix, scale offset, chromosome text, title, axes, legends, tooltips, and y-axis labels. Use automatic or manual legend positions.

Title and description

The title appears above the plot. Scientific description supplies experiment context to exports and the assistant. Select canvas-title text to apply size, bold, italic, highlighting, or links.

Style one chromosome set at a time

Choose a set, then configure chromosome/annotation colors and visibility. Set plot height, y ticks, optional min, max y domain, aggregation, plot colors, legend labels, data domain, and data colors.

Numeric domain scope can be per-set or global. Reference lines use a y position, color, and width. Plot filters recolor matching values; epi-tag filters decide which tags remain visible. Range operations use both Number 1 and Number 2.

Epi-tag settings control color, single/multi radius, triangle size, and plot shift.

Genomic coordinate scales

Open Plot Properties → Global → Genomic scale. Select Absolute for reference coordinates, Relative for distance from the displayed coordinate origin, or Both for two coordinate axes. The axes do not include additional “absolute” or “relative” captions.

Major ticks specifies the requested maximum number of labelled positions. The renderer uses this count exactly when labels fit and reduces it automatically when a coarser map produces a narrower axis. A value of 2 produces two endpoint ticks when space permits. Minor ticks are unlabelled subdivisions between adjacent major ticks. Scale suffix sets the coordinate unit; Y scale offset adjusts vertical placement. Click Create chromoMap after modifying these settings.

Built-in and custom legends

Built-in legend for a chromosome set

1. In Visualise Data, select the chromosome set and specify Numeric or Categorical. This selection applies only to that set. Enable Show heat map when the chromosome colors should encode the data.
2. Open Plot Properties → Per chromosome set and select the same set using Chromosome set to edit.
3. Under Data mapping, configure Data colors. Leave Data domain empty to infer the numeric range or categorical domain from that set’s data column; enter an explicit domain when a defined scale is required.
4. Under Legend, enable Show legend. Numeric data are represented by a continuous color scale; categorical data by discrete category entries.
5. For accompanying multi-series plots, enter one Legend label per plotted series, in the same order as the Plot colors. These labels identify series and do not rename the values in the annotation data column. To explain individual line or area colors, add an independent custom legend with corresponding series labels and colors.
6. Click Create chromoMap. Repeat for each set requiring its own legend.

Independent custom legends

1. Open Additional Features → Custom legends and select + Add custom legend.
2. Specify the legend type (Numeric or Categorical), title and text size.
3. Choose a domain source. An annotation-field source infers the domain from the selected column across loaded annotations. A manual domain uses the comma-separated values entered by the user.
4. Assign colors consistent with the symbols or values being described and click Create chromoMap.

Custom legends are independent global elements. Creating one does not enable a built-in per-set legend or alter the data encoding. Use them to explain additional symbols, groups or reference scales. Legends can be repositioned on the rendered figure.

Resolution and genomic windows

Adaptive mode derives resolution from chromosome length and Window factor. Fixed mode uses Window size in base pairs. Finer windows reveal detail but require more rendering and may expose sparse values.

• Remove the partial final window when fixed divisions leave a remainder.
• Show calculated window summaries for inspection.
• Map spanning annotations into every overlapping window.
• Enable window guides and set their color under global layout.

Highlights, labels, arrows, and markers

Highlights

Create/import intervals with start, end, color, opacity, and optional label; draw them in the background or overlay.

Labels

Show all annotation names or a comma-separated subset. Control maximum labels per window, font size, angle, and separator.

Strand arrows

Requires +/- strand values. Place arrows inside or above chromosomes and configure color, size, and tail.

Markers

Enter annotation names, assign colors in the same order, and set size, vertical offset, and outline.

Custom text and legends

Add text with font, color, size, rotation, italic, and underline. Drag it on the rendered SVG. It persists in saved projects and PNG, SVG, and HTML exports.

Custom legends may derive entries from an annotation data field or use manual labels/colors. Field legends suit encoded categories; manual legends explain symbols or groups outside the data columns.

Connect genomic features

Each link needs source annotation/set and target annotation/set; optional data supports grouping or numeric color mapping. Paste JSON, import CSV/TSV, or use the table editor.

• Show links enables the layer.
• Directed edges communicate source-to-target direction.
• Chord links use curved chord geometry.
• Numeric color map maps numeric link data through link colors.
• Tooltips & toolbox enables interactive inspection.

Annotation names must match exactly and set numbers are one-based.

Interpret plots with explicit context

For every set, state whether it represents a sample, species, condition, chromosome set, or custom group, and explain every data series.

Optional local statistics compare exact matching chromosome windows. Numeric series may receive paired t-tests and Pearson correlations; compatible mixed data may receive exploratory chi-square tests. Multiple-testing correction is not applied. Genomic windows may be spatially correlated and are not biological replicates. These tests are exploratory; p-values do not establish differential biology or causality.

Structured mode is deterministic. Optional WebLLM modes download and run a local browser model. Clear memory removes recent chat context.

Save work locally

Saved projects retain data, configuration, custom text, legends, and link colors in this browser's IndexedDB. They are not sent to a server. Browser site-data cleanup may remove them.

Share and reproduce results

• PNG: raster output; increase scale for publication resolution.
• SVG: editable vector output.
• Standalone HTML: interactive output; choose online libraries for internet-connected viewing, or local libraries and keep d3.v5.js and chromoMap2.js beside the HTML for offline use.
• Window data: CSV of computed summaries.
• Code: generated JavaScript for the current configuration.

Use the chromoMap2.js API button in the header for the complete programming reference.

Common checks

The map does not render

Every set needs chromosome and annotation rows; annotation ch_name must exactly match a chromosome name.

Colors or plots are empty

Confirm the data mode, numeric values, and domains match the observed data.

Labels or links are missing

Check annotation names, set numbers, filters, and maximum labels per window.

A large file is slow

Use indexes, larger windows, fewer adaptive windows, narrower filters, or the offline reducer.

Changes are not visible

Click Create chromoMap again.