FloweringDeathStar

@FloweringDeathStar·12 public vizzes

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.

Jul 22, 2021

Loading thumbnail…

srubio smile face

This visualization presents a stylized smiling face constructed from basic geometric shapes. It displays a single face, generated through React components, with a yellow background circle, black-stroked borders, and abstracted features. The rendering uses SVG within a React framework, orchestrated by specific components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code leverages `d3.arc` to create the mouth path and utilizes random values for stroke width, eye offset, and mouth dimensions, resulting in a unique face on each render. The overall structure is defined in a React component and rendered into a web page.

Jul 16, 2021

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.

Jul 16, 2021

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.

Jul 16, 2021

Loading thumbnail…

un population margin axis React

A horizontal bar chart displays the top ten countries by UN population data for 2020, sourced from a CSV file. Built with React and D3 v7, SVG rectangles represent values scaled by `scaleLinear` and banded by `scaleBand`. Custom `AxisBottom` and `AxisLeft` components render tick marks and labels, while the `useData` hook asynchronously loads and parses the dataset.

Jul 15, 2021

Loading thumbnail…

Fork of un population margin

This fork of the UN population margin example displays the ten most populous countries for 2020 as a horizontal bar chart. It loads CSV data from a GitHub gist using `d3.csv`, then maps each country’s population to the bar width via `scaleLinear` and the country name to vertical position using `scaleBand`. React manages the component state and renders SVG `rect` elements within a margin-translated group, with D3 v7 providing the scaling functions.

Jul 13, 2021

Loading thumbnail…

un population

This example visualizes the top 10 countries by population in 2020 using a horizontal bar chart rendered with SVG. The bars are scaled linearly by population and positioned with a band scale, with each rectangle’s width reflecting the population value. The data is loaded from a CSV file using `d3.csv`, processed to extract the 2020 column, and rendered in React with state management. The visualization uses `scaleBand` and `scaleLinear` from d3.v7 to map countries and populations to screen coordinates.

Jul 13, 2021

Loading thumbnail…

load and render react and d3 srubio

This example renders a donut chart of CSS named colors using React for component structure and D3 v7 for data loading and shape generation. It loads a CSV of color names and RGB values via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute and draw the sectors as SVG paths, each filled with its corresponding color. While the data loads, a large "Loading.." message appears, and the final visualization fills the viewport with a single multi-colored ring.

Jul 13, 2021

Loading thumbnail…

Fork of MNouse follower

This fork of a mouse-follower example displays a plain-text summary of the CSS named color dataset, showing file size, row count, and column count. It loads the CSV from a GitHub gist using D3’s `csv` method, then React and ReactDOM render the computed metrics. The parent component fetches data in a `useEffect` hook, while a separate `message` function formats the statistics, using `d3.csvFormat` to calculate byte size. The visualization is minimalist, relying solely on textual output rather than graphical elements.

Jul 12, 2021

Loading thumbnail…

Fork of Vega-Lite API Template srubio

This example visualizes automobile performance data from a CSV file, plotting engine weight against horsepower while using circle size to encode fuel efficiency (mpg) and color to encode weight. The visualization is built programmatically using the Vega-Lite API, which constructs a declarative specification in JavaScript. The code registers Vega, Vega-Lite, and the Vega-Lite API, and renders the chart as an SVG via D3. It includes custom configuration for axis styling and tooltips, and the data is fetched asynchronously using the D3 CSV parser.

Jul 12, 2021

Loading thumbnail…

data vis srubio

This visualization displays the size of a CSS named colors dataset by showing its file size, row count, and column count in large text. The page loads a CSV file from a GitHub gist and uses d3.csv to parse the data, d3.csvFormat to calculate the byte size, and document.getElementById to update the message container. The visualization presents the computed statistics as plain text, making the data dimensions immediately readable.

Jul 12, 2021

Loading thumbnail…

MNouse follower

A single gray circle follows the mouse cursor across an SVG canvas. The React component tracks pointer coordinates via an `onMouseMove` event handler and updates the circle's center position through the `useState` and `useCallback` hooks. Rendering uses React 16.9 and ReactDOM to draw the circle as an SVG `<circle>` element, with a fixed radius of 30 pixels on a 960 by 500 viewport.

Jul 11, 2021