Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aannalabrozzi
Last edited Jan 30, 2018
Created on Jan 30, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
89% 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
89% 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
87% 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
87% match
Loading thumbnail…

fresh block

A single static circle is drawn on a blank SVG canvas using D3 v4. The code selects the body, appends an SVG element with fixed dimensions, and places the circle at coordinates (300, 300) with a set radius, though several attribute chains remain incomplete. The example demonstrates the basic structure for creating simple geometric shapes with D3’s selection and attribute methods, relying on the SVG namespace for rendering. No interaction, data binding, or scales are involved, making it a minimal starting point for understanding D3’s core drawing syntax.

JJorrisVerboon
87% match
Loading thumbnail…

fresh block

The visualization renders the French flag as three vertical rectangles using D3 v4's data-join pattern. It binds an array of objects containing fill colors and x-coordinates to SVG `rect` elements, then enters and appends each rectangle with explicit width, height, and positioning attributes. The code demonstrates a reusable data-driven approach to drawing multiple shapes, contrasting with earlier commented-out manual append commands. The SVG canvas is 960 by 500 pixels, with rectangles sized at 200 by 400 pixels and spaced along the x-axis.

Aannalabrozzi
86% match
Loading thumbnail…

fresh block

This example shows a simple geometric composition of three stacked rectangles in alternating blue and yellow, paired with a black diagonal line that cuts across them. The visualization is created using the D3.js library, version 3.5.5, to append SVG elements to the page. Specifically, the code uses `d3.select` to add `rect` shapes with explicit pixel coordinates and fills, and `d3.svg.line()` to generate a path from three data points. The line is drawn with zero stroke width and a black fill, making it a solid triangle-like shape. The rendering relies entirely on static SVG attributes, with no data loading or interaction.

BBrandonStroud
86% match
Loading thumbnail…

fresh block

A single red circle floats on a blank canvas, positioned by fixed pixel coordinates, while a row of empty text elements is bound to an array of numbers. The example demonstrates basic SVG shape creation and data-join fundamentals with D3 v4, using `d3.select` and `d3.selectAll` to manipulate DOM elements. The circle’s fill color is set to Peru, and the code appends both SVG and HTML elements, though the text nodes remain without visible content. The visualization is minimal, focusing on core D3 syntax rather than presenting meaningful data.

335degrees
85% match