Random Gene

100%

✓ Published0🌍 Public

Last edited Feb 13, 2018

Created on Feb 1, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Simple Genome Map

This genome map visualizes four genes along a linear sequence, with forward-oriented genes shown in green and reverse-oriented genes in red. The SVG rendering uses D3 v4’s `select`, `append`, and `transition` APIs to animate each gene’s position from off-screen to its mapped start coordinate over one second, with delays proportional to the gene’s start value. Gene names are overlaid using `d3.text`, and dimensions come from the `data.json` file.

KKunnyKou

82% 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…

fresh block

Animated genome browser visualization displays four gene sequences as colored rectangles sliding from off-screen into their mapped positions. Forward genes appear green on the top track, reverse genes red on the bottom track, with each sequence labeled and annotated with a color-coded function description. The code uses D3 v4 selections with `transition()` and `delay()` to animate both rectangles and text elements, computing element widths from sequence length and positioning based on each gene’s start coordinate. Data is stored as a hardcoded JavaScript array of gene objects.

HHeywhoyou22

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

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

81% match

Loading thumbnail…

genemapping animated

This example maps four genes from a small JSON dataset onto an animated SVG visualization. Each gene is represented by a colored rectangle whose width corresponds to its start and stop coordinates, with orientation indicated by color (purple for forward, teal for reverse) and vertical placement. The animation uses `d3.transition` to slide each gene from off-screen into its mapped position along the x-axis, with labels appearing at the midpoint of each gene. The code leverages D3 v4’s selection, data join, and attribute tweening to choreograph the entry, while gene names and positioning are derived directly from the data fields.

BBrieLewis

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

80% match

Loading thumbnail…

Feb 21st- text inside rectangle

This example displays four gene features as colored rectangles along a horizontal axis, with green rectangles for forward-oriented genes and red rectangles for reverse-oriented ones. Each rectangle is labeled with its gene name centered inside using SVG text elements. The visualization uses d3.json to load the data and d3.selectAll to bind it, with each gene’s start and stop positions determining the rectangle’s placement and width. The code relies on SVG rect and text elements, with transforms translating each group to its appropriate y-coordinate based on orientation.

LLisaPicado

80% match