Cora

Fork of Fork of Stratigraphy

Sol LeWitt 2

This example reproduces a Sol LeWitt art piece using raw SVG elements created with the Document Object Model (DOM) API. It generates one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart, filling the full height of the browser window. The code uses `document.createElementNS` to construct SVG `<rect>` elements and appends them to an SVG container. The rectangles are drawn programmatically in a loop, without any external data source or visualization library.

Fork of Stratigraphy

Curran's Golden Compass with Mouse Following

A golden compass with eight jewel-like facets and a central dial responds to the mouse, which it replaces with a custom pointer (the cursor is hidden). The compass’s north and south needles rotate toward the cursor’s position, tracking its movement in real time. Built as a static SVG scene with CSS for layout and cursor control, it uses SVG gradients, masks, drop shadows, and polygon geometry to model the compass’s metallic surfaces and shading. No external libraries are required; the implementation relies solely on native SVG elements and inline JavaScript for mouse-following animation, with all visual components defined directly in the markup.

Alternate Sol LeWitt

The visualization creates an alternating pattern of horizontal and vertical lines that intersect to form a heart shape. It uses raw SVG elements—rectangles and masks—to manage the display, with the heart mask cutting a shape into the line fields. The code directly manipulates the DOM using JavaScript, setting attributes on `rect` and `mask` elements, with commented-out sections referencing alternative masking approaches. The lines are generated programmatically in a loop, and the entire composition is responsive to the browser window dimensions.

Fork of Sol LeWitt

A fork of Sol LeWitt generates a grid-based geometric pattern where horizontal and vertical lines intersect within a circular mask, with a rotating heart shape embedded at the center. The SVG rendering uses custom masks to selectively reveal or hide line clusters, and CSS keyframe animations drive the heart's rotation. Lines are drawn as 10-pixel-wide rectangles, and the entire composition fills the browser window via dynamically set width and height attributes.

Heart-Shaped Hole

Animation of Sol LeWitt

Golden Compass

This piece is a static, geometric SVG illustration of a stylized golden compass. Rendered entirely with a single HTML file, it showcases how layered `<polygon>` and `<circle>` elements, combined with `<radialGradient>` and `<linearGradient>` fills, create a faceted, jewel-like dial. The code uses SVG `<mask>` and `<filter>` definitions to generate an intricate internal cutout and a drop shadow for the compass needles, which are drawn with curved paths. The composition is purely decorative, with no interactive or data-driven elements.

Sol LeWitt 2

This example creates a generative, Sol LeWitt-inspired drawing using SVG masks to combine horizontal and vertical line grids into a circular composition. A large circle is used in two complementary mask definitions, `circleMask` and `circleMask2`, to reveal a set of 100 horizontal strips and a second set of 100 vertical strips. The first mask shows the horizontal lines within the circle while hiding the background, and the second mask does the opposite for the vertical lines, creating a crosshatched effect that only appears in the overlapping circular area. The code builds all SVG elements dynamically using the `createElementNS` API.

Overlapping lines

Fork of Nita's Unit Floor Plan 1st draft

This interactive archaeological floor plan drawing tool provides a canvas for users to sketch unit walls, place objects, add text labels, and measure distances on a gridded coordinate system. The application renders its grid and all drawn elements using Scalable Vector Graphics (SVG) and is built on the D3.js library (d3.v7), using methods like `d3.select`, `d3.pointer`, and `d3.drag`. Users can customize drawing parameters, save their work to local storage, and export the final plan as an SVG file or a PNG image via canvas rendering.

Unit Floor Plan 1st draft

This example demonstrates a hand-drawn unit floor plan for an archaeology site, displayed within a bordered 400x400 grid overlaid on a larger SVG canvas. The visualization shows a basic outline of an excavation unit, including a grid of gray lines that subdivide the space into 40-pixel increments and four shaded corner balks that indicate unexcavated areas. The code uses raw SVG elements such as `<rect>`, `<line>`, and `<path>` to construct the plan, with hard-coded coordinates for each shape. The rendering is done entirely through declarative SVG markup, with no JavaScript libraries or external data sources involved.

Fork of Fork of Sol LeWitt Reproduction

Fork of Scatter Plot with Color

This example displays the classic Iris Dataset, plotting sepal length against petal length for 150 flowers and using color to distinguish the three species: setosa, versicolor, and virginica. It includes labeled axes and a color legend. The visualization is built with D3.js, using `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and the `.join()` pattern to manage SVG elements. The code also modularizes reusable components for rendering axes and the color legend.

Sunset on Fundy

Fork of Sol LeWitt Reproduction

Drawing pad

This interactive drawing application allows users to paint freeform strokes on a Canvas element. It uses a toolbar to select stroke color and line width, and includes a clear button to reset the drawing surface. The code uses the Canvas `getContext`, `lineTo`, and `stroke` methods to render paths as the user drags the mouse, with the canvas resizing to fit the window. The interface is styled with CSS flexbox and a gradient title.

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.

SVG Fundamentals

A grid of square SVG rectangles demonstrates fundamental vector rendering and CSS interactivity. The 50x50 pixel shapes are positioned manually across a 1000x1000 canvas, creating a structured excavation unit pattern. Hovering a rectangle triggers a CSS transition that fills it with light gray, thickens its stroke to 7 pixels, and changes the border color to red. The example uses raw SVG elements with inline attributes and stylesheet rules rather than JavaScript libraries or data-binding frameworks.

SVG Fundamentals

This example demonstrates the VizHub V3 Runtime Environment’s continuous hot reloading, where holding Alt and dragging a number in the editor interactively updates a rendered font size. The code exports a `main` function that receives a `container` DIV and sets its inner HTML with an inline style. It uses plain JavaScript and the DOM API to display a centered “Hello World!” message, with no external libraries or data sources. The visualization shows how the platform simplifies the entry point while enabling real-time feedback through widget-driven state changes.

Rectangle

This example shows a single blue rectangle with rounded corners, drawn inside an SVG canvas. The shape is defined using the SVG `<rect>` element, with explicit attributes for width, height, position along the x and y axes, and corner radii. The code constructs the SVG directly in an HTML body, bypassing any external libraries or data sources. The rendering approach is straightforward static SVG, with the rectangle’s fill color set to blue.