rectangles using d3

D3 Rectangle Examples

This example demonstrates the creation of six SVG rectangles using D3.js, each illustrating different visual properties such as fill color, stroke width and alignment, offset positioning, and corner radii. It also includes a seventh set that arranges three colored rectangles with varied dimensions and placements. The code uses D3’s selection and append methods to build SVG elements, with data defined as inline JavaScript objects specifying attributes like width, height, and style. The page is rendered at a fixed size and relies on D3 2.4.5.

GGuerino1

82% match

Rectangles using data Color II

This example shows seven rectangles, each filled with a distinct color from a hardcoded JSON dataset that defines their position, size, color, and name. The rectangles are rendered on a 960 by 500 pixel SVG canvas, with each rectangle labeled next to it using its corresponding name. The code uses D3 v4’s selection and data binding to append a group for each data element, then appends a `rect` and a `text` child to each group. The rectangles use a black stroke for clarity, while the text is styled in a monospace font. The data source is an inline array of objects, and the rendering relies on D3’s SVG manipulation.

79% match

scale svg

This example demonstrates how to create a responsive SVG visualization using D3 v7. It displays five small rectangles positioned horizontally within a 400x400 viewBox, with each rectangle’s x-coordinate determined by its data value. The code uses `d3.select` to append an SVG element and applies the `viewBox` and `preserveAspectRatio` attributes to ensure the graphic scales proportionally to its container. The rectangles are bound to the array `[1,2,3,4,5]` using D3’s data join pattern with `selectAll`, `data`, and `enter`.

Yyar

79% match

Rectangles using data Color

This example shows a set of seven colored rectangles, each labeled with a name, positioned at fixed coordinates on an SVG canvas. The rectangles are bound to an array of data objects containing x/y positions, dimensions, and color values. The code uses D3 v4’s `selectAll` and `data` binding to create and style each rectangle, then appends text labels next to them. The data comes from an inline JSON array, and the visualization uses SVG for rendering, with colors specified as hex and RGB strings.

79% match

SVG Fundamentals

Four overlaid rounded rectangles demonstrate core SVG fundamentals within a D3.js v5 environment. The visualization shows two overlapping shapes with varying corner radii, positioned using both pixel and viewport-height units. One red and one green rectangle dominate the center, while a pair of small vertical bars in red and green sit offset to the right, each with distinct dimensions. The code explicitly defines the SVG canvas, `rect` elements, and fill attributes, while a separate script imports D3’s `select` function and a local module to display a text message.

CCreighton Chingarande

Rectangles data Color Jason Zoom

This example shows three colored rectangles, each labeled with a color name, positioned at fixed coordinates on an SVG canvas. The visualization maps a small JSON dataset, where each object defines the rectangle’s x/y position, width, height, fill color, and label, directly to SVG elements. Using D3 v4, the code binds the data to `rect` elements via `selectAll` and `data`, then sets the geometry attributes (`x`, `y`, `width`, `height`) and inline `fill` style from the data. It also appends `text` elements to display each rectangle’s name, with labels placed near the shapes using computed offsets. The rendering approach is purely SVG-based, with no axes or scales, presenting a straightforward data-driven layout.

Rectangles using data color

Four rectangles are drawn from a hard-coded JSON array, each with its own fill color and a monospace text label offset to the right. The visualization uses D3 v4’s data join: `selectAll("rect").data(jsonRectangles).enter().append("rect")` binds the array, then `attr` methods set each rectangle’s `x`, `y`, `height`, and `width` from properties, while `style("fill", ...)` applies the color. Text labels are similarly bound and positioned using `x_axis + width + 5` and `y_axis + height`. The example demonstrates basic static SVG rendering with D3 selections and data-driven attributes.

Rectangles using data

This example shows how to bind a hardcoded JSON dataset of four rectangles—each with position, size, color, and a name—to SVG elements using D3 v4. It first creates the rectangles via `d3.selectAll("rect").data(...).enter().append("rect")`, then sets their `x`, `y`, `width`, and `height` attributes and `fill` style from the data. It also appends text labels next to each rectangle, positioning them relative to the rectangle’s coordinates and size. The visualization demonstrates basic data joins and attribute binding in D3, with the source data defined inline in the script.