fresh block

100%

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Apr 21, 2017

This example demonstrates a simple gradient-filled rectangle drawn in an SVG canvas. It shows a black horizontal bar with a linear gradient that fades from fully opaque on the left to nearly transparent on the right, positioned near the top of the frame. The code uses D3 v4 to select the body, append an SVG element, and construct a linearGradient definition with two stop points via `selectAll` and `data`. A single `rect` is then appended and styled with the gradient, relying on D3's data-binding to set offset and opacity values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a blank SVG canvas containing a single dark rectangle positioned at the top-left corner. The visualization is minimal, demonstrating the basic setup of an SVG scene using D3 version 4. The code selects the document body, appends an SVG element with fixed dimensions, and then adds a group containing a rectangle of specified width and height. The rendering relies on D3’s selection and attribute methods to build the static graphic.

JJboulery

82% match

Loading thumbnail…

fresh block

This example displays a single vertical red rectangle at a fixed position on a light gray SVG canvas. Built with D3 v4, the visualization appends a 100-by-200 pixel rectangle to the SVG root using the `d3.select` and `append` methods, then fills it with the custom color `#EF4135`. The code sets the canvas size to 960 by 500 pixels and defines unused color variables for blue and white, though only the red shape is rendered. The visualization is generated entirely with the SVG rendering approach, using a hardcoded geometry without any data source or interactivity.

KKerchoo

82% match

Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1

81% match

Loading thumbnail…

fresh block

This example displays a static SVG canvas containing three colored rectangles, arranged horizontally with blue, white, and red fills at varying x-coordinates. The visualization is generated using d3.select to append the SVG element with fixed dimensions, and the color data is stored in a JavaScript array with fill and position properties. Though the code defines the flag array with console.log output, the rectangles are not yet rendered to the screen. The implementation relies on D3 v4’s SVG creation APIs, with the data structure prepared for potential future rendering.

LLaurynKW

81% match

Loading thumbnail…

fresh block

A blank burgundy rectangle fades to sky blue over three seconds inside an SVG canvas. The example demonstrates D3.js version 3.5.5 transitions and easing functions, using `d3.select` to append a `rect` and apply a `.transition()` with a `"bounce"` easing effect. The source is a Blockbuilder-generated single-file project, rendered entirely in SVG with no external data—only static shape attributes and CSS styling define the visual output.

AAdamBlaine1

81% match

Loading thumbnail…

fresh block

This example shows a simple geometric composition of three stacked rectangles in alternating blue and yellow, paired with a black diagonal line that cuts across them. The visualization is created using the D3.js library, version 3.5.5, to append SVG elements to the page. Specifically, the code uses `d3.select` to add `rect` shapes with explicit pixel coordinates and fills, and `d3.svg.line()` to generate a path from three data points. The line is drawn with zero stroke width and a black fill, making it a solid triangle-like shape. The rendering relies entirely on static SVG attributes, with no data loading or interaction.

BBrandonStroud

81% match

Loading thumbnail…

fresh block

A grid of four square rectangles is drawn on an SVG canvas, each positioned along the x-axis with identical y-values, and colored with a cool-tone gradient that shifts based on each square's x-coordinate. The visualization uses d3.v4 and the data-binding pattern `selectAll().data().enter().append()` to create the shapes. The x- and y-positions are mapped through `d3.scaleLinear` domains, while a `d3.scaleSequential` with `d3.interpolateCool` determines the fill color. The static dataset is hardcoded in the script, and margins are applied via a translated SVG group.

RRobertDelgado

80% match

Loading thumbnail…

fresh block

This example shows five blue rectangles positioned side by side in an SVG, with heights corresponding to an array of numbers (100, 250, 175, 60, 150). The rectangles are drawn on a baseline at the bottom of the viewport, creating a simple bar chart. The code uses D3 v4’s `selection.data()` and `selection.attr()` methods to bind the data and set each rectangle’s x, y, width, height, fill, and stroke attributes. The `height` variable is referenced but not explicitly defined, so the vertical placement relies on the SVG’s default coordinate system.

MMokoshka

80% match