square I

100%

✓ Published0🌍 Public

Last edited Jul 22, 2021

Created on Jul 16, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

sequences

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.

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…

Fork of Random square shapes with react July 4,2022 - 1

A grid of overlapping squares spirals outward from the center of the canvas, each square's size, stroke thickness, and color modulated by a simple algebraic sequence. The visualization uses React to define a custom SVG component, generating 190 squares with dynamically computed properties. D3.js selects the SVG canvas and appends a group for layout, while the React component maps an array of calculated values to render each square with a drop-shadow filter and randomized RGB stroke colors. The result is an abstract composition of layered geometric forms.

NNita

70% match

Loading thumbnail…

squares

This example generates a grid of 18 faces, each rendered as a simple SVG composition of a square background, two circular eyes, and an arc-shaped mouth. The faces are created using React components, with random values for stroke width, eye offset, and mouth width applied per instance. The visualization relies on D3 v7 for generating the mouth path via `d3.arc`, and uses a fixed grid layout from `d3.range` to position the repeated face elements.

FFloweringDeathStar

70% match

Loading thumbnail…

A square module

The visualization displays two identical square modules positioned side-by-side on a gray background, each composed of five semi-transparent colored rectangles arranged in a grid pattern. The code uses React components to render SVG elements, with `MyRect` and `MyCircle` defined as reusable React functions. D3.js v5 is included in the HTML but not actively used in the rendering logic. The modules are translated using SVG transform attributes, with each rectangle given specific x and y positions, dimensions of 200 by 200 pixels, and an opacity of 0.8.

NNita

70% match

Loading thumbnail…

Fork of Fork of Fork of Random square shapes with react July 4,2022 - 2

A grid of randomly sized and colored squares, each with a thin contrasting outline, fills the viewport in an overlapping, chaotic arrangement. The squares are generated from a derived formula that calculates their positions and dimensions, while their stroke widths and RGB color values are randomized. Built with React and D3 v7, the visualization uses SVG `rect` elements and applies a drop-shadow filter for depth. The data is synthetic, computed directly in the React component rather than loaded from an external source.

NNita

69% match

Loading thumbnail…

Compact Squares with random Opacity

A grid of compact squares forms a large square, each cell filled with a radial gradient that creates a Saturn-like color blend. The visualization is generated entirely in React, rendering SVG rectangles in a nested loop with no spacing between them, and applies a drop-shadow filter for subtle depth. The opacity is noted in the code but remains commented out, so all squares render at full opacity. The layout is computed from fixed dimensions, with a 960-pixel side and 30-pixel cells, producing a 32-by-32 matrix.

NNita

68% match

Loading thumbnail…

Loading data with D3 and React

This example demonstrates a grid of colored squares, one for each CSS named color, rendered as React divs. It fetches a CSV file of color data from a GitHub gist using D3’s `csv` utility, then stores the parsed rows in React state via `useState` and `useEffect`. The background color of each square is set from the `'RGB hex value'` column. The visualization highlights the integration of D3’s data-loading functions with React’s state management for dynamic rendering.

Zzenoalive

68% match