Feb 21st- text inside rectangle

100%

Feb 21st- text inside rectangle

✓ Published0🌍 Public

Last edited Feb 21, 2017

Created on Feb 21, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

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

79% match

Loading thumbnail…

simple genome map

This example presents a simple genome map, visualizing four genes as horizontal bars positioned along a linear sequence. Each gene is rendered as a colored rectangle, with green indicating forward orientation and red indicating reverse orientation, and is labeled with its name. The code loads data from a JSON file using `d3.json` and creates SVG groups for each gene. Using `transition()`, the bars animate from a starting offset to their final positions, with delays tied to each gene's start coordinate, illustrating the relative locations of genetic features.

LLisaPicado

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

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

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

77% match