simple genome map

100%

simple genome map

✓ Published0🌍 Public

Last edited May 2, 2017

Created on Feb 21, 2017

This simple genome map visualizes gene positions along a linear chromosome, with each gene represented as a rectangle whose horizontal span corresponds to its start and stop coordinates. The visualization distinguishes gene orientation by color and vertical placement: forward-oriented genes appear in green at the top track, while reverse-oriented genes appear in red on a lower track. Built with D3 v4, the code loads data from a JSON file and binds it to SVG rectangles, computing each rectangle’s width from the difference between stop and start values. The author uses basic data joins and attribute setters without scales, keeping the mapping directly proportional to the raw numeric coordinates.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/ec90702f0e132dc4516c0d483c9f7030'>simple genome map</a>

mit Licensed

Similar vizzes

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

94% match

Loading thumbnail…

simple genome map

A simple genome map displays four genes as colored horizontal bars along a linear chromosome. Green bars represent forward-oriented genes, red bars represent reverse-oriented genes, with each bar’s length corresponding to its start and stop coordinates from a local `data.json` file. The visualization uses D3 v4’s data join (`d3.json`, `selectAll`, `enter`) to append SVG groups positioned via `translate` transforms. Genes are manually offset vertically by orientation, with blue strokes outlining each bar.

KKerchoo

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

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

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

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

82% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genome sequence, with genes drawn as colored rectangles that animate downward into place above and below a central axis based on their forward or reverse direction. The SVG rendering uses D3.js to bind gene data from a JSON file, while tick marks at 100, 500, and 1,000 base-pair intervals are animated with staggered transitions. The code relies on `d3.json` for data loading, `transition().duration()` for sequential animations, and `attr("transform")` to position tick groups. The genome length is fixed at 7,800 base pairs, with gene labels fading in after the rectangles settle.

AAdamBlaine1

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

82% match