Skip to main content
SimilarExport ZIP
100%

In-Output

✓ Published0🌍 Public
BBillyBHWong
Last edited Nov 2, 2017
Created on Nov 2, 2017

This example presents a static layout of a residential property interface with a right-side control panel, showing building details like gross square footage, floor count, and room numbers. The visualization uses D3.js v4 to append an SVG canvas and text element, while Semantic UI provides styled input fields, checkboxes, a slider for adjusting rear yard size, and a button for requesting sample drawings. The layout combines a blue sidebar for user controls with an empty main drawing area, though the code currently displays only placeholder text rather than an actual floor plan or data-driven graphic.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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…

CSCE-5320 ICE-5

This example displays a static house illustration built with SVG shapes such as rectangles, lines, ellipses, and a path, layered over a light green lawn and blue roof. A React and D3 v7 setup loads CSV data from a GitHub gist, calculates the formatted data size in kilobytes, and reports the row and column counts in a message area. The page styling uses CSS to center content and apply a goldenrod background, while the SVG renders directly in the browser.

LLG0498
70% match
Loading thumbnail…

House / d3

A static SVG scene depicts a stylized house with a red roof, a yellow sun, a green lawn, and a white door, all composed of basic geometric shapes. The code uses d3.v4 to render the graphic, explicitly drawing each element with `<rect>`, `<circle>`, and `<path>` tags. Two rotated rectangles form the door, while a transparent path outlines the ground. The visualization relies on hard-coded coordinates and SVG styling, with no data or interaction.

CCharisma9
69% match
Loading thumbnail…

UI_01

This example displays a static SVG canvas with a single line of instructional text, prompting users to edit the code. It uses D3 v4 to select the body element, append an SVG container with fixed dimensions of 960 by 500 pixels, and render a text element positioned at coordinates (120, 200) with a monospace font. The visualization demonstrates basic D3 selection and SVG text rendering, serving as a minimal starting template for further customization. No data binding or dynamic behavior is present beyond the hardcoded text string.

BBillyBHWong
69% match
Loading thumbnail…

Scientific Data Visualization ICE5

This example displays a simple house illustration, with a pink roof, a gray door and window, over a summary of a loaded dataset. The page combines an inline SVG graphic with a text output that reports the dataset’s size in kilobytes, row count, and column count. The code uses D3.js version 7 to fetch a CSV file from a GitHub gist, parse it with `d3.csv`, and compute the formatted length via `d3.csvFormat`. The visualization is built with React, rendering the SVG and the JavaScript-generated message.

SSravyaAnnadi
67% match
Loading thumbnail…

Untitled

This example shows a stylized dashboard layout in SVG, with minimal decorative elements like circular and oval shapes, small icons, and annotated lines drawn in grayscale tones. The visual centers on two large rounded rectangles that appear to frame data areas, flanked by bar-chart-like segments and small circular markers. The rendering uses React to produce static SVG markup, with no interactive or dynamic behavior. The included JavaScript and CSS files are referenced but not detailed, so the composition is purely presentational, illustrating a clean, grid-like interface design.

Ppreethamkesa
67% match
Loading thumbnail…

example

This example demonstrates how to draw a simple house with a clock tower using D3.js within a Svelte application. It shows the construction of geometric shapes—a triangle for the roof, rectangles for the house body, door, and window, plus a circular clock with numbers and an hour hand—all positioned relative to the container’s dimensions. The code uses D3’s `select` and `append` methods to build the SVG elements dynamically, while CSS styles the page with a lightcoral background and outlined headings. The visualization renders static vector graphics without data-driven binding, focusing instead on shape composition and styling.

RRohithNaiduDevareddy@my.unt.edu
67% match
Loading thumbnail…

niLayout

This example presents a dashboard-style web page with a full-screen layout that includes a header, dropdown menus, and a central map area. The page uses Bootstrap’s grid system to organize these sections into a responsive, fixed layout. The visualization is initialized by setting an SVG element’s width and height to match the browser window’s dimensions using D3.js v5. The code’s structure suggests interactive controls for selecting data, though the map rendering and interaction logic are not implemented in the visible source.

AAnimesh Nautiyal
67% match