Meiosis

100%

✓ Published0🌍 Public

Last edited Nov 26, 2023

Created on Sep 28, 2023

This example visualizes meiosis by modeling chromosome sets with genes and their alleles, demonstrating crossover at specified loci. The code constructs a pea plant organism with chromosomes containing genes like podColor and seedColor, then duplicates and swaps alleles past a crossover point. It renders the resulting chromatids as red rectangles using D3 v6’s data join (`selectAll().data().join()`) and SVG text for allele labels positioned by locus. The drawing functions `draw_chrom` and helper `dupChrom` handle the layout and mutation logic.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

DEMO

This example demonstrates an interactive chromosome visualization where blue and green rectangular bars represent chromatid pairs. Clicking on any rectangle splits it into orange and red segments at the click position, while a duplicate button clones the existing chromosomes and offsets them horizontally. The implementation uses D3 v7 with the `join` method to bind data to SVG `rect` elements, handling user interactions through D3 event listeners and updating the visualization with each state change.

MMark D. Clements

71% match

Loading thumbnail…

ChIP Seq Data Visualization

This example visualizes ChIP-seq data by mapping genes onto their respective chromosomes as animated SVG elements. Each gene node is positioned along a chromosome track, with tooltips or metadata revealing the gene symbol, name, and function. The visualization uses D3 v3’s force-directed layout (via `d3.forceSimulation` or the older `d3.layout.force`) to arrange the nodes, while the rendering relies on SVG and animation. The static dataset is embedded directly in the code, showing gene spacing and interval lengths for chromosome 1.

KKunnyKou

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

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

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

63% match

Loading thumbnail…

Fork of Circles with D3

This visualization depicts a cell during metaphase, showing the cell boundary, aligned chromosomes, spindle poles, and connecting spindle fibers. The D3 code renders the cell using SVG shapes, with the spindle assembly built from circles and lines, and chromosomes drawn as grouped rectangles with centromeres. The layout is generated programmatically, positioning components based on the cell’s dimensions and a fixed chromosome count.

DDarah de la Cruz

62% match

Loading thumbnail…

simple genome map

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.

BBrieLewis

62% match

Loading thumbnail…

Gene structure display

This visualization displays a linear genome map as a series of tiers, with colored segments representing genes along a specified range. Segments are automatically arranged into rows to avoid collisions, and hovering reveals a tooltip with details. The code uses D3 v3 with SVG rendering, custom collision detection, and underscore.js for data grouping, with data sourced from KEGG and a custom `d3.svg.geneStructure` function.

11Cr18Ni9

61% match