Test Figma input

100%

Test Figma input

✓ Published1🌍 Public

Last edited Sep 17, 2022

Created on Sep 13, 2022

A single SVG chart displays three gray horizontal bars labeled A, B, and C with varying widths. The visualization is rendered directly in static SVG markup within an HTML file, using the Familjen Grotesk font for text labels. No dynamic data or interactivity is present, as the layout is fixed. The example primarily demonstrates loading D3 via UNPKG and importing a local ES6 module, where `select` from D3 is unused in the visible chart.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization presents three labeled horizontal bars (A, B, C) as a chart, with the bars rendered as gray rectangles of decreasing lengths. The first bar is overridden to red via a CSS class named `.first`. The SVG is drawn directly in the markup, using the Share Tech webfont for large 80px text labels. The code uses no external JavaScript or charting libraries; it relies on static SVG elements and inline CSS styling.

CCosmosDude1

80% match

Loading thumbnail…

Bar chart

Four black rectangular bars stand on a white background, decreasing in height from left to right within an SVG. Each bar is a plain SVG `<rect>` element with a fixed position, and single capital letters (A, B, C, D) serve as labels for the axes. The chart uses a purely static SVG rendering with no interaction, as demonstrated by the `index.html` markup.

KKingsLanding

79% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a pseudo horizontal bar chart where three labeled bars (A, B, C) are drawn as filled black rectangles of varying widths, with large text labels positioned to their left. The visualization uses only raw SVG elements—`rect` and `text`—inside an inline `<svg>` tag, with no JavaScript or data-binding logic. The bars are hardcoded in the markup, and the chart relies on CSS (including the Share Tech font) and the SVG coordinate system to position elements, with commented-out path data suggesting an alternative icon-based labeling approach.

Iissam.benabid@gmail.com

79% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays categorical data for values A through D, with bars extending from a common left baseline. The SVG rendering uses basic rectangular shapes with black fills to represent the bar lengths, which decrease progressively from A to D. A separate text element using the Inconsolata font displays the category labels. The chart uses plain SVG attributes for positioning and sizing rather than a JavaScript visualization library, reflecting its creation as a Figma export.

AAllison Leggett

79% match

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

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

78% match

Loading thumbnail…

Pseudo horizontal bar chart

This pseudo horizontal bar chart is a static SVG composition built directly in HTML. Four labeled bars (A, B, C, D) extend from a common left margin, each with a fixed height and varying widths to represent distinct magnitudes. The visualization relies on raw SVG `<rect>` and `<text>` elements styled with CSS, including a custom Share Tech font. A hover effect is applied to a small circle, changing its fill and stroke color via a CSS transition, though the chart itself is non-interactive.

NNico-Nico

78% match

Loading thumbnail…

SVG fundamental

This example shows four black horizontal bars of decreasing width labeled A through D, creating a simple data-encoding visualization. The bars are drawn as SVG `<rect>` elements with fixed pixel dimensions, while the labels use SVG `<text>` elements. The page relies on plain HTML, CSS for styling (including font size and margin reset), and JavaScript is referenced though not directly used in the visible code. Rendering is handled entirely through inline SVG within the `index.html` file, demonstrating fundamental SVG shape and text placement without external libraries or data sources.

NNafi

78% match