igndukwe

@igndukwe·9 public vizzes

Anyi line chart

A minimal React and SVG line chart displays a single polyline with a thick black stroke across a white canvas, connecting six data points from left to right. The chart is rendered entirely through declarative SVG markup inside an HTML file, with a clip path constraining the drawing area. No JavaScript libraries or data-processing code are present; the implementation relies solely on static SVG path coordinates and CSS styling, making it a bare-bones example of chart construction without axes, labels, or interactivity.

May 13, 2022

Loading thumbnail…

Anyi Horizontal Bar Plot

This example shows simple horizontal bars for categories A through D, with bar lengths decreasing from A to D against a plain white background. The SVG is hand-authored in HTML using `<rect>` and `<text>` elements, with black bars and labels positioned at fixed coordinates. The page uses the Share Tech font from Google Fonts and sets a large 50px text size via CSS. No JavaScript or data-binding library is used.

May 13, 2022

Loading thumbnail…

Anyi Psudo Bar Plot

This example presents a pseudo bar plot using four black rectangles of varying heights positioned on a white background. The SVG markup defines each bar with explicit x, y, width, and height attributes, creating a simple categorical comparison. The visualization is rendered directly in an HTML document using inline SVG, with the React framework imported but not utilized in the displayed code. The bars are styled with a solid dark fill, and the viewBox is set to 960 by 500 pixels.

May 13, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple “Hello HTML!” message centered on the page using large, bold text. Rendered entirely through static HTML and CSS, it relies on a `<style>` block to set the font size and alignment via the `text-align` property on a `div` with the class `message`. No JavaScript libraries, data sources, or interactive behavior are present; the visualization demonstrates the minimal structure required for a standalone web page. The code uses core HTML elements and CSS styling only.

May 13, 2022

Loading thumbnail…

Psudo visualisation

A minimal static SVG scene presents six black circles scattered across a white canvas on a 960-by-500 viewBox. The markup, authored in plain HTML with embedded CSS and JavaScript, draws each ellipse with explicit coordinate and radius attributes. No interactive behavior or animation is implemented; the visualization simply shows the arrangement of these abstract shapes using React and SVG rendering. The source data is hard-coded in the index file rather than loaded from an external dataset.

May 13, 2022

Loading thumbnail…

Pseudo Scatter Plot

This pseudo scatter plot presents six black circular points scattered across a white 960 by 500 SVG canvas. Rather than using a traditional plotting library, the visualization manually positions each ellipse element at fixed coordinates to create the appearance of a scatter plot. The static example uses raw SVG with hardcoded `ellipse` tags, each with uniform 25.5-pixel radii and identical fill colors. No axes, labels, or data encodings are shown, making the piece a minimalist exercise in chart aesthetics rather than a functional statistical visualization.

May 13, 2022

Loading thumbnail…

SVG Fundermentals

This example demonstrates basic SVG shape rendering, showing two overlapping circles and a large rectangle in a fixed 960-by-400 viewport. The circles use `fill` properties to render red and green, while the rectangle applies both a yellow fill and a navy `stroke` with a 10-pixel `stroke-width`. The code uses raw SVG elements—`circle` and `rect`—directly in HTML markup without any JavaScript libraries. Rendering relies on the browser’s native SVG support, with shapes positioned via explicit `cx`, `cy`, `x`, and `y` coordinates. The static composition illustrates vector graphics fundamentals for layout and styling.

May 11, 2022

Loading thumbnail…

Smiley face part 1

Three large circles form the face of a smiley character: a yellow head with a black outline and two black eyes. The example demonstrates basic SVG circle primitives and static attribute styling. The head circle uses fill, stroke, and stroke-width attributes, while the eye circles rely on default black fill. The visualization does not yet include the smiling mouth, as the title and README indicate it is the first step toward completing the figure. No JavaScript libraries or data sources are involved; the entire graphic is hardcoded in the SVG markup.

Apr 23, 2021

Loading thumbnail…

Hello HTML

This example demonstrates the minimal structure required to render any content in a web browser, using only a bare HTML document with an empty body. It shows that a valid HTML page can exist without any JavaScript, CSS, or external libraries, relying solely on the browser's default rendering of the document object model. The code uses the standard HTML5 `<!DOCTYPE html>` declaration and basic `<html>`, `<head>`, and `<body>` elements, with no data sources or visualization APIs involved. This serves as a starting point for understanding how all web-based visualizations are ultimately built upon this foundational markup.

Apr 23, 2021