DEMO

100%

✓ Published0🌍 Public

Last edited Sep 27, 2023

Created on Aug 31, 2023

This example demonstrates an interactive chromosome visualization where blue and green rectangular bars represent chromatid pairs. Clicking on any rectangle splits it into orange and red segments at the click position, while a duplicate button clones the existing chromosomes and offsets them horizontally. The implementation uses D3 v7 with the `join` method to bind data to SVG `rect` elements, handling user interactions through D3 event listeners and updating the visualization with each state change.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Meiosis

This example visualizes meiosis by modeling chromosome sets with genes and their alleles, demonstrating crossover at specified loci. The code constructs a pea plant organism with chromosomes containing genes like podColor and seedColor, then duplicates and swaps alleles past a crossover point. It renders the resulting chromatids as red rectangles using D3 v6’s data join (`selectAll().data().join()`) and SVG text for allele labels positioned by locus. The drawing functions `draw_chrom` and helper `dupChrom` handle the layout and mutation logic.

MMark D. Clements

71% match

Loading thumbnail…

Gene Browser

This example demonstrates how D3.js v4 binds an array of JavaScript objects to SVG rectangles, producing a simple three-color gene visualization. It shows a static sequence of blue, green, and red bars arranged vertically, each fixed at a width of 200 pixels and a height of 50 pixels. The code uses `d3.selectAll("rect").data(gene).enter().append("rect")` to join the data array—which contains `fill`, `x`, and `y` properties—to new rectangles, setting their positions and colors via attribute functions. The data originates from a hardcoded array named `gene`, and the visualization is rendered directly into an SVG canvas using D3’s selection and data-join API, with no interactive or animated behavior.

CCraftbd

71% match

Loading thumbnail…

Reproduction with D3

The visualization draws a grid of overlapping horizontal and vertical bars across the entire viewport. Two sets of 100 rectangles each are created using D3's selection and join operations, with dimensions tied to the window size. Masking via SVG circle masks creates a central circular window that reveals alternating black and white stripes. The code uses `d3.select`, `d3.range`, and chained SVG attribute setters within a React-free HTML page.

Aahora

68% match

Loading thumbnail…

fresh block

This visualization presents a simple genome browser, displaying four genes as colored rectangles positioned along a horizontal chromosome. Each gene’s sequence and a descriptive function label appear near its corresponding block, with forward-direction genes in green on the top row and reverse-direction genes in red below. Using d3.v4, the SVG elements animate in sequence with staggered transitions, applying `transition.delay` and `transition.duration` to sequentially reveal each rectangle and text. The data is hardcoded in the script, and the layout derives from each gene’s start position and sequence length.

HHeywhoyou22

68% match

Loading thumbnail…

D3 functions

This example demonstrates D3 data joins with interactive buttons that remove or modify circles in an SVG scatterplot. Clicking "Remove" pops the last item from an array of x/y coordinates, redrawing the remaining circles; clicking "Modify" replaces one random entry with new values. The code uses `select`, `scaleLinear`, and `max` from d3 v5, along with a custom `rand` utility, to update circle positions via enter/merge/exit selections. The visualization highlights how shared update logic handles both new and existing elements.

Llanphuonglenguyen

68% match

Loading thumbnail…

Genome Browser

This genome browser uses D3 v4 to display four genes, each with a name, DNA sequence, direction, and function. Green forward-oriented genes animate from the left, while red reverse-oriented genes animate from the right, with sequences and function labels moving alongside. A static ruler with tick marks at 1000-base intervals sits beneath them. The visualization uses animated SVG rectangles and text elements with `transition().duration(1500)` and staggered delays to illustrate gene positions along the genome.

HHeywhoyou22

67% match

Loading thumbnail…

Table_Cell Integration Trial12_final

This interactive visualization maps gene expression levels across subcellular locations, displaying net differential expression as red and blue color intensities on a stylized cell diagram. Users can select locations like the plasma membrane or nucleus to filter a sortable gene information table showing DEG values and associated biological pathways. Built with React and D3 v5, the SVG rendering uses `scaleSequential` with `interpolateBlues` and `interpolateReds` for coloring, while `d3.line` with `curveCardinal` draws cellular compartments. Gene data loads from external JSON and TSV files, with hover effects and animated table transitions.

Yyoungchun-kwon

67% match

Loading thumbnail…

click event pattern

This example demonstrates a click event pattern for interactive data visualization. A set of colored circles representing fruits (apples, lemons, peaches) can be clicked to select them, triggering a visual highlight with a black stroke. The scene is animated using D3 transitions, with circles entering, exiting, and resizing over time. The code uses D3 v5 modules such as `scaleOrdinal` for color and radius mapping, `select`, `range`, and `transition().duration()` to orchestrate the SVG rendering and smooth animations.

YYanxxx447

67% match