Skip to main content
SimilarExport ZIP
100%

a

✓ Published0🌍 Public
Xxyzcorrupt@gmail.com
Last edited Jul 13, 2024
Created on Jun 24, 2024
Forked from HTML Starter

This visualization displays a collection of horizontal bars, each filled with a gradient or solid color, arranged across a wide SVG canvas. The bars are positioned at varying x-coordinates and share a consistent height, with text labels rendered as paths above them. Built with React and SVG, the example uses inline SVG elements like `rect` and `path` to construct the chart, with linear gradients defined for color fills. The data appears to be static, embedded directly in the markup rather than loaded from an external source.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a pseudo horizontal bar chart, featuring a single green bar rendered over a white background with the letter "A" as its label. The visualization uses plain SVG elements, specifically a `<rect>` for the bar and a `<text>` element for the label, with styling applied through CSS classes and inline attributes. The code defines the SVG canvas dimensions, positioning the bar at a fixed x and y coordinate with explicit width and height values. This approach demonstrates a minimalist, static chart composition using React and SVG, with typography customized through Google Fonts.

Eelgato_1994
84% match
Loading thumbnail…

Image

This example displays a small group of vertical bars in an SVG element, each a different color and height. The bars are rendered as SVG `<rect>` elements with explicit `x`, `y`, `width`, and `height` attributes, and the SVG `transform` attribute applies `scale(1, -1)` to flip the coordinate system so the bars to appear to grow upward from a baseline. The chart uses inline CSS to set the page title and a large message font, while the data values themselves are hardcoded in the markup.

EErik Sundahl
83% match
Loading thumbnail…

Pseudo Horizontal Bar chart

This example shows four black horizontal bars of varying lengths on a light gray background, with SVG text labels positioned to the left of each bar. The bars are rendered as SVG `rect` elements with fixed dimensions and positions, while the labels are drawn using SVG `path` elements that trace letterforms. The layout is hard-coded within the HTML, using no JavaScript libraries or data-binding frameworks. Instead, the visualization relies entirely on static SVG markup, making it a simple demonstration of how CSS and pure SVG can create a bar-chart-like composition.

AAshwani Sajwan
82% 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
81% match
Loading thumbnail…

svg2

This example demonstrates a static bar chart rendered as inline SVG within an HTML page, using React conventions but no external libraries. It shows six rounded bars in descending height, with CSS classes controlling fill color, opacity, and paint-order, while inline styles override class rules for the background rectangle. The chart includes labeled categories A through F using SVG text elements. The page also displays two HTML divs with text, and loads the Atkinson Hyperlegible font from Google Fonts, with CSS controlling layout and typography throughout.

Ppoppy
81% match
Loading thumbnail…

SVG fundamental

This example demonstrates fundamental SVG rendering in React, showing a bar chart with green rectangles of varying heights and a detailed axis with tick marks. The visualization uses raw SVG elements including `rect` for the bars and repeated `line` elements for the axis ticks, all defined directly in JSX within the HTML structure. The chart displays four data bars arranged horizontally on a white background within a 1280x832 viewBox, with the tallest bar on the right and progressively shorter bars moving left. The rendering relies entirely on static SVG markup without any JavaScript libraries or data processing.

Rrwata97
81% match
Loading thumbnail…

Bar Graph

This example shows a bar graph with a horizontal layout, using colored rectangles to represent data values. The visualization includes a legend with tick marks and labels, rendered as SVG elements. The code defines the chart using plain React with SVG primitives like `<rect>` and `<line>` for the bars and axes, while text elements label the categories. The data appears to be hardcoded within the SVG markup, and the rendering approach relies on static SVG attributes for positioning and styling.

Xxyzcorrupt@gmail.com
80% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
80% match