OLIVE provides rapid visualization and analysis of chromatin tracing experiments

Summary

Optical chromatin tracing experiments directly capture the three-dimensional folding of thousands of individual alleles, highlighting the need for a tool that enables fast, interactive, and analytical browsing of such data. Here, we introduce optical looping interactive viewing engine (OLIVE), the first web-based application designed for high-throughput ball-and-stick chromatin tracing data studies that functions similarly to genome browsers. OLIVE allows users, regardless of computational expertise, to input their own data for automated reconstruction of chromatin fibers at individual alleles or to browse and analyze annotated publicly available datasets. Using OLIVE’s functionalities, users can interact with three-dimensional presentation of traced alleles and query them based on spatial features, including pairwise distances and perimeters between their segments. Finally, OLIVE calculates and presents several polymer physics metrics of each allele, providing quantitative summaries for hypothesis-driven studies. OLIVE is an open-source project accessible at https://faryabilab.github.io/chromatin-traces-vis/.

Graphical abstract

Highlights

• •OLIVE supports user-generated and publicly available chromatin tracing datasets analysis
• •OLIVE enables interactive exploration of optically reconstructed alleles
• •OLIVE allows users to query optically traced alleles based on spatial features
• •OLIVE provides multiple polymer physics metrics for optically reconstructed alleles

Motivation

Recent advances in microscopy have enabled direct tracing of chromatin fiber positioning at thousands of individual alleles with sub-diffraction resolution. These developments have created a growing need for intuitive and rapid tools to visualize, assess, and interpret such data. To address this, we developed the optical looping interactive viewing engine (OLIVE), an easy-to-use interactive web application for reconstructing, visualizing, and analyzing alleles from chromatin tracing experiments.

Zhou et al. develop the optical looping interactive viewing engine (OLIVE), a web-based application for browsing and exploring user-generated and publicly available chromatin tracing datasets.

Introduction

Chromatin folding has emerged as an important regulator of precise gene expression. Over the past two decades, experimental approaches based on DNA fluorescent in situ hybridization (FISH) imaging have been instrumental in visualizing features of chromatin folding in individual cells.¹ More recently, Oligopaint DNA FISH probe design and synthesis have greatly increased coverage, resolution, and versatility of DNA FISH-based methods. These advancements, combined with high-throughput imaging, have led to the development of sequential DNA FISH techniques, including optical reconstruction of chromatin architecture (ORCA),² DNA-MERFISH,³ DNA seqFISH+,⁴ Hi-M,⁵ and multiplexed imaging of nucleome architectures.⁶ These methods allow direct tracing of spatial positioning of chromatin fibers at thousands of individual alleles at sub-diffraction resolutions, creating a growing need to visualize, assess, and interpret results in an intuitive and rapid manner.

To address this unmet need and make chromatin tracing data more accessible to the community, we introduce optical looping interactive viewing engine (OLIVE): an easy-to-use, interactive web application for the reconstruction, visualization, and analysis of alleles from ball-and-stick chromatin tracing experiments. Using OLIVE’s functionalities, users can automatically render, interact, explore and analyze their own chromatin tracing data. OLIVE also enables users to browse, query, and analyze annotated publicly available chromatin tracing datasets.

Results

OLIVE’s implementation and capabilities

Chromatin tracing techniques utilize pools of primary oligos complementary to target genomic sequences, which are linked to barcoded oligos serving as binding sites for fluorescent secondary oligos. Depending on the experimental design, each unique barcode can cover the probes spanning various genomic distances ranging from 2 kilobases (kb) up to 1 megabase (Mb). Chromatin tracing is achieved by sequentially hybridizing, imaging, and removing fluorescent secondary probes matching the barcodes one at a time. Here, we use the term readout, step, and segment interchangeably to refer to the centroid of a spot obtained from each round of imaging that maps the positions of individual genomic segments along a traced chromatin. The term readout also refers to the spot ID column in the OLIVE’s comma-separated tabular input file, which designates the imaging round of a detected spot within a field of view (FOV). Each lab with chromatin tracing technique can visualize, inspect, and explore chromatin tracing data with their own pipelines in Python, MATLAB, or other programming languages. However, this requires computational expertise, hinders sharing and transferability among research groups, and could potentially lead to discrepancies in the analysis outcomes of the same dataset.

OLIVE web tool provides a solution for user-friendly and interactive exploration and analysis of thousands of alleles optically mapped by chromatin tracing experiments. OLIVE consists of a browser-based graphical user interface, a Flask web application programming interface (API) server, a relational database, a cloud-based object storage, and a collection of initialization and data processing scripts. The OLIVE browser application is developed in JavaScript. Its framework is provided by customized React.js components, while its interactive plots are created with several visualization libraries including D3.js, three.js, plotly.js, and Recharts (see STAR Methods). Users can upload tabular data containing spatial coordinates of chromatin segments based on their experimental configuration. They can also browse through annotated publicly available datasets (Figure 1A). In both scenarios, users can interact with and query the 3D chromatin fiber reconstruction of individual alleles (Figure 1B). OLIVE also enables the calculation, visualization, and exploration of several distance-based and polymer physics metrics (Figure 1C).

Figure 1.

OLIVE enables interactive browsing, query, and analysis of user-generated and publicly available chromatin traces

(A) Schematic of OLIVE front end, back end, APIs, web user interface, and data flow.

(B) Representative view of OLIVE’s chromatin trace visualization (top) and polymer physics metric calculations (bottom).

(C) Schematic showing possible interactive analysis using OLIVE’s tabular data input. Top left: required fields in the chromatin trace input file. Top right: calculation of Euclidian pairwise distances, three-way perimeter, distance matrix, and centrality profile of allele 11 in FOV 1, visualized by OLIVE. Bottom right: population-average distance map of alleles in FOV 1. Bottom center: alleles 128 and 349 were identified using OLIVE’s pairwise distance search, where the distance between readouts 30 and 46 is less than 250 nm. Bottom left: comparison of the radius of gyration (Rg) of allele 11 (highlighted in red) with all other alleles in FOV 1 (shown in a box-and-whisker plot).

To support access to published datasets, OLIVE stores data from annotated chromatin tracing experiments as an Amazon Web Services (AWS) S3 bucket (Figure 1A). Metadata for each chromatin tracing experiment are maintained in a MySQL database hosted on an AWS relational database service (RDS) instance (Figure 1A). Communication between OLIVE’s front end and back end is facilitated through APIs provided by a Flask web server running on an AWS EC2 instance. To explore available datasets, users can browse a table, filter and sort columns, and perform global searches to query metadata.

Beyond accessing existing data, OLIVE allows users to upload their own datasets containing coordinates of segments from uniquely identifiable chromatin traces (Figure 1A). Raw images from different chromatin tracing assays can be processed using tools such as ChrTracer3 and MinaAnalyst, as previously described in detail.^7,8 The output from these programs consists of comprehensive tabular files listing registered alleles along with the X, Y, and Z positions of each readout’s optical centroid after corrections for potential aberrations and spot-fitting. OLIVE accepts a simplified version of these outputs, formatted according to 4D Nucleome recommendations. For each registered segment of traced chromatins, OLIVE’s input must include the FOV; allele number (S); segment (readout) number; and X, Y, and Z coordinates in nanometers, provided in comma-separated format (Figure 1C). OLIVE provides utility scripts to facilitate these file format conversions.

The folding of individual chromatin traces can be examined in multiple ways. One common approach is to visually inspect reconstructed chromatin by plotting chromatin segment positions as a smoothed 3D curve connecting readouts (Figures 1B and 1C). Due to experimental challenges—such as target genomic region length, probe specificity, and microscope detection sensitivity—some chromatin traces may have missing readouts. To enable downstream analysis, OLIVE can also impute missing readouts using linear interpolation based on flanking readouts. Following imputation, OLIVE reconstructs the 3D structure of each traced chromatin fiber per FOV by first generating a smooth spline tube geometry using the Catmull-Rom algorithm, followed by rendering individual spheres for each coordinate. The geometric center of the trace is then aligned to the origin of the 3D plot. Users can view, zoom, and rotate each trace, which is visualized as a beads-on-a-string 3D object (Figure 1B). By default, each step along the reconstructed chromatin trace is assigned a distinct pseudocolor from a rainbow palette to facilitate following their order. Interpolated readouts along the reconstructed chromatin trace are shown in gray when the “Linear Interpolation” switch is turned off.

Using the beads-on-a-string 3D representation of chromatin traces, users can perform a variety of interactive, distance-based analyses in OLIVE (Figure 1C). Each sphere in the 3D rendering of chromatin trace is a clickable component. When selected, all segments within a specified radius are highlighted. Users can also measure the Euclidean distance between any two selected segments on a chromatin trace. To refine their search for representative alleles, users may filter alleles based on pairwise distances between two selected segments.

Additionally, OLIVE enables users to interactively examine the spatial perimeter formed by any three segments on a chromatin trace—an analysis that informs potential three-way interactions between regulatory elements. OLIVE also automatically computes the Euclidian pairwise distance matrix of each allele and presents the results as an interactive and adjustable heatmap, linked to its corresponding chromatin trace rendering. To provide a population-average view of chromatin folding at the probed locus, OLIVE uses non-interpolated alleles from the entire experiment to compute the median pairwise distances between steps. Users can then compare the plotted population-average distance map with the distance maps of individually traced chromatins (Figure 1C).

To obtain a more holistic view of chromatin folding, users can compute several polymer physics metrics for each chromatin trace. OLIVE automatically calculates the radius of gyration—a measure of chromatin fiber compaction—for each allele and compares these values across alleles in the same FOV using a box-and-whisker plot (Figure 1C). OLIVE also generates a centrality profile by determining each allele’s geometric center and computing the distance of each segment from that center (Figure 1C). Finally, OLIVE offers highly customizable color schemes and output formats, enabling users to download 3D trace rendering and quantitative analysis results as high-resolution, publication-quality images.

Case study 1: Analysis of user-generated chromatin tracing data with OLIVE identifies and characterizes alleles with MYC multi-enhancer interactions in T-ALL

Several lineage-specific enhancers have been identified within 3-Mb sequences flanking the MYC promoter, including two enhancer clusters TE1 and TE2 located 1.35 and 1.85 Mb 3′ of the promoter in T acute lymphoblastic leukemia (T-ALL).^9,10 Given that differential activity of these T-ALL-restricted enhancer clusters contributes to drug resistance acquisition,¹¹ we decided to analyze a 72-step chromatin tracing experiment with OLIVE to examine whether the TE1 and TE2 enhancer clusters simultaneously interact with the MYC promoter. Hovering the mouse over the graphics above “Click to start uploading” provides information about the required fields for the OLIVE’s input file (Figure 2A). After reformatting ChrTracer3 output, we uploaded our ORCA data by clicking “Click to start uploading” (Figure 2B) on the OLIVE homepage (Figure 2A). We first examined the Euclidian distance between the ORCA probe sets overlapping with the MYC promoter (step 4) and the most 3′ enhancer cluster (TE2, steps 65–67), which was 529.40 nm in the first traced chromatin in the first FOV (Figure 2C). To find alleles with MYC-to-TE2 interactions, we search for alleles with less than 250 nm distance between the MYC promoter (step 4) and TE2 (step 66). This analysis revealed that the MYC promoter and TE2 enhancer cluster were closer than 250 nm in 2,373 out of 15,335 traced alleles, including allele number 7222 (Figure 2D). Checking the matrix of pairwise distances between the ORCA steps of allele 7222 showed that, in addition to TE2, the enhancer cluster TE1 (step 52) was within 250 nm of MYC (Figure 2E), suggesting that the promoter simultaneously interacts with both enhancer clusters. Examining the centrality profiles of alleles showed that, in contrast to allele 1 (Figure 2F), MYC, TE1, and TE2 were located close to the genomic center of allele 7222 where these elements simultaneously interacted (Figure 2G). In line with this observation, comparison of radius of gyration with OLIVE showed that alleles 1 and 7222 were less and more compact than the median of alleles in this FOV, respectively (Figures 2H and 2I).

Figure 2.

Analysis of user-generated chromatin tracing data with OLIVE identifies alleles with three-way MYC promoter-enhancer interactions in T-ALL

(A) From OLIVE homepage, users can access published chromatin tracing dataset from human, mouse, and other organisms or upload their own data.

(B) Uploading 72-step ORCA experiment that traces a region 3′ of the MYC promoter in T-ALL.

(C) 3D rendering of allele 1 in FOV 1 showing that the MYC promoter (step 4) is more than 250 nm away from the TE2 (step 66).

(D) Pairwise distance search in FOV 1 identifies 2,373 alleles (right), including allele 7222 (left), with MYC-to-TE2 distance less than 250 nm.

(E) Pairwise distance heatmaps showing that distances between the MYC promoter (step 4) and both TE1 (top, steps 52–54) and TE2 (bottom, steps 65–67) are less than 250 nm in allele 7222. Darker the color, smaller the distance.

(F and G) Centrality profiles showing that non-interacting enhancers and promoter in allele 1 (F) are further away from allelic geometric center compared to allele 7222 (G) where MYC (step 4), TE1 (steps 52–54), and TE2 (steps 65–67) interact.

(H and I) Comparison of the radius of gyration (Rg) of alleles 1 (H) and 7222 (I) with all other alleles in FOV 1 (shown in a box-and-whisker plot).

Case study 2: Chromatin tracing datasets available in OLIVE database show the existence of alleles with MYC multi-enhancer interactions in MCL

Intrigued by observing multi-way interactions between MYC and its distal enhancers in T-ALL, we tested the generalizability of this finding by expanding our analysis using OLIVE. Searching datasets available on OLIVE, we located a sequential DNA FISH dataset for the MYC locus in mantle cell lymphoma (MCL) (Figure 3A), where we previously identified two enhancer clusters ME1 and ME2 located 525 and 433 kb 5′ of the promoter, respectively.¹² Population-average distance map indeed showed smaller pairwise distances between the MYC promoter (step 25), ME1 (steps 7 and 8), and ME2 (step 11) (Figure 3B). Searching for alleles with less than 250 nm distance between the MYC promoter and ME1 identified 67 out of 203 alleles in FOV 3, including allele number 58 (Figure 3C). Examination of the sphere centering MYC showed that both ME2 and ME1 were within 250 nm of the promoter in allele 58 (Figures 3D and 3E). Moreover, we observed that all three regulatory elements were located near the geometric center of allele 865 (Figure 3F). Together, the MCL analysis corroborated the observations in T-ALL and demonstrated ability of OLIVE to identify multi-way interactions between the MYC promoter and its lineage-restricted distal enhancers.

Figure 3.

Analysis of published chromatin tracing data with OLIVE confirms observations in T-ALL and identifies three-way MYC promoter-enhancer interactions in MCL

(A) Search in OLIVE identifies published chromatin tracing datasets of the MYC locus in human mantle cell lymphoma.

(B) Population-average distance map of chromatin traces in MCL.

(C–E) Searching a 250-nm-radius sphere centered on step 25 shows that both ME1 (step 8) and ME2 (step 11) are less than 250 nm away from the MYC promoter in 67 alleles (C and D) in FOV 3, including allele 58 (E).

(F) Centrality profiles showing enhancer clusters ME1 (step 8) and ME2 (step 11) are positioned close to the geometric center of allele 865.

Case study 3: OLIVE shows that genomic deletion of Ets1 enhancer alters multi-way chromatin interactions at Ets1-Fli1 loci in T cells

The Ets1-Fli1 locus encodes two ETS family transcription factors Ets1 and Fli1, which play a pivotal role in T cell development.¹³ Our previous Hi-C studies identified large number of pairwise interactions between Ets1 and Fli1 promoters, as well as several promoter distal regulatory elements including a number of CTCF-bound elements and Gm27162 genomic element, which acts as an Ets1 enhancer cluster.¹⁴ To understand whether genetic deletion of Gm27162 enhancer cluster impacts interactions among promoters and distal genomic elements, we used OLIVE to explore chromatin traces of Ets1-Fli1 locus in T cells from wild-type and Gm27162 enhancer-cluster-deleted mouse strains. Searching 167 chromatin traces in FOV 1 identified 91 alleles (54%) where the Ets1 promoter (step 15) was within 250 nm of the Gm27162 enhancer cluster (step 22) in wild-type T cells (Figure 4A). Examining the matrix of pairwise interactions in the allele 3 further showed that the Ets1 promoter (step 15) simultaneously interacted with the Fli1 promoter (step 10) and Gm27162 enhancer cluster (step 22) (Figure 4B). Using OLIVE’s “filter readouts within a radius” and “calculate 3-way perimeter” functionalities, we confirmed this observation and further observed that CTCF-bound elements (steps 11, 23, and 28) were within 250 nm of each other in wild-type T cells (Figures 4C and 4D).

Figure 4.

OLIVE identifies an increase of Ets1 and Fli1 promoter-promoter interaction frequency upon Ets1 distal enhancer loss in murine T cells

(A) Pairwise distance search in FOV 1 identifies 91 alleles (right), including allele 20 (left), with Ets1-to-Gm27162 enhancer cluster (probe set 15-to-22) distance less than 250 nm in wild-type T cells.

(B) Pairwise distance heatmaps in wild-type T cells dataset showing that distances between the Ets1 promoter (step 15) and both the Gm27162 enhancer cluster (step 22) and the Fli1 promoter (step 10) are less than 250 nm in allele 20. Darker the color, smaller the distance.

(C) Searching a 250-nm-radius sphere centered on step 15 (Ets1 promoter) shows that, in addition to the Gm27162 enhancer cluster (step 22) and the Fli1 promoter (step 10), CTCF-bound elements (steps 11, 23, and 28) are less than 250 nm away from the Ets1 promoter.

(D) OLIVE calculating the “three-way perimeter” of CTCF-bound elements in allele 20 of the wild-type T cell dataset.

(E) Pairwise distance search in FOV 1 identifies 21 alleles (right), including allele 111 (left), with Ets1-to-Gm27162 enhancer cluster (probe set 15-to-22) distance more than 250 nm in enhancer-cluster-deleted T cells.

(F) Pairwise distance search in FOV 1 identifies 17 alleles (right), including allele 105 (left), with Ets1-to-Fli1 (probe set 15-to-10) distance less than 250 nm in enhancer-cluster-deleted T cells.

Intrigued by the ability of OLIVE to capture complex network of interactions in Ets1-Fli1 locus in wild-type T cells, we next evaluated the impact of Gm27162 enhancer cluster deletion on multi-way interactions in this locus. Inspecting chromatin traces of Gm27162 enhancer-cluster-deleted T cells with OLIVE showed that step 15 was proximal to the step 22 in only 11 out of 34 alleles (32%) (Figure 4E), a markedly lower frequency of Ets1 interaction with its distal enhancer region compared to wild-type T cells (Figure 4A). Notably, our OLIVE analysis showed that Ets1 and Fli1 promoters were more frequently within 250 nm of each other in T cells with enhancer cluster deletion (17 out of 34 [50%] chromatin traces in of Gm27162 enhancer-cluster-deleted vs. 63 out of 167 [37%] chromatin traces in wild-type T cells) (Figure 4F). Together, the analysis of wild-type and Gm27162 enhancer cluster knockout data shows OLIVE’s capability in identifying changes in both enhancer-promoter and promoter-promoter interactions from chromatin tracing experiments.

Discussion

Accelerating access to, utilization of, and analysis of chromatin tracing data is critical for advancing single-allele resolution studies of genome folding. To facilitate the exploration and analysis of both user-generated and existing chromatin tracing data, we have developed OLIVE—a unified, interactive web tool that integrates rapid modeling, querying, and quantification of chromatin folding at the allele level. As more datasets are added to OLIVE, the platform will support the generation of new biological hypotheses and discoveries by enabling rapid browsing and exploration of chromatin tracing data for researchers with varying backgrounds. As of this writing, OLIVE hosts more than 40 annotated chromatin tracing datasets. Leveraging AWS cloud infrastructure, OLIVE is equipped to receive, process, and publish many more. Researchers can submit their chromatin tracing data for inclusion in OLIVE using a streamlined metadata specification form available on the portal (Figures 3A and S1A). Once published, datasets can be browsed, queried, and analyzed using OLIVE’s computational resources. OLIVE is open source, well documented, and accessible at https://faryabilab.github.io/chromatin-traces-vis/ for fast, interactive, and analytical browsing of chromatin tracing data.

Limitations of the study

To create a lightweight browser-like application, all computations are performed at the OLIVE’s client-side in the browser, not its server side. This design constrains execution of highly computationally demanding tasks within a reasonable amount of time—such as calculating sums of pairwise distances among arbitrarily large numbers of readouts. Although technically feasible, financial considerations at this time prevented the operationalizing of cloud-based functionalities for sharing chromatin tracing data analyzed by OLIVE.

Resource availability

Lead contact

Further information and request for reagents may be directed to and will be fulfilled by the lead contact, Robert B. Faryabi (faryabi@pennmedicine.upenn.edu).

Materials availability

This work did not generate new unique reagents.

Data and code availability

• •This paper analyzes existing, publicly available data, referenced in the manuscript.
• •All original software code has been deposited at Zenodo and is publicly available at https://doi.org/10.5281/zenodo.17144105 as of the date of publication. It is also available at https://faryabilab.github.io/chromatin-traces-vis/.
• •Any additional information required for reanalysis of the data reported in this paper is available from the lead contact upon request.

Acknowledgments

The authors thank Drs. Shelley Berger and George Netto for generous support of Penn Epigenetics Institute and Department of Pathology and Laboratory Medicine. This work was supported by NIH grants U01-DK112217, R01-HL145754, R0-AI168240, and U01-DK127768 (to G.V.) and R01-CA-248041, R01-CA-230800, U01-DK-112217, and U01-DK-123594 (to R.B.F.).

Author contributions

Conceptualization, Y.Z. and R.B.F.; methodology, Y.Z., Y.S., D.H., and R.B.F.; investigation, Y.Z., Y.S., A.J., and R.B.F.; resources and reagents, Y.Z., G.V., and R.B.F.; writing – original draft, Y.Z. and R.B.F.; writing – review and editing, Y.Z., Y.S., D.H., G.V., and R.B.F.; funding acquisition, R.B.F. and G.V.; supervision, R.B.F.

Declaration of interests

The authors declare no competing interests.

STAR★Methods

Key resources table

REAGENT or RESOURCE	SOURCE	IDENTIFIER
Software and algorithms
OLIVE	This paper	https://faryabilab.github.io/chromatin-traces-vis/and https://doi.org/10.5281/zenodo.17144105
react v18.2.0	Meta	https://react.dev
@chakra-ui/react v2.8.1	Sage and contributors	https://chakra-ui.com
@emailjs/browser v4.4.1	EmailJS	https://github.com/emailjs-com/emailjs-sdk
@react-three/drei v9.73	Poimandres	https://github.com/pmndrs/drei
@react-three/fiber v8.14.1	Poimandres	https://github.com/pmndrs/react-three-fiber
@tanstack/react-table v8.15.3	TanStack LLC	https://tanstack.com/table/latest
d3 v7.8.5	Observable	https://d3js.org
jspdf v2.5.2	Parallax organization	https://github.com/parallax/jsPDF
leva v0.9.35	Poimandres	https://github.com/pmndrs/leva
plotly.js-cartesian-dist v3.0.1	Plotly	https://github.com/plotly/plotly.js
react-dom v18.2.0	Meta	https://react.dev
react-papaparse v4.4.0	Bunlong	https://react-papaparse.js.org
react-plotly.js v2.6.0	Plotly	https://github.com/plotly/react-plotly.js
recharts v2.15.1	Recharts Group	https://recharts.org/en-US
svg2pdf.js v2.5.0	yWorks GmbH	https://github.com/yWorks/svg2pdf.js
three.js v0.156.1	Ricardo Cabello	https://github.com/mrdoob/three.js
Lucide-react v0.511.0	Lucide Contributors	https://lucide.dev/guide/packages/lucide-react

Method details

Back-end and front-end implementation

OLIVE’s architecture comprises a web-based graphic user interface, Flask web API server, relational database, and cloud object storage. The front-end, implemented in JavaScript, leverages various libraries to deliver a responsive user interface. Core user interface (UI) components include an intuitive interactive 3D model that represents the chromatin trace and a user-friendly dashboard panel for data analysis and exploration. React.js serves as the foundation to provide a component-based architecture that efficiently renders and updates content through its Virtual Document Object Model (DOM), enabling dynamic user interaction without full page reloads. Uploaded chromatin tracing CSV files are parsed into JavaScript objects using react-papaparse, a fast React CSV parser for the browser. The interactive table interface, powered by the Headless UI library TanStack Table, provides users with sortable, filterable columns and pagination for efficient data browsing while maintaining full control over markup and styles in the landing page.

To create each visualization component of the front-end, several 2D and 3D visualization libraries are used. Three.js, a robust WebGL-based graphic library, is used for real-time 3D chromatin trace rendering and smooth manipulation in the browser. To visualize each reconstructed chromatin trace, the spatial coordinates of all the readouts in a selected trace are transformed into Three.js Vector3 objects to represent the points in 3D space. One sphere geometry (aka beads on the beads-on-a-string model) is generated for each readout, and a smooth 3D spline curve (aka string or tube on the beads-on-a-string model) is generated from this list of spheres using Three.js’s built-in Catmull-Rom algorithm. Drei, a helper library built on top of react-three-fiber and provides ready-to-use components, including axis, grid, and Orbit Controls, is used to enable user to interact with the 3D reconstruction of chromatin traces by zooming in and out or rotating the 3D model with these components. Leva, a GUI library, which provides an intuitive and interactive way to manipulate parameters and settings within the 3D scene, is used to integrate a floating panel for users to adjust parameters such as the size of the tube and the spheres.

D3.js, a powerful low-level data visualization library, is used to generate the heatmap that can be customized to seamlessly interact with the 3D model of reconstructed chromatin traces. Complementary data visualization (i.e., radius of gyration box-whisker and centrality profile plots) is implemented by Recharts and Plotly.js. Recharts provides a lightweight solution for the centrality profile to minimize overhead, while Plotly.js delivers out-of-the-box interactive plotting capabilities.

The back-end of OLIVE includes three components: a Flask web API server written in Python and hosted on AWS EC2, a MySQL database server hosted on AWS RDS, and an AWS S3 bucket that stores the raw chromatin tracing data CSV files. When a user requests a certain dataset, the web browser sends the request through the React front-end web application to the Flask web API server, which contacts the MySQL database to get details of the dataset (including the path of corresponding CSV data file in AWS S3 bucket) and return them to the front-end as the response. Based on this response, the front-end loads the CSV file from AWS S3 bucket and renders visualization inside the web browser.

Quantification and statistical data analysis

Radius of gyration and centrality profile calculations

Geometric center of each allele is calculated as $C=\frac{1}{N}\left({\mathrm{\Sigma }}_{i=1}^{\mathrm{N}}{X}_i,{\mathrm{\Sigma }}_{i=1}^{\mathrm{N}}{Y}_i,{\mathrm{\Sigma }}_{i=1}^{\mathrm{N}}{Z}_i\right)$, where N is the number of steps of each trace. Radius of gyration of each allele is calculated as $R_g^2=\frac{1}{N}{\mathrm{\Sigma }}_{i=1}^{\mathrm{N}}{\left(r_i-C\right)}^2,r_i=\left(X_i,Y_i,Z_i\right)$. Centrality profile for each chromatin trace is generated by calculation of Euclidian distance between each step along the trace from the trace genomic center C.

Published: October 20, 2025