Tell us what works and what could be better. We read every submission.
@acrithary·3 public vizzes
This example presents an interactive genome browser for phamerator.org, visualizing gene positions and directions along a linear genome. Genes are rendered as animated rectangles that grow and color-code direction—green for forward, red for reverse—while staggered vertically to avoid overlap. The visualization includes a genome axis with tick marks at intervals, and users can hover over genes to see Pham identifiers and GC content, or click to access a BLAST link for further sequence analysis.
The visualization displays three horizontal stripes stacked vertically, alternating between teal and yellow. Each stripe is a fixed rectangle rendered as SVG. The code uses D3.js version 3.5.5 to select the body, append an SVG container, and create the rectangles with explicit x, y, width, and height attributes. Fill colors are applied via inline styles, with no interaction or animation present.
This example shows a network of interconnected nodes that drift and collide in a two-dimensional space, with each node rendered as a small circle and links drawn as straight lines between connected points. The visualization uses D3’s `forceSimulation` to compute the physics of node movement, including charge repulsion and link constraints, while the `forceCollide` behavior prevents overlapping circles. The data comes from an embedded JavaScript array of nodes and links defined in the page source, and the code relies on D3 v3.5.5’s `d3.select` and `d3.force` APIs to update positions and draw the SVG elements in each animation tick.