100%

Fork of Unit Floor Plan 1st draft

✓ Published1🌍 Public

Last edited Mar 22, 2025

Created on Mar 22, 2025

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.

AI-generated description

Archaeological Floor Plan Drawing Tool

A digital drawing tool for creating archaeological unit floor plans. This tool allows archaeologists to document excavation units, features, and artifacts in a standardized digital format.

Features

Grid-based drawing system with standard archaeological grid units
Corner balks automatically included in the layout
Drawing tools for walls, features, and archaeological objects
Snap-to-grid functionality for precise measurements
Simple eraser tool for corrections
Clear button to start over

How to Use

Open index.html in a modern web browser
Select a drawing tool from the toolbar:
- Draw Wall: For creating walls, features, or boundaries
- Place Object: For marking artifacts or significant points
- Erase: To remove elements
- Clear All: To reset the drawing
Click and drag on the grid to draw
All elements will snap to the grid for precision

Customization

You can customize the grid dimensions and other settings in the grid.js file:

Grid size and position
Line spacing
Colors and styles

Future Enhancements

Export to SVG/PNG
Save and load drawings
Add text labels and measurements
Layer system for different excavation levels
Scale and measurement tools

License

Open source for archaeological use.

MIT Licensed

Similar vizzes

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

95% match

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

91% match

Loading thumbnail…

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.

CCora

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

72% match

Loading thumbnail…

Fork of FULL sol l. reprod. w/ d3

This example recreates a Sol LeWitt-inspired geometric wall drawing using the D3.js library. It shows a grid of thin, white horizontal and vertical strokes that are selectively revealed through circular mask shapes on a black background, creating layered optical patterns. The code uses `d3.select`, `d3.range`, and `d3.symbols` to generate the lines and masks, which are rendered as SVG elements. The visualization is driven by D3’s data-join methods to append and position the rectangles and paths.

Kkhaledakanan@gmail.com

69% match

Loading thumbnail…

Fork of D3 Implementation

This fork of a D3 implementation generates a grid-like pattern of horizontal and vertical bars across the full screen, masked by two overlapping circles to create an intersecting visual effect. The first mask reveals the bars only within a central white circle on a black background, while the second mask inverts this, hiding a circular section of the vertical strips. Built with D3 v7 and rendered as SVG, the code uses `d3.select`, `d3.range`, and chained `.join('rect')` operations to append and position 100 rectangles in each direction, dynamically sized to the browser window’s width and height.

Pprospirity

68% match

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using an SVG canvas. Four equal quadrants display distinct generative line patterns: horizontal bands in the top left, vertical lines in the top right, diagonal hatching in the bottom left, and a rotated diagonal grid in the bottom right, each confined by rectangular masks. The work uses D3 v6 to generate repeated rectangles via `selectAll("rect").join("rect")`, applying spatial transformations like `rotate(45)` and `translate(-100, 0)` to create geometric variations. The full browser window serves as the drawing surface, with each pattern built from 100 iterated shapes.

DDea Bardhoshi

68% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as an interactive SVG visualization. Two sets of thin horizontal and vertical rectangles are drawn on a full-window canvas, with circular masks (drawn via D3 masks) applied to reveal a central circular region where the lines intersect. It uses D3 v3's `select`, `append`, and data joins with `range` to generate 100 strips in each direction. The rendering is pure SVG, with masks defining the visible geometry.

AAprilF

67% match