Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aaaronbalthaser
Last edited Nov 14, 2017
Created on Nov 14, 2017

A single SVG chart displays two equally sized vertical rectangles, each filled with light blue and outlined in green, positioned side by side within a bordered container. The visualization demonstrates basic SVG shape creation and layout using D3 v4, where the rectangles are appended to a grouped SVG element with fixed dimensions. The code explicitly sets the width and height for the first rectangle, then positions the second rectangle at an x-offset equal to half the available width. The chart is rendered entirely through D3's selection and append methods, with no data binding or interaction.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A simple two-panel chart divides a 400-by-600 pixel SVG into equal light-blue rectangles with green outlines. The left and right panels share a linear Y-axis scaled from 0 to 100, while the bottom X-axis uses d3.scaleTime spanning a three-hour window on January 1, 2016. Both axes are rendered with d3.axisLeft and d3.axisBottom, with the time axis displaying five ticks. The chart is built with D3 v4 and drawn entirely as SVG elements, with no underlying data or interactive behavior.

Aaaronbalthaser
88% 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
87% 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
87% 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
86% match
Loading thumbnail…

fresh block

A simple bar chart displays seven static blue rectangles on an SVG canvas, with each bar’s height proportional to a value in a hardcoded JavaScript array. The bars are positioned horizontally using a fixed width of 50 pixels per bar and aligned to a baseline of 300 pixels from the top. The visualization uses D3 v4’s selection and data-join methods (`selectAll`, `data`, `enter`, `append`) to create the rectangles, setting their `x`, `y`, `width`, `height`, `fill`, and `stroke` attributes directly. No axes, labels, or interactions are included; the chart just shows the raw data values as basic shapes.

MMasonLyons
85% 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
85% 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
85% 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
85% match