Skip to main content
SimilarExport ZIP
100%

Fork of Nita's Unit Floor Plan 1st draft

✓ Published2🌍 Public
CCora
Last edited Mar 29, 2025
Created on Mar 29, 2025

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.

AI-generated description
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
93% 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
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
83% 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
71% 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
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
65% 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
64% match
Loading thumbnail…

Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

An animated SVG composition generates a grid of two hundred colorful vertical rectangles, each with a randomized fill color and a looping vertical translation animation that shifts it upward by 300 pixels over a random duration. A white circle is drawn at the center of the screen, while a second grid of horizontal rectangles is masked using a circle element within an SVG `<mask>` definition, revealing the horizontal stripes only inside the circular area. The code uses vanilla JavaScript with the Web Animations API (`element.animate`) and dynamically creates SVG elements via `createElementNS`.

Rraturi22@gmail.com
63% match