Skip to main content
Log in
X

xyzcorrupt@gmail.com

@NotThimasNotLH·15 public vizzes

Loading thumbnail…

a

This visualization displays a collection of horizontal bars, each filled with a gradient or solid color, arranged across a wide SVG canvas. The bars are positioned at varying x-coordinates and share a consistent height, with text labels rendered as paths above them. Built with React and SVG, the example uses inline SVG elements like `rect` and `path` to construct the chart, with linear gradients defined for color fills. The data appears to be static, embedded directly in the markup rather than loaded from an external source.

Jul 13, 2024
Loading thumbnail…

Contour Plot

This contour plot visualizes a 2D function’s level sets, with each colored band representing a distinct elevation range. The SVG rendering uses filled rectangles and complex path coordinates—drawn via vector paths rather than a raster grid—to outline the contour lines and label regions. It is built with raw SVG path data, employing cubic and quadratic Bézier curves (via `C`, `Q`, and `V` commands) to trace the smooth isolines, and relies on linear gradients for the color fills. The source appears to be a computed dataset, encoded directly into the SVG's coordinate system.

Jul 12, 2024
Loading thumbnail…

Contour Plot

This contour plot visualizes a data surface through layered SVG paths and grouped rectangles, using filled shapes to represent different value bands. The visualization renders with React and SVG, employing path elements with complex cubic and quadratic Bézier curves to trace contour lines. A color scale ranges from dark purple through magenta and orange to pale yellow, with each colored region corresponding to a specific elevation range in the plotted dataset. The implementation uses direct SVG path data rather than a charting library, providing precise control over the geometric contour representation.

Jul 7, 2024
Loading thumbnail…

Bar Graph

This example shows a bar graph with a horizontal layout, using colored rectangles to represent data values. The visualization includes a legend with tick marks and labels, rendered as SVG elements. The code defines the chart using plain React with SVG primitives like `<rect>` and `<line>` for the bars and axes, while text elements label the categories. The data appears to be hardcoded within the SVG markup, and the rendering approach relies on static SVG attributes for positioning and styling.

Jul 7, 2024
Loading thumbnail…

Donut Chart

This donut chart displays six categorical segments arranged in a circular ring, with each slice sized proportionally to its value and distinguished by a unique color. The visualization uses static SVG paths with hardcoded coordinates to define the arc shapes, and a white circle overlay to create the donut hole effect. Rendered as a standalone React component, the chart is built with native SVG elements rather than a charting library, making it a lightweight, dependency-free example of hand-crafted data visualization.

Jul 7, 2024
Loading thumbnail…

a

This example shows an animated SVG path drawing itself over time, tracing an intricate, meandering line across an 800×600 canvas. The path is styled with `stroke-dasharray` and `stroke-dashoffset` and animated using a CSS `@keyframes` rule, which transitions the offset to zero over four seconds. The visualization relies on native SVG and CSS animation within an HTML document, with no external libraries or data bindings. The code is written for React, though the example itself is a standalone markup file demonstrating the core technique.

Jul 1, 2024
Loading thumbnail…

Gas Prices

This example visualizes the rising and falling price of gasoline over time using a line chart. The chart plots price points across a continuous timeline, with hover interactions that display the exact date and price values for each data point. The visualization is built with React and uses the Visx library for chart rendering, including its scale functions for mapping data to pixel coordinates. The data is derived from a static dataset embedded in the code, and the project is set up as a reusable React component.

Jun 30, 2024
Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal color legend with nine rectangular swatches, each labeled with a tick mark, rendered as static SVG elements. The visualization demonstrates a React-based starter template that uses raw SVG markup within JSX to display a sequential color scale. The file includes a complete HTML page with CSS and JavaScript, where the SVG is defined directly in the index file. The code uses no external libraries, relying solely on React's rendering of SVG elements like `<rect>` and `<line>` to create the legend, though the underlying data structure is not shown beyond the hardcoded color positions.

Jun 29, 2024
Loading thumbnail…

Donut Chart

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

Jun 23, 2024
Loading thumbnail…

Fork of Interactive Stacked Bar Chart

This example shows a horizontal stacked bar chart displaying the estimated population of the 20 most populous countries in 2010, broken down by religion. Hovering over the legend highlights the corresponding segment within each bar, dimming all others. The visualization uses data from the Pew Research Center's Global Religious Landscape report. The code leverages D3.js (v7) utilities such as `stack`, `flatRollup`, `scaleBand`, and `scaleOrdinal` to process and render the chart, with responsive axes handled by the `@curran/responsive-axes` library.

Jun 23, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js and SVG rendering. It displays a grid of horizontal and vertical black lines that form a geometric pattern across the full viewport, with a circular white mask creating a negative-space shape in the center. The code uses D3 selections with `range`, `join`, and `attr` to generate repeated rectangles on each axis, while masks are built with `append('mask')` and SVG circles. The rendering is entirely procedural, generating 100 lines per direction from data arrays rather than loading external data.

Jun 16, 2024
Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of Sol LeWitt’s geometric wall drawings, this example uses D3 to compose a dense grid of horizontal and vertical stripes. Two SVG masks, each populated with a row of distinct symbol shapes, selectively hide or reveal the underlying line work to create layered, patterned intersections. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask paths, with `selection.call` applying the mask logic to the main SVG. The result is an algorithmic reinterpretation of LeWitt’s systematic, rule-based art, rendered entirely as vector graphics.

Jun 16, 2024
Loading thumbnail…

Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt wall drawing using SVG. It displays a grid of horizontal and vertical bars, but only within two circular regions at the center of the canvas. Outside these circles, the rectangular elements are hidden. The code creates two SVG masks to control the visibility: the first mask reveals a white circle over a black background for the horizontal bars, while the second mask uses a black circle on white to show the vertical bars. All elements are generated procedurally through the SVG API in a single HTML file.

Jun 9, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using two sets of horizontal and vertical stripes that interact with a circular mask. The circle at the center masks the horizontal stripes, while an inverted mask allows vertical stripes to appear only inside a second circular region. The code builds an SVG dynamically with JavaScript, creating 100 striped rectangles in each orientation and applying SVG masks to achieve the visual effect. It demonstrates a stark, geometric composition based on the artist’s generative instructions.

Jun 9, 2024
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape construction in an HTML document. The visualization shows overlapping red and green circles, a navy diagonal line, a black polyline, and a closed path, all rendered directly within an `<svg>` element with a 960 by 500 coordinate space. Using the SVG API, the code applies fill colors, stroke properties, and explicit coordinate attributes like `cx`, `cy`, `r`, `x1`, `y1`, and `d` to define each shape. A commented-out `<rect>` block indicates intentional exploration of different shape attributes, while the paths rely on SVG path data syntax for their geometry.

Jun 9, 2024