SVG scatter plot and bar chart

100%

SVG scatter plot and bar chart

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This example combines a pseudo scatter plot with a bar chart in a single SVG visualization. Seven vertical bars in green and yellow represent categorical data points labeled A through G, while a dark red line overlay approximates a scatter plot trend across the same categories. The visualization uses raw SVG elements including `rect`, `path`, and `text` within multiple layers, with the text styled using the Imbue font from Google Fonts. The rendering approach relies on inline SVG styling with custom stroke widths, opacities, and layer transformations to create the composite chart layout.

AI-generated description

An approximation of a scatter plot and a bar chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo scatter plot

This pseudo scatter plot approximates a traditional scatter plot using horizontal bar rectangles as visual substitutes for data points, with labels A through E marking categorical rows. The SVG visualization emphasizes hover interaction, turning bars red when the mouse passes over them. The code relies on raw SVG elements—rect, text, and hover states via CSS—rather than JavaScript libraries or data-binding frameworks. Purple horizontal bars of varying widths suggest proportional values, while commented-out circles and vertical bars hint at alternative design explorations. The page sets a bold, tech-inspired font and hides the body margin for an immersive full-viewport rendering.

Bbjfmbeck

83% match

Loading thumbnail…

Psudo Barplot 2 (horizontal)

This example shows a horizontal bar chart with four rectangular bars labeled A through D, where the first bar displays a CSS-specified green fill that overrides its inline red fill attribute. The SVG is rendered directly in HTML using inline `<rect>` and `<text>` elements, with Google Fonts providing the typography. The primary visualization demonstrates how CSS class styling takes precedence over presentation attributes in SVG, as the green fill from the `.first-bar` class rule overrides the `fill='red'` attribute on the first rectangle.

Ppanthabuddhi@gmail.com

77% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—rectangles, text elements, and a polyline path—arranged to form a simple horizontal bar chart with category labels A through D. The SVG markup uses inline styling and CSS classes to control fill colors, stroke widths, and font properties, with a Google Fonts import for the Protest Riot typeface. The chart displays varying bar lengths on a 960×500 canvas, mixing red, black, and white fills with rounded stroke caps on a connected path line.

Jjwu534@gmail.com

77% match

Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege

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

76% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This example presents a stylized horizontal bar chart using four labeled bars (A–D) of varying widths. The visualization uses SVG rectangles to encode values, with each bar positioned to align with its corresponding text label. It relies on the SVG API directly for drawing, and uses the Share Tech font from Google Fonts for typography. The chart approximates a classic bar layout while omitting axes and scales, focusing purely on the geometric relationship between categories and their proportional lengths.

KKerotyzzzmo

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

76% match

Loading thumbnail…

SVG Fondamentals

This example demonstrates fundamental SVG shapes, including lines, rectangles, circles, and paths, to construct a basic bar chart with labeled X and Y axes. The chart uses three colored bars of varying heights, while additional shapes, such as a yellow rectangle with a blue stroke and a filled polygon, showcase different styling options. The code directly embeds SVG markup in HTML, specifying attributes like `width`, `height`, `fill`, and `stroke`. A text element displays the phrase "Mon Texte SVG," illustrating text rendering capabilities. No external libraries are used, relying solely on native SVG syntax within an HTML document.

Aadrien225

76% match