Skip to main content
100%

I'm lost

✓ Published0🌍 Public
Aalexhoke
Last edited Feb 8, 2018
Created on Feb 8, 2018

Four gene rectangles slide horizontally onto an SVG canvas from opposite edges, with forward-direction genes entering from the left and reverse-direction genes from the right. The animation uses chained d3 transitions with a two-second duration to move each rectangle to its genomic start position, while the text labels travel alongside. The visualization encodes gene direction through vertical placement and color, placing forward genes in turquoise at the top and reverse genes in salmon below. The code defines the gene data inline as JavaScript objects with start, end, and direction properties, then applies them using d3 selections, data joins, and the transition.attr method.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
84% 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
84% 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
80% 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
80% 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
79% match
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
79% 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
79% match
Loading thumbnail…

genemapping

This example visualizes gene mappings by rendering each gene as a colored rectangle positioned along a horizontal axis according to its start and stop coordinates. Genes on the forward orientation appear in purple on an upper track, while reverse-oriented genes appear in teal on a lower track, with labels centered above each rectangle. The visualization uses D3.js v4’s selection and data join methods to bind the JSON data to SVG groups, then appends rectangles and text elements with attributes computed from the data. The code directly maps each gene’s orientation to its vertical placement and fill color.

BBrieLewis
79% match