Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
CCosmosDude1
Last edited Jan 26, 2023
Created on Jan 26, 2023
Forked from HTML Starter

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.

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 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
84% 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
84% match
Loading thumbnail…

Untitled

This example shows a static bar chart with three orange rectangles representing the values 5, 10, and 12, each labeled with white text. The chart is rendered as an SVG using d3.v4, though the bars are manually placed in groups rather than generated dynamically. The page also includes commented-out code demonstrating a CSS transition that changes a div’s background from magenta to red over ten seconds, alongside a basic README referencing a React starter template.

Ssalemprakash
83% match
Loading thumbnail…

Untitled

This example shows a simple bar chart rendered as static SVG rectangles with value labels. The chart displays three bars with heights proportional to the data values 5, 10, and 12, using inline SVG elements styled with orange fills and white text. The code uses D3 version 6 only for loading the library, while the visualization itself is hand-coded in HTML with hardcoded `rect` and `text` elements, not generated through D3 data joins or scales. A separate `index.js` file imports `select` from D3 to append a text message to the page body.

DDebaliena
82% match
Loading thumbnail…

Pseudo

This example shows four gray bars labeled A, B, C, and D, each with different heights representing categorical values. The bars are rendered as SVG rectangles on a white background, with text elements using black fill for labels. The visualization uses a static HTML page with CSS for styling and inline SVG markup, demonstrating a minimal bar chart without any JavaScript libraries or data processing. The bars are positioned at fixed coordinates within a 361×372 viewBox, with heights varying from 120 to 328 pixels to convey relative magnitudes.

Vvalsorayksterob
81% match
Loading thumbnail…

Psuedo bar chart

This example shows a bar chart with four labeled bars (A through D) of varying lengths, rendered as SVG rectangles. The first bar is styled with red fill and a thick black stroke via a CSS class that overrides its inline blue fill, while the remaining bars alternate between blue and black fills. The visualization uses raw SVG elements within an HTML page, styled using CSS rules that set the font family, size, and bar appearance. No JavaScript libraries are used; the rendering relies entirely on static SVG markup and CSS properties.

Gguththered
81% match
Loading thumbnail…

Untitled

Three bar charts show categorical values for groups A, B, and C, with a button-driven transition between two predefined datasets. Using d3.v4 with React, the visualization renders SVG rectangles that animate their heights and positions over one second via `transition()`. The y-axis scale is fixed from 0 to 20, while the x-axis uses `d3.scaleBand`. Clicking the buttons calls an `update` function that rebinds data and triggers the smooth visual change.

GGinnWG
81% match
Loading thumbnail…

Untitled

This example demonstrates how to create a simple bar chart using D3.js version 7 and SVG rendering within a React framework. It renders three orange rectangles with fixed widths and heights that vary based on the dataset [4, 15, 34], positioning them horizontally with a 25-pixel spacing. The visualization uses `d3.select`, `d3.selectAll`, and the `.data()` method to bind the data array to SVG rect elements, with `attr()` calls setting fill color, dimensions, and x/y coordinates. The chart shows how D3's declarative API can generate static SVG graphics without animation.

Gglennburger
81% match