Skip to main content
100%

Genes

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

This visualization displays a set of genes as colored rectangles along a horizontal axis, with each gene’s position defined by its start and end coordinates and its direction indicated by the rectangle’s orientation. It uses D3.js v4 with SVG rendering, binding the `genes` array to `rect` elements via `svg.selectAll("rect").data(genes).enter().append("rect")`. The rectangles are positioned at a fixed y-coordinate, with height 50, and use the `fill` property for color while black strokes outline each gene.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
88% match
Loading thumbnail…

HW Assign.

This visualization displays four genes as horizontal rectangles positioned along a genomic axis, with start and stop coordinates from a JSON dataset. Forward-oriented genes appear in green on one row, while reverse-oriented genes appear in red on a parallel row. The code loads data via d3.json, then creates SVG rectangles using d3.selectAll and .data().enter().append, with x and width attributes derived directly from each gene’s start and stop values, and fill color determined by orientation.

LLisaPicado
83% match
Loading thumbnail…

Gene Browser

This example demonstrates how D3.js v4 binds an array of JavaScript objects to SVG rectangles, producing a simple three-color gene visualization. It shows a static sequence of blue, green, and red bars arranged vertically, each fixed at a width of 200 pixels and a height of 50 pixels. The code uses `d3.selectAll("rect").data(gene).enter().append("rect")` to join the data array—which contains `fill`, `x`, and `y` properties—to new rectangles, setting their positions and colors via attribute functions. The data originates from a hardcoded array named `gene`, and the visualization is rendered directly into an SVG canvas using D3’s selection and data-join API, with no interactive or animated behavior.

CCraftbd
83% 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
83% match
Loading thumbnail…

Genome-2/10

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.

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

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
80% match