Fork of Fork of Stratigraphy

100%

Fork of Fork of Stratigraphy

✓ Published0🌍 Public

Last edited Sep 1, 2025

Created on Sep 1, 2025

This example shows a hand-coded stratigraphic cross-section of a west wall, rendered as three stacked, irregularly shaped layers in earthy tones. The visualization uses raw SVG path elements to define the geological strata boundaries and fills them with solid colors, while a label identifies the wall orientation. A JavaScript script attempts to add red lines to the SVG container using the DOM API `createElementNS` and `setAttribute`, though it references an undefined `line` variable. The code relies on hard-coded coordinates rather than a data-driven library or external dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stratigraphy

This fork of Stratigraphy by CoraWoolsey renders a colored cross-section of geological layers, labeled “West Wall,” using raw SVG paths in an HTML page. The visualization shows three distinct stratigraphic units as irregular, hand-drawn-shaped polygons with earthy fills—brown, cream, and pink—bounded by vertical unit lines and subtle horizontal graph lines. The code defines the shapes manually via SVG `<path>` elements and includes a JavaScript loop that attempts to add red rectangles but is non-functional. No external libraries are used, and the rendering relies entirely on native SVG elements.

CCora

94% match

Loading thumbnail…

Stratigraphy Enlarged

This visualization shows an enlarged stratigraphic cross-section of seven distinct geological layers within a bordered excavation rectangle, with each layer colored differently and separated by horizontal depth lines at 10cm intervals. The SVG-based graphic represents unexcavated soil as a gray background rect, while each layer’s shape is drawn as a custom path with varying depth coordinates that mimic irregular sediment boundaries. The renderer uses inline SVG elements within an HTML page, and path elements define each layer’s polygon, with hover styles applied to reveal hidden red text labels. The layout includes a background gradient and stroke lines that delineate the vertical depth scale.

CCora

81% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG and CSS can create a simple geometric composition of four colored lines arranged diagonally on a canvas. The lines, defined with precise coordinates and varying stroke widths, produce an abstract visual pattern. The rendering relies on inline SVG elements within an HTML document, styled minimally through an external stylesheet, while the page title and header introduce a playful tone. The code uses the raw SVG API for line drawing, with no additional JavaScript libraries.

Eeric.r.thornhill@gmail.com

70% match

Loading thumbnail…

Fork of Editing Faux Data Viz

This example displays a collection of hand-crafted SVG waveform paths drawn on a light gray canvas. Each path is rendered as a black, unfilled stroke, creating a set of overlapping curves that resemble abstract data plots or signal traces. The visualization uses D3 v7 to append the SVG elements, with path data defined as static string constants in JavaScript. The code constructs rectangular background layers and a main container, then iterates over the path array to add each curve with a consistent stroke style.

CCurran Kelleher

69% match

Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris

69% match

Loading thumbnail…

Fork of W1 SVG essentials

A demonstration of SVG shape creation using only basic structural elements is depicted. The visualization, rendered as an SVG, shows a single thick white line crossing the canvas, with additional elements like circles and rectangles present but commented out. The code explores fundamental shape syntax, layering, and symmetry, with notes indicating a practice of basic SVG components. The example uses raw SVG markup and emphasizes learning through experimentation, as demonstrated by the inactive path commands and the developer's comments about future exploration of arcs and curved forms.

Ccuore.fakhri@gmail.com

69% match

Loading thumbnail…

Fork of Line Graph Figma input

This example visualizes a single bold black line winding across a white 960×500 SVG canvas, with coordinates that trace a pronounced curve from the upper-right down to the lower-left. The rendering uses raw SVG elements defined directly in the HTML, including a `clipPath` to confine the stroke, while the JavaScript entry point imports `select` from `d3` and a custom `message` from a local ES6 module to display "Hello VizHub!" on the page. The code demonstrates how to combine D3 utility functions with modular imports, though the line itself is static and not generated by D3's data-driven methods.

Aastrologyhesitant

69% match

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates layered SVG path strokes on a solid orange background, creating a geometric composition of angular line work. Each path element is rendered without fill, except one inner path that uses yellow fill, while all strokes appear in yellow with a consistent width of five pixels. The paths are defined using SVG’s `d` attribute with absolute and relative commands like `M`, `l`, and `L`, producing a series of intersecting diagonal and horizontal lines that suggest depth or motion. The example relies on basic SVG markup embedded directly in an HTML document, with CSS styling applied to the `path` elements.

Ccachetetanger

69% match