Rectangles using data

100%

Rectangles using data

✓ Published0🌍 Public

Last edited Jul 15, 2018

Created on Jul 15, 2018

This example shows a blank interactive canvas with a single instructional text prompt, inviting code edits. The visualization uses D3 v4 to append an SVG element to the body, sized at 960 by 500 pixels, and places a monospaced text label at a fixed position. The code relies on D3’s selection and append methods to construct the SVG structure, though it renders no data-driven rectangles or other marks. The rendering approach is static SVG output, with no external data source loaded.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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.

IIgathi

82% match

Loading thumbnail…

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.

IIgathi

81% match

Loading thumbnail…

Rectangles data Color Jason

This example visualizes a small hardcoded dataset of seven rectangles, each with explicit position, size, color, and a text label. The visualization shows the rectangles as colored SVG shapes with black outlines, while each rectangle is paired with its name displayed to its right in monospace font. The code uses D3 v4 to bind the JSON data array to SVG `<rect>` and `<text>` elements via `d3.selectAll().data().enter().append()`. It sets position and size attributes directly from the data properties, fills each rectangle with its specified color string, and positions the labels by offsetting from each rectangle’s coordinates. The rendering approach is plain SVG appended to the body, with styling applied inline through D3’s `.attr` and `.style` methods.

IIgathi

80% match

Loading thumbnail…

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.

IIgathi

80% 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

80% match

Loading thumbnail…

test

This example displays a static SVG canvas with a single line of instructional text. The code uses D3 v4 to append an SVG element to the body and a text element inside it, styled with a monospace font and positioned at the center. It serves as a minimal placeholder, showing how D3 selections and SVG attributes create basic visual output. The text explicitly invites the user to edit the code, highlighting the template’s purpose as a starting point for further customization. No data or dynamic behavior is involved beyond the initial rendering.

EEssohanamKouyou

79% match

Loading thumbnail…

block with text

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

IIgathi

79% match

Loading thumbnail…

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.

IIgathi

79% match