Skip to main content
100%

Gist 95d6dd88909671d05ec3a92b3aa5a25c

✓ Published0🌍 Public
Aannalabrozzi
Last edited Feb 10, 2018
Created on Feb 10, 2018

Four gene annotations slide into place along a ruler-tracked genomic coordinate axis, with forward-strand genes in teal and reverse-strand genes in green. The animated rectangles fade in sequentially using D3 v4 transitions, while a static ruler shows 100-, 500-, and 1000-base tick marks. Gene labels appear after the rectangles settle, using D3’s data join and SVG text elements.

AI-generated description

Similar vizzes

Loading thumbnail…

Genome-2/10

Four genomic sequences animate as colored rectangles sliding along a shared axis, each labeled by name and positioned by start and end coordinates. A ruler beneath the genes marks scale increments at 100, 500, and 1000 units. The visualization uses d3.v4 with data binding, transition delays for sequential animation, and SVG rect and text elements to render the gene map.

Aannalabrozzi
87% match
Loading thumbnail…

Random Gene

Four gene rectangles animate horizontally onto a genomic ruler, with forward genes in green and reverse genes in red, each labeled with a letter. The SVG uses d3 transitions with staggered delays to move each gene from off-screen to its start position. Tick marks at 100, 500, and 1000-unit intervals are drawn as black rects, while the gene positions come from a hardcoded JavaScript array. The visualization relies on d3.v4 selection methods and the transition API.

LLaurynKW
85% match
Loading thumbnail…

Gene coding

This visualization maps six gene annotations along a linear DNA ruler. Blocks, colored green or red according to their coding direction, animate into place at their start positions, with numbered labels fading in after all blocks. The D3 v4 script builds the SVG with block append/transition methods, while the ruler itself is composed of nested black rectangles at 100, 500, and 1000-unit scales generated from a simple loop. Data is embedded directly in the code.

CCraftbd
83% match
Loading thumbnail…

fresh block

Four gene annotations slide horizontally into position along two tracks, with forward-strand genes in olive on the top track and reverse-strand genes in burgundy below. Each rectangle fades in and glides from an offset starting point to its genomic start coordinate over 1.5 seconds, staggered by one-second delays, then gene name labels fade in after four seconds. The visualization uses d3.v4 selections, data joins, and the transition method with duration and delay attributes, rendering as SVG with a fixed 1000×400 canvas.

TTylerVaughan
83% match
Loading thumbnail…

genome browser

This example presents a simple genome browser visualization built with D3.js, displaying four annotated genes along a linear genome sequence. It shows the relative positions and orientations of genes as colored rectangles, with green indicating forward direction and blue indicating reverse direction, placed above and below a central axis respectively. The visualization includes a ruler with tick marks at 100, 500, and 1000 base-pair intervals, computed programmatically from the genome length. Using SVG rendering with animations, the code loads gene data from a JSON file, then uses D3 transitions to animate gene rectangles growing into place and tick marks drawing themselves sequentially, while gene name labels fade in after a delay.

AAdamBlaine1
83% 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
82% match
Loading thumbnail…

stupid genes...

Four gene blocks slide horizontally from off-screen positions toward their mapped locations along a linear sequence, with forward-direction genes in turquoise entering from the left and reverse-direction genes in salmon entering from the right. Gene names animate alongside each block, landing at their midpoints. Below the genes, a fixed ruler uses thin black rectangles of varying heights to mark every 100, 500, and 1000 base pairs, generated with `d3.range` and rendered via SVG `rect` elements. The visualization uses `d3.transition` with staggered durations to choreograph the entrance animation.

Aalexhoke
82% match
Loading thumbnail…

genome browser withha rula

This example shows a simple genome browser with four genes, each represented as a colored rectangle positioned along a horizontal axis. Forward-direction genes appear in olive green on the top track, while reverse-direction genes appear in dark red on the bottom track, with gene names fading in above each feature. A white ruler strip with tick marks at 100, 500, and 1000 base-pair intervals provides a scale reference. The visualization uses D3 v4 with SVG, animating rectangles via `transition()` and `delay()` to slide into place, while text labels fade in separately.

TTylerVaughan
81% match