Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Unit Floor Plan 1st draft

✓ Published1🌍 Public
NNita
Last edited Mar 22, 2025
Created on Mar 22, 2025

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.

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
  • Text annotations with customizable font size
  • Measurement tool to calculate distances between points
  • Color customization for all drawing elements
  • Wall thickness and object size adjustments
  • Export drawings as SVG or PNG files
  • Save and load functionality using browser local storage

How to Use

  1. Open index.html in a modern web browser
  2. Select a drawing tool from the toolbar:
    • Draw Wall: For creating walls, features, or boundaries
    • Place Object: For marking artifacts or significant points
    • Add Text: For adding text labels and annotations
    • Measure: For measuring distances between points
    • Erase: To remove elements
    • Clear All: To reset the drawing
  3. Use the options panel to customize:
    • Colors for walls, objects, and text
    • Wall thickness
    • Object size
    • Text content and font size
  4. Click and drag on the grid to draw walls
  5. Click on the grid to place objects or text
  6. Use the measurement tool to calculate distances
  7. Save your work using the Save button, and load it later
  8. Export your floor plan as SVG or PNG

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

  • Layer system for different excavation levels
  • Advanced measurement tools (areas, angles)
  • Predefined archaeological symbol library
  • Collaboration features
  • Scale calibration
  • Multiple unit management
  • Stratigraphic relationships

License

Open source for archaeological use.

MIT Licensed

Similar vizzes

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
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
93% 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
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
67% match
Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This visualization shows a grid of vertical, randomly colored rectangles overlaid with a large white circle in the center. A second grid of horizontal rectangles is masked to appear only inside that central circular region. The piece is built by constructing SVG elements directly, including both vertical and horizontal rectangles, and using a mask with a circle to clip the horizontal grid to the circular area. The code uses the Document API to create SVG elements and applies inline styles for fill colors and geometry.

NNita
66% match
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
65% match