sequences

100%

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 15, 2021

This scatter plot visualizes nucleotide sequences from four DNA samples, mapping each position along the x-axis against a concatenated representation of nucleotides on the y-axis. The data originates from a CSV file containing sequence data, which is processed through a custom `btb` function that converts nucleotide letters into binary coordinate arrays. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, renders circles as SVG marks with tooltips showing formatted position values, and includes custom `AxisBottom` and `AxisLeft` components for tick labels.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

square I

Each nucleotide in the sequence is rendered as a column of four black-bordered squares, one per DNA base, whose fill opacity encodes its relative frequency at that position. The visualization highlights compositional patterns across the sequence, with darker squares indicating more abundant bases. Built with React components and D3’s `csv` loader, the data comes from a remote `nucleon.csv` file. The SVG rendering is handled through custom `Nucleon`, `Nucleotide`, and `Square` components, each drawing a fixed-size `rect` with an opacity value derived from the base’s proportion.

FFloweringDeathStar

73% match

Loading thumbnail…

DNA sequence

This visualization animates a synthetic DNA double helix, where each colored node represents a letter from a string of fake genes and pulses along a twisting, sinusoidal path over time. It shows the helix rotating continuously, with lines connecting complementary strands and opacity varying based on depth to suggest a 3D structure rendered in SVG. The code fires a `setInterval` to regenerate and update data every 25 milliseconds, using d3’s `scaleLinear`, `extent`, `range`, and `interpolateRainbow` for color mapping. React manages the component, with fragments wrapping the DNA sequence inside the app’s root element.

MMauricio García Benítez

72% match

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualizes hierarchical path data from a CSV of user clickstreams, showing the proportion of each navigation sequence in a metagenome sample. The interactive chart uses d3.partition and d3.arc to render the radial layout, with breadcrumb trails and percentage labels updating on hover via mouseover and mouseleave handlers. It fades non-ancestor segments and animates opacity transitions, using d3.hierarchy and d3.csvParseRows to process the data.

Ssupermoose

72% match

Loading thumbnail…

Fork of Sequences sunburst

This interactive sunburst chart visualizes hierarchical browser navigation sequences, showing the proportion of visits that begin with each path as a ringed radial layout. Built with D3 v4 in a React framework, it uses `d3.partition()` and `d3.arc()` to render the rings, while a breadcrumb trail above displays the current hovered sequence. The visualization animates on mouseover by fading non-ancestor nodes to 30% opacity and highlights the active path, with color assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from a CSV file of page-access sequences.

Ggitdhtuts

71% match

Loading thumbnail…

Sequences sunburst

This interactive sunburst visualizes hierarchical sequence data from a CSV file, using a D3 v3 partition layout to show the relative sizes of taxonomic paths. It displays a breadcrumb trail and percentage labels on hover, highlighting the ancestry of a selected node while fading others. The code uses `d3.layout.partition`, `d3.svg.arc`, and `d3.csv.parseRows` to build the chart, with custom color mapping and smooth opacity transitions on mouseleave. A legend toggle and clickable elements enhance exploration of the data.

GGeneExplorer

71% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical page-sequencing data from a CSV file, showing the proportion of visits that begin with each sequence of pages. The visualization uses a radial partition layout, with arcs representing nodes and an interactive breadcrumb trail displaying the current path. Built with D3 v4, it utilizes `d3.partition`, `d3.arc`, and `d3.hierarchy` to structure data, while `d3.scaleOrdinal` and `d3.schemeTableau10` assign colors to segments. Hovering over a segment highlights its ancestors in the sequence, and the central explanation shows the percentage of visits associated with that path.

LLo-ov

71% match

Loading thumbnail…

Sequences sunburst

A sequences sunburst visualization displays hierarchical path data as a ring of arcs, where each arc’s angle and radius encode the value of a sequence segment. Hovering over an arc highlights its ancestor chain and shows a breadcrumb trail in the upper left, along with the percentage of visits that begin with that sequence. The code uses D3 v4 APIs including `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring. Data is loaded from CSV files via `d3.text` and `d3.csvParseRows`.

Ffeizhi123

71% match

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical sequences from a CSV of page-access paths, showing the proportion of visits that begin with each sequence. Hovering over an arc highlights its ancestor path in the breadcrumb trail and displays the percentage of total visits it represents, while fading unrelated segments. Built with D3 v4, it uses `d3.partition()`, `d3.arc()`, and `d3.hierarchy()` to compute the radial layout, with colors from `d3.schemeTableau10`. The data is parsed from CSV rows into a tree structure via `d3.csvParseRows()`. Mouseover and mouseleave events drive the interactive highlighting and opacity transitions.

Bbertieip

70% match