fresh block

100%

✓ Published0🌍 Public

Last edited Oct 4, 2017

Created on Oct 4, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

84% match

Loading thumbnail…

fresh block

This example visualizes a small set of six rectangles, each positioned and sized by explicit x/y coordinates and width/height values, with colors assigned individually. It shows the spatial arrangement of these shapes on an SVG canvas, computed by finding the maximum extents of all rectangles to set the canvas size. The code uses D3 v3 to bind the JSON data to `rect` elements, setting position and size attributes, while also appending a canvas element to the body. The data source is inline in the script, and the rendering relies on standard SVG attributes.

IIgathi

84% match

Loading thumbnail…

fresh block

Three green rectangles of varying heights stand in a row on a blank SVG canvas, each bar’s x-position and height mapping directly to the same numeric value from a hardcoded three-element array. The visualization uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append `rect` elements, setting their `width` to a fixed 25 pixels while deriving `height` and `x` from each datum. The SVG container is created via `d3.select("body").append("svg")`, with the chart’s simplistic styling and minimal layout emphasizing the direct translation of data values into geometric properties.

HHadiem

84% match

Loading thumbnail…

fresh block

Four orange circles are drawn on a blank SVG canvas, each sized and positioned proportionally to its corresponding value in the static array `[10, 30, 50, 100]`. The example demonstrates a basic data join using d3.v5, where `selectAll("circle")` and `.data()` bind the array elements, and `.enter()` appends the shapes. Circle radii and y-coordinates reflect the data values directly, while x-coordinates increase with index. The visualization shows a simple, non-interactive mapping of numbers to visual attributes, with no axes or labels included.

IIMYin

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

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

83% match

Loading thumbnail…

fresh block

This example shows a static SVG scene with a red square and an orange circle, followed by a D3 script that generates additional blue and green rectangles whose positions and heights derive from an array of five numbers. The code uses the D3 library (version 3.5.5) to select the SVG, append a rectangle, and bind the data array to a `selectAll("rect")` operation, setting each rectangle's `x`, `y`, and `height` attributes through anonymous functions. The rendering is purely SVG-based, with no interaction or animation.

NNastasi7

83% match

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

82% match