Skip to main content
SimilarExport ZIP
100%

SVG Example

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 15, 2016
Created on Sep 14, 2016

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.

AI-generated description

A pseudo-bar chart giving a flavor of D3. Uses d3-selection and SVG.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/d0c9242fe9caa5c1ac1f4d98f642c855'>Pseudo Bar Chart I</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher
91% 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
90% match
Loading thumbnail…

SVG starter

This example demonstrates a minimal SVG-based bar chart with three static rectangles rendered in steelblue, green, and red. The SVG canvas is created by appending an `svg` element to the HTML body via D3's selection API, with a height of 500 and width of 960. Each rectangle is positioned using explicit `x` and `height` attributes, with widths fixed at 50 pixels. A loop then appends additional red rectangles at intervals of 100 pixels, though the loop condition prevents it from executing properly.

NNita
85% match
Loading thumbnail…

SVG Fundementals

This example shows a minimalist bar chart created with five black rectangles of varying heights and positions on a white background, representing abstract data values across a 960-by-500 viewBox. It renders directly in SVG elements defined inline within the HTML, using the `rect` tag with explicit `x`, `y`, `width`, and `height` attributes. The code relies on basic CSS to remove page margins and set overflow to hidden, with no JavaScript libraries or external data sources involved.

11512978kamps@zuyd.nl
84% match
Loading thumbnail…

D3 SVG Tutorial

This example shows a static bar chart of a 20-point dataset rendered as an SVG, with each bar’s height and color intensity tied to its value. The code uses D3.js version 3.5.5, applying the `d3.select` and `data().enter()` pattern to append rectangles and text labels. Bars are positioned with arithmetic on the dataset length and fixed width/height variables, while fill colors are generated as RGB values scaled by data. The chart demonstrates basic SVG shape binding and data-driven styling without axes or interaction.

JJamestiberiuseanes
84% match
Loading thumbnail…

Simple bar chart

This example shows a simple bar chart of eight numeric values rendered as SVG rectangles, with each value labeled directly above its bar. The chart uses D3.js version 5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` elements from a hardcoded array. Bar heights encode the data values, and text labels are added using the same data join. The SVG canvas has fixed dimensions of 500 by 300 pixels, with bars spaced by a constant padding.

HHuan Tran
83% match
Loading thumbnail…

Basic Bar chart

This example presents a basic bar chart built with D3 v5 and React, rendering to SVG. The chart displays a static dataset of five values as vertical bars, with bar heights proportional to the numbers. The code defines a 500x500 SVG canvas, applies a padding of 2 pixels between bars, and positions each rectangle using a calculated x coordinate. D3’s data join pattern (selectAll, data, enter, append) creates the rectangles, while attributes like width, height, and y are set via arrow functions derived from the dataset.

AAlina Sul
83% match
Loading thumbnail…

D3 bar chart with data-binding

This example demonstrates a simple D3 bar chart that binds an array of numeric values to SVG rectangles, with each bar’s height proportional to its data point. It uses D3 v4’s `scaleLinear` to map the data domain to a fixed pixel range, then applies the `data()` and `enter()` methods to create and position the rectangles. The chart renders with a minimal style—unfilled bars with black outlines—and the data is hardcoded as a static array. The code relies on standard D3 selection and scale APIs, with the SVG container set to 960 by 500 pixels.

4456lumen
82% match