Hello, D3!

100%

✓ Published0🌍 Public

Last edited Jan 18, 2018

Created on Jan 18, 2018

The example demonstrates how to draw a set of rectangles using the D3.js library version 4.12.2, where each rectangle’s width is mapped to a value from a hardcoded JavaScript array. It renders five default SVG `<rect>` elements, then uses the `d3.selectAll('rect')` method to bind the data array to those elements. The visualization does not explicitly set the rectangle widths or heights, so the shapes remain at their default size, but the data is attached and ready for subsequent styling.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1300016'>Hello, D3!</a>

gpl-3.0 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

81% match

Loading thumbnail…

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

79% match

Loading thumbnail…

fresh block

Five plain rectangles sit in a row, each representing a hard-coded numeric value from an array. The example demonstrates how D3’s data join works with a static SVG selection, binding the array `[100, 250, 175, 200, 120]` to existing `rect` elements via `d3.selectAll('rect').data(data)`. No scales or axis are used, and no explicit update or exit handling appears, so the visualization only shows the initial selection and data binding step rather than any dynamic re-rendering. The SVG markup is minimal, with five empty rects defined directly in the HTML.

PPaulPichot

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

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

78% match

Loading thumbnail…

Learn D3 in 5 minutes

This example demonstrates the fundamental D3 data-join pattern by binding an array of five numbers to SVG rectangles, with each rectangle's width proportional to its corresponding value. The code selects an SVG container, calls `selectAll('rect')` followed by `.data(data)` and `.enter()`, then appends rects with width attributes set directly from the data. Using D3 v4 and vanilla JavaScript within an HTML page, it renders a simple vertical bar chart where bar heights are fixed by the `barHeight` variable and positioned via `translate` transforms. The visualization serves as a minimal introduction to D3's enter selection and chained attribute methods.

Mmuranjan

78% match

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Ssukumardunn

78% match

Loading thumbnail…

D3 Starter-episode 04

This example demonstrates a basic D3.js bar-like visualization of 100 horizontal rectangles stacked vertically, each with a height of 10 pixels and width matching the viewport. The code uses `d3.select`, `d3.range`, and the `join` pattern to bind data to SVG `rect` elements, spacing them at 20-pixel intervals. It renders quickly to show the minimal setup for D3 version 6, with styling from a large body font size. The visualization is purely layout-driven, using no external data source or interaction.

Mmaxthamt

77% match