Rubanda

@Rubanda·10 public vizzes

pseudo vector

This example shows a single, thick black polyline that zigzags diagonally across a white 960×500 SVG canvas. The path begins at the lower left, ascends upward with sharp directional changes, and ends near the upper right without closing the shape. The rendering relies purely on SVG markup and the path element’s `d` attribute, using absolute coordinates for line commands. No JavaScript libraries are referenced; only inline SVG and a minimal CSS stylesheet with `body { margin: auto; overflow: hidden; }` are used to center the graphic.

Sep 27, 2022

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape

A black-and-white bar chart displays four labeled categories, A through D, as horizontal bars positioned against a white background. The visualization uses SVG rectangles to draw each bar, with the width of each rectangle representing its value, and text elements for labels. The bars are arranged in descending order of width, offering a clear visual comparison of the dataset. The code uses plain SVG elements, including rect and text, styled with CSS, and uses the Share Tech font for the labels.

Sep 27, 2022

Loading thumbnail…

Pseudo Horizontal Bar

This example shows four black vertical bars of descending height arranged from left to right across a white canvas, creating a pseudo horizontal bar chart. Each bar uses an SVG `rect` element, with explicit `x`, `y`, `width`, and `height` attributes hard-coded into the markup. The rendering uses static SVG (no animation or interaction) within a simple HTML page, and the overall effect relies on the viewer’s perception of the bars as part of a single horizontal sequence. The chart is purely presentational, with no axis, labels, or data-binding logic.

Sep 27, 2022

Loading thumbnail…

bar chart

This bar chart displays four vertical bars of varying heights, each represented as a black rectangle on a white background. The bars are evenly spaced, with the tallest on the left and progressively shorter bars to the right. The visualization uses raw SVG elements—specifically `<rect>` tags—to draw the chart directly within an HTML page. The page includes basic styling for margins and hidden overflow, and the SVG canvas has fixed dimensions of 960 by 500 pixels.

Sep 27, 2022

Loading thumbnail…

Fork of Hello HTML

This example displays a scatter of six black circles over a white SVG canvas, each positioned at fixed coordinates. The page uses a plain HTML structure with inline SVG elements, setting the body margin to zero and hiding overflow. It renders the circles directly within the SVG markup without any JavaScript libraries or data binding, serving as a minimal demonstration of static SVG visualization within an HTML document.

Sep 27, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for D3 version 7, rendering a single yellow circle with a black stroke inside an SVG element. The page loads D3 from a CDN and uses static SVG markup to display the shape, with no data binding or interactive behavior. The code includes commented-out imports and selection methods, showing how a D3 script would typically begin, while the current visualization relies solely on hardcoded SVG attributes.

Sep 27, 2022

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example shows a stylized, smiling face built from layered SVG shapes, with a gradient-filled circular background, asymmetric eyes, an arc-based mouth, and teeth drawn from lines and arcs. The face is assembled from reusable React components—BackgroundCircle, Eyes, Mouth, Teeth, and FaceContainer—whose positions and sizes are controlled by numerical props passed from a central App component. The code uses React 18 for rendering, d3 7's `arc()` helper to generate the mouth and teeth paths, and SVG `linearGradient` for the green-to-yellow fill. The face is centered in a 960×500 viewport using explicit `centerX` and `centerY` coordinates.

Sep 27, 2022

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example renders a stylized robot-like face constructed from reusable React components. An SVG group centers the face, which includes a gradient-filled background circle, offset eyes, a mouth arc, and teeth drawn with D3’s `arc` generator and SVG `<line>` elements. Each facial feature is parameterized with props for position, radius, and stroke width, allowing easy customization. The face is assembled from separate components—`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`—using React and D3 v7, with the entire SVG output generated client-side.

Sep 27, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and SVG. It positions two eye circles and a yellow head with a black stroke relative to the window’s center, using JSX elements and a `<g>` transform. The code leverages React 16.9 and ReactDOM, with dimensions and offsets defined as constants. The mouth is omitted, and the face scales to the viewport size via `window.innerWidth` and `window.innerHeight`.

Sep 27, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a partially constructed smiley face rendered as SVG, with a yellow circle for the head and two smaller black circles for eyes. The React code uses `React.createElement` to generate the SVG elements, while a static SVG markup in the HTML provides a reference for the intended layout. The face is incomplete, missing a mouth, as noted in the README. The code imports React and ReactDOM to mount the component, which currently contains only a placeholder comment, leaving the visual output entirely to the raw SVG in the body.

Nov 12, 2021