Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aafdgoris
Last edited Aug 1, 2016
Created on Aug 1, 2016

This visualization renders a static, flat scene of a house and landscape using SVG shapes in D3 v4. It shows a green ground, a house with an orange roof and brown door, a yellow sun, and a red triangular roof peak, all composed of rectangles, circles, and a path. Three small white-and-black grid patterns (likely windows) are placed via `<g>` transforms with translated coordinates. The code directly manipulates SVG elements with hardcoded style attributes, using no data binding or dynamic D3 APIs—only the core library for element selection and creation.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

fresh block

This visualization uses static SVG shapes in D3 v4 to draw a simple house scene. A steel-blue rectangle forms the sky, a green rectangle represents the ground, and a yellow circle sits as the sun. The house itself consists of a white rectangular body, a grey triangular roof drawn with a custom SVG path, and a green door, with small black-framed squares acting as windows. All elements are positioned using direct SVG attributes and transforms, with no data binding or interactivity.

ZZaraKinneen
93% match
Loading thumbnail…

fresh block

This visualization uses static SVG shapes in D3 v4 to draw a simple house scene. A steel-blue rectangle forms the sky, a green rectangle represents the ground, and a yellow circle sits as the sun. The house itself consists of a white rectangular body, a grey triangular roof drawn with a custom SVG path, and a green door, with small black-framed squares acting as windows. All elements are positioned using direct SVG attributes and transforms, with no data binding or interactivity.

ZZaraKinneen
93% match
Loading thumbnail…

fresh block

A simple SVG scene displays a red circle, a rounded rectangle, and a diagonal line positioned on a fixed 960×500 canvas. The circle sits at the center-left, the rectangle occupies the upper-left area, and the line connects the circle’s center to the lower-right corner. Using D3 v4, the code selects the body element, appends an SVG container, and then creates each shape via `svg.append`, setting attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `x1`/`y1`/`x2`/`y2` directly. No data binding or interactions occur; the visualization is purely static.

Aantichaos
86% match
Loading thumbnail…

fresh block

A static SVG composition depicts a red triangular path spanning the upper canvas, overlaid with an orange rectangle and two white squares with black outlines. The code uses d3.v4 to select and append SVG elements, including a rect with an incomplete stroke style and a path defining the triangle’s coordinates. No interactive behavior or data binding is present; the visualization relies solely on hard-coded shapes and styling.

ZZohraaa
85% match
Loading thumbnail…

fresh block

A simple SVG scene displays a red circle, a rounded rectangle, and a line on a blank canvas. The circle sits at the center, while the rectangle appears to its left and the line extends diagonally downward. The code uses D3 v4 to append these shapes to an SVG element, setting their coordinates and styling attributes directly. The example demonstrates basic SVG shape creation with D3, including circle, rect, and line elements, without any interactive or data-driven behavior.

Aantichaos
85% match
Loading thumbnail…

fresh block

A red circle sits inside a transparent square outline above two stacked rectangles and a black triangle, composing a simple geometric still life. The SVG canvas is built with d3.v4, using d3 selections to append each shape. The code sets explicit pixel coordinates and attributes for position, size, and fill colors, with a transparent stroke on the first rectangle and solid fills on the others. No data is loaded; the visualization is purely static, generated directly from hardcoded values in the script.

TTylerVaughan
84% match
Loading thumbnail…

fresh block

A simple geometric composition renders three overlapping shapes on an SVG canvas: a white rectangle with a red circle centered on its right edge, a turquoise rectangle with a gold horizontal band, and a black polygon layered across the scene. Built with D3 v4, the code appends SVG elements directly using methods like `svg.append`, setting attributes such as `attr("x")`, `attr("y")`, `attr("width")`, and `attr("height")`. The shapes are positioned absolutely at fixed coordinates, creating a static, abstract arrangement with no data binding or interaction.

Aannalabrozzi
84% match
Loading thumbnail…

fresh block

This example shows a static SVG scene with a red square and an orange circle, followed by a D3 script that generates additional blue and green rectangles whose positions and heights derive from an array of five numbers. The code uses the D3 library (version 3.5.5) to select the SVG, append a rectangle, and bind the data array to a `selectAll("rect")` operation, setting each rectangle's `x`, `y`, and `height` attributes through anonymous functions. The rendering is purely SVG-based, with no interaction or animation.

NNastasi7
84% match