Unit Floor Plan 1st draft

100%

Unit Floor Plan 1st draft

✓ Published1🌍 Public

Last edited Mar 22, 2025

Created on Mar 22, 2025

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.

AI-generated description

A starting point for a drawing tool for a unit floor plan in archaeology.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

CCora

83% match

Loading thumbnail…

Fork of Unit Floor Plan 1st draft

An interactive archaeological floor-plan drawing tool overlays a standardized grid with corner balks onto an SVG canvas, using D3 v7 to render grid lines and border rectangles. Users draw walls and place artifact markers through mouse events that call `d3.pointer` and custom grid-snapping logic. The interface includes tool selection buttons for walls, objects, erasing, and clearing, with all elements snapped to the predefined 40-pixel grid increment.

NNita

82% match

Loading thumbnail…

Fork of Fork of Unit Floor Plan 1st draft

This interactive archaeological floor plan drawing tool provides a grid-based canvas for documenting excavation units, complete with corner balks and grid line labels. Users can draw walls, place objects, add text annotations, measure distances between points, and erase or clear elements, with options for customizing colors, wall thickness, object size, and font size. Built with D3.js v7, the visualization uses SVG for rendering the grid and drawing elements, and enables saving and loading plans via browser local storage and exporting as SVG or PNG files.

NNita

82% match

Loading thumbnail…

draw_plan_01

This example shows a scaled architectural floor plan of a house’s second story, dividing the space into four colored rooms plus a red stairwell, with a title below. Built with D3 v4, it renders SVG rectangles for each room, an outer wall outline, and a labeled caption. The code sets fixed pixel dimensions for the plan, positions elements via x/y attributes, and uses simple style fills and strokes to distinguish areas. No data source is used; the layout is hardcoded, and interactivity is absent.

BBillyBHWong

73% match

Loading thumbnail…

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.

CCora

70% 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

68% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental Scalable Vector Graphics (SVG) shapes—circles, rectangles, lines, and a path—assembled into a simple house-like composition on a 600x600 canvas. It shows how static SVG markup can define geometry with attributes like coordinates, dimensions, colors, and strokes. The code uses a single exported `main` function that injects the SVG directly into a container, and includes a variable controlling font size for interactive editing via VizHub's alt-drag widget.

SSampan Naik

67% match

Loading thumbnail…

Fork of Fork of Stratigraphy

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.

CCora

66% match