Rectangles using data

100%

Rectangles using data

✓ Published0🌍 Public

Last edited Jul 15, 2018

Created on Jul 15, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Igathi/'>Igathi</a>'s block: <a href='http://bl.ocks.org/Igathi/713b5a2deed36e1f2a153d7a303d8279'>Rectangles using data</a>

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

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.

IIgathi

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

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

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

85% match

Loading thumbnail…

Rectangles using data

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.

IIgathi

82% match

Loading thumbnail…

fresh block test

This example visualizes six colored rectangles positioned on an SVG canvas, with each rectangle’s dimensions and color defined by an array of JSON objects. It first calculates the maximum bounding box dimensions from the data using a for loop, then sets the SVG’s size accordingly. The code uses D3 v4’s selection and data binding methods (`d3.select`, `.data`, `.enter`) to append and style the rectangles via `.attr` and `.style` calls. The visualization highlights a simple approach to mapping raw data to geometric primitives, with the source data embedded directly in the script and rendering done entirely through SVG.

IIgathi

80% match

Loading thumbnail…

rectangles using d3

Five rectangles are displayed in an SVG canvas. The rectangles are initially unstyled, and user interaction changes their fill color: clicking turns a rectangle orange, mouseover turns it green, and mouseenter turns it white. The code uses D3 v7's `selectAll` and `select` functions to bind event listeners and set attributes like width, height, x, and y. Positioning is computed with a conditional expression that alternates the horizontal offset based on each rectangle's index.

HHeet Bhatt

78% match