Genome-2/10

100%

✓ Published0🌍 Public

Last edited Feb 11, 2018

Created on Jan 30, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/annalabrozzi/'>annalabrozzi</a>'s block: <a href='http://bl.ocks.org/annalabrozzi/1e692ad6138aab13697b7a7b103d4f55'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Gist 95d6dd88909671d05ec3a92b3aa5a25c

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.

Aannalabrozzi

87% 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

86% match

Loading thumbnail…

genome browser

This example displays a schematic genome browser with four gene rectangles positioned along a horizontal axis, color-coded by direction (green for forward, red for reverse) and labeled by name. A central track with tick marks represents the genomic coordinate scale. Built with D3 v4, the visualization uses SVG rects and text elements, animating gene positions and opacity via transitions that move the rectangles from off-screen starting points to their target coordinates over 2.5 seconds.

TTylerVaughan

85% match

Loading thumbnail…

simple genome map

This example visualizes a simple linear genome map, showing four genes as colored rectangles arranged along a horizontal axis. The green and red rectangles indicate forward and reverse orientations, respectively, with each gene labeled by name. The data comes from a local `data.json` file, loaded with `d3.json`, and each gene’s position and length are derived from its start and stop values. Using D3 v4, the code appends SVG `rect` elements for the genes and `text` labels, animating them into place with `transition().duration(1000).delay()` based on each gene’s start position.

BBrieLewis

85% 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

85% match

Loading thumbnail…

genome browser

This visualization presents a linear genome browser for a synthetic DNA sequence, displaying four annotated genes along a horizontal genomic axis. It shows the relative positions, lengths, and orientations (forward in green, reverse in red) of each gene, with staggered vertical offsets for readability. The visualization animates the appearance of gene blocks and labels using D3 transitions, and it renders tick marks at 1000, 500, and 100 base-pair intervals to indicate scale. The code uses D3’s selection and transition methods (e.g., `.transition().delay().duration()`) to sequentially reveal the genome, starting with the ruler, then the gene rectangles, and finally the text labels. Gene data comes from a JSON file, and the scale is fixed at one pixel per ten base pairs, with the SVG width set to one-tenth of the genome length.

BBrandonStroud

84% match

Loading thumbnail…

genome browser(testing3)

This example presents a genome browser visualization that maps four genes across an 8,000-base-pair genome, displaying each gene’s position, direction, and pham identifier. It shows gene orientation and relative size through animated rectangles that slide into place from outside the genome track, with labels and tick marks for scale. The visualization uses D3.js (v3) selections, data binding with `d3.json`, and `transition` to animate the rectangles. Tick marks for thousands, five-hundreds, and hundreds are generated programmatically, and the genome length and gene data come from an external JSON file.

DDarius9

84% match

Loading thumbnail…

simple genome map

This example presents a simple genome map, visualizing four genes as horizontal bars positioned along a linear sequence. Each gene is rendered as a colored rectangle, with green indicating forward orientation and red indicating reverse orientation, and is labeled with its name. The code loads data from a JSON file using `d3.json` and creates SVG groups for each gene. Using `transition()`, the bars animate from a starting offset to their final positions, with delays tied to each gene's start coordinate, illustrating the relative locations of genetic features.

LLisaPicado

84% match