paddyokore39@gmail.com

@paddyokore·5 public vizzes

Pseudo Line Chart

This pseudo line chart presents a minimalist line graph showing a downward trend across six data points, rendered as a thick black stroke with rounded endpoints on a white background. The visualization uses an SVG `<path>` element within an HTML document, applying a drop-shadow filter for subtle depth. The code leverages native SVG APIs and CSS styling with the Share Tech font, while the rendering approach focuses on a clean, reductive aesthetic rather than traditional chart axes or labels.

Mar 23, 2024

Loading thumbnail…

Pseudo Bar Chart Transposed

A pseudo bar chart transposed presents categorical values as horizontal bars extending rightward from the left, with five labeled segments (A–E) sized by their widths. The visualization uses SVG rectangles with negative scaling transforms to simulate left-to-right bar lengths, while text elements label each category. The code employs raw SVG elements—`rect`, `text`, and `matrix` transforms—inside an HTML document, with no external charting library, instead relying on manual coordinate math and Google Fonts styling. The data is encoded purely through rectangle widths, not a dataset.

Mar 23, 2024

Loading thumbnail…

Fork of Pseudo Bar Chart

Five plain rectangles form a pseudo bar chart, approximating a scatter plot by using bar heights to encode data values. The SVG markup in index.html hardcodes each rectangle’s x, y, width, and height attributes, with no JavaScript or data-loading logic. The chart uses only static SVG shapes on a white background, with bars rendered in black and positioned from x=166 to x=718, yielding a simple, hand-coded visualization that relies on manual coordinate calculation rather than a layout or scale API.

Mar 23, 2024

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot uses a minimalist SVG canvas to approximate the visual language of a scatter plot without axes, labels, or data encoding. Instead of mapping data values, it places eight identical gray circles at varying coordinates across a white 960×500 background, with all points sharing the same radius and fill. The rendering relies solely on static SVG `<circle>` elements, with no JavaScript libraries or interactive transitions. The title highlights its conceptual mimicry of a scatter plot’s visual form, while the code demonstrates a hand-coded, fixed arrangement that forgoes any data-driven scaling or layout logic.

Mar 23, 2024

Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Mar 23, 2024