genome browser withha rula

100%

genome browser withha rula

✓ Published0🌍 Public

Last edited Feb 13, 2018

Created on Feb 8, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/TylerVaughan/'>TylerVaughan</a>'s block: <a href='http://bl.ocks.org/TylerVaughan/3dda73c08a2d35d6265494ad99f90b9a'>fresh block</a>

forked from <a href='http://bl.ocks.org/TylerVaughan/'>TylerVaughan</a>'s block: <a href='http://bl.ocks.org/TylerVaughan/a1639039ca5bb62aa9bac485c6de2ff6'>genome browser</a>

mit Licensed

Similar vizzes

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

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

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

89% match

Loading thumbnail…

The genome browser

This visualization presents a genome browser that displays gene sequences along a linear genome track, with forward and reverse genes color-coded in green and red. It shows how genes are positioned and oriented within a genome, with tick marks marking 100, 500, and 1000 base-pair intervals. The view animates gene rectangles from an initial off-track position into their correct places along the track, while labels for gene names and phage numbers fade in sequentially. The code uses D3.js (version 3.5.5) to bind JSON data, manipulate SVG elements, and apply transitions.

AAdamBlaine1

87% match

Loading thumbnail…

genome browser

This example presents a simple linear genome browser visualization, displaying gene positions along a horizontal axis. It shows a set of named genes with start and stop coordinates, rendered as a single white rectangle with black border, while tick marks of varying heights indicate genomic positions at 100, 500, and 1000 base-pair intervals. The visualization uses D3.js (version 3.5.5) to bind the gene data, append SVG elements, and animate the tick marks’ appearance with staggered transitions. The code reads gene coordinates from an embedded JavaScript array and uses `d3.selectAll`, `.data()`, and `.transition().duration()` to animate the ruler-like ticks across the genome length.

BBrandonStroud

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

87% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genomic axis, using pink rectangles to represent forward-oriented genes and black tick marks to indicate genomic scale intervals. It employs D3.js to append SVG rectangles and groups, binding each gene's start and stop coordinates to the x-position and width of its corresponding shape. The tick marks animate into place via D3 transitions, with increasing durations for smaller intervals, while the genome ruler itself is a static black-outlined rectangle. The underlying data comes from a hardcoded JavaScript array of gene objects.

SSmith5mr

87% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genomic sequence of 7,800 base pairs, with genes colored green for forward direction and blue for reverse. The D3.js (v3.5.5) code loads gene coordinates from a JSON file and animates their rectangles growing from zero height to full size after a 3-second delay. A separate set of tick marks, generated by iterating through all genome positions, appears at 1000, 500, and 100 base-pair intervals, with each tier’s marks animating in sequence to build the ruler. The SVG rendering includes a white backbone rectangle and black tick lines, all scaled by dividing base-pair coordinates by 10 for display.

BBrandonStroud

87% match