Seanmgard

@Seanmgard·4 public vizzes

Pseudo Horizontal Bar Chart

A pseudo horizontal bar chart displays four black bars of varying lengths on a white background, with a single letter "A" positioned to the left. The chart uses nested SVG elements, with the outer and inner SVG both set to 960 by 500 viewBoxes. Rectangles are drawn with the `rect` element and filled with `#111111`, while the label uses the `text` element. The rendering is achieved through inline SVG markup, without any JavaScript libraries or external data sources.

Aug 7, 2022

Loading thumbnail…

Pseudo Bar Chart

This example approximates a bar chart using four black rectangles on a white background, each representing a data value. The bars vary in height and position, creating a static, minimalist visualization. The SVG rendering uses the `<rect>` element with explicit x, y, width, and height attributes to define each bar, laid out on a 960 by 500 canvas. The chart relies on raw SVG markup rather than a charting library or JavaScript, with the data encoded directly in the coordinates.

Aug 7, 2022

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot uses a clean SVG canvas to display seven black ellipses against a white background with a light gray border. Each ellipse is positioned differently across the plot, using fixed `cx` and `cy` coordinates to approximate the placement of data points. The chart is built with raw SVG elements, including `rect` and `ellipse` tags, set within an HTML document. The minimalist design, with uniform ellipse sizes and no axes or labels, suggests a simple conceptual exercise rather than a representation of real-world data.

Aug 7, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering and styling through direct manipulation of SVG elements. A large green rectangle with a black border and a red circle are drawn, while white grid lines divide the canvas vertically. The code uses raw SVG markup with CSS styling, including a `rect:hover` rule that transitions the rectangle’s fill color to blue and thickens its stroke over 1 second. The example highlights fundamental SVG attributes like `x`, `y`, `cx`, `cy`, `width`, and `height` for positioning and sizing shapes.

Aug 6, 2022