scale svg

100%

✓ Published0🌍 Public

Last edited Jun 1, 2022

Created on Jun 1, 2022

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`.

AI-generated description

MIT Licensed

Similar vizzes

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…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

79% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

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…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher

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

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

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

77% match