Test

100%

✓ Published0🌍 Public

Last edited Sep 9, 2012

Created on Sep 8, 2012

A single orange rectangle is plotted within a 200 by 200 pixel SVG chart, with its position and size determined by a four-element dataset. The example demonstrates how to correctly draw rectangles when using an inverted y-axis scale, by computing minimum and maximum coordinates to ensure positive width and height values. It uses d3.svg.axis for the x and y axes, and d3.scale.linear for scaling, with the rectangle rendered via SVG rect elements.

AI-generated description

Similar vizzes

Loading thumbnail…

Test

This example shows a single rectangle positioned on a logarithmic scale, with axes using custom tick formatting that hides most labels. The SVG chart is 200 by 200 pixels and uses D3.js to create log scales for both X and Y axes, mapping data points from a one-element array. The code demonstrates how to correctly calculate rectangle position and size when scales are non-linear, using `Math.min` and `Math.max` to flip coordinates and ensure positive width and height. The `d3.svg.axis` API renders the axes, while CSS styles the axis text and lines.

GGerHobbelt

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

74% match

Loading thumbnail…

oefening1

Three vertical rectangles display a small bar chart from a hardcoded data array of [20, 40, 50]. Each bar’s width is proportional to its value, multiplied by ten, while height is fixed at 50 pixels and vertical positions step by 100 pixels. d3.v4’s selection, data join, and enter methods render the SVG rectangles. The code also contains commented-out attempts at circles and d3.set usage. The page uses steelblue fill for the bars on a 500‑by‑500 SVG canvas.

GGeoJonna

74% match

Loading thumbnail…

test svg basic

This example shows a basic bar chart built with D3.js, displaying three data values (5, 10, and 12) as orange rectangles with white numeric labels. The visualization uses the D3 selection and data join pattern, appending SVG groups that are translated vertically for each bar. Rectangles are sized using a scale factor of 60 pixels per unit, while text elements position labels at the end of each bar. The code loads D3 v6 and demonstrates fundamental SVG rendering with `d3.select` and `d3.append`.

Ssgzzhinde

73% match

Loading thumbnail…

SVG Example

This example demonstrates the fundamental structure of SVG graphics with five colored rectangles arranged to form a pseudo-bar chart. The rectangles decrease in height from left to right, with each bar positioned at a different vertical offset. The visualization uses raw SVG elements—specifically `<svg>` and `<rect>` tags—embedded directly in an HTML document, with hard-coded width, height, and position attributes. No JavaScript libraries or data sources are involved, showcasing SVG's native capability for static vector rendering.

CCurran Kelleher

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

73% match

Loading thumbnail…

scale svg

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

Yyar

72% match

Loading thumbnail…

test

A simple SVG scene displays a single green rectangle positioned within a larger canvas. The example uses D3.js to append the rectangle to the selected SVG element, setting its width, height, coordinates, and fill color via a single attribute object. The code demonstrates basic D3 selection and shape creation without any data binding or interactive behavior, serving as a minimal starting point for SVG rendering.

AAlexDaGr8

72% match