fresh block test

100%

fresh block test

✓ Published0🌍 Public

Last edited Aug 2, 2019

Created on Aug 2, 2019

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

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

83% match

Loading thumbnail…

fresh block

This example shows a simple bar chart of five value sizes (155, 250, 175, 200, 120) rendered as blue rectangles with white strokes on an SVG canvas. The bars are positioned horizontally by index and vertically from the bottom, with heights proportional to each data value. The visualization uses the D3.js v4 library’s `select`, `selectAll`, and `enter().append()` API to bind the data array to `rect` elements, computing x, y, width, and height attributes directly from the data and a constant `rectWidth` of 50 pixels.

DDanielAguirre

83% match

Loading thumbnail…

fresh block

This example shows a simple bar chart built from an array of five numeric values, rendered as blue rectangles with white strokes on an SVG canvas. The code uses D3 v4’s selection and data binding to map each data point to a rectangle, with the x-position determined by an index-based offset and the y-position calculated as the height minus the data value, so bars rise from the bottom. The chart’s fixed width per bar is set via a constant, while the height directly encodes each number. The data is hardcoded in the script, and the rendering relies on SVG’s native shape elements.

BBraMKJ

83% match

Loading thumbnail…

fresh block

This example shows three circles positioned diagonally across an SVG canvas, each colored by its data value. The visualization uses D3.js version 3.5.5 to bind an array of numbers to circle elements and map each value to screen coordinates. The code selects the SVG container, appends circle elements, and sets their cx and cy attributes directly from the data, while fill colors are assigned conditionally: green for 30, purple for 70, and red for 110. The rendering approach relies on D3’s data join and attribute manipulation, with no axes or scales involved.

BBrandonStroud

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

Loading thumbnail…

fresh block

This example shows a simple bar chart with five blue rectangles arranged horizontally, where each bar’s height corresponds to a value in a small hardcoded array. The chart uses SVG rectangles bound to the data via d3.v4’s selection.data, with x positions computed from an index and y positions derived from a fixed chart height minus each bar’s value. The code sets width, height, fill, and stroke attributes directly on the rect elements, producing a basic static visualization without axes or labels.

JJastor11

82% match