Skip to main content
Log in
S

srhodes

@srhodes·6 public vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes using SVG elements, including circles and rectangles with different fill colors and positions. The code defines an SVG canvas with a width of 900 and height of 500, then adds four shapes directly in the HTML markup. It uses plain SVG syntax for rendering, with a linked CSS stylesheet that resets the body margins and hides overflow. A small JavaScript snippet logs a message to the browser console, demonstrating where to inspect output using developer tools. The shapes include two circles and two rectangles, with fill attributes specified inline for some elements.

Sep 13, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Sep 13, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Sep 13, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a bare minimum HTML page rendering the text “Hello HTML” in the browser with a large, centered font. It includes a linked stylesheet that sets monospace typography and a highlighted class, and an inline script that logs “Hello JavaScript!” to the developer console. The page uses plain HTML, CSS, and JavaScript without any external libraries, showcasing a simple static setup.

Sep 13, 2020
Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that displays the text “Hello HTML” in large, centered type, with a tiny bit of styling in a `<style>` block. It also opens the browser’s developer console and logs “Hello JavaScript!” via the `console.log` API, though no visual chart or data is rendered. The page uses plain HTML, CSS, and a simple script tag, with no external libraries like React or D3. The README notes it is a v3 VizHub starter by srhodes, built with React, but the current code itself contains no React components.

Sep 13, 2020
Loading thumbnail…

Untitled

This example demonstrates a React-based visualization that renders a minimal HTML page. The code uses React to manage the component structure and rendering lifecycle, though the visual output appears limited to a basic page setup. No specific data sources or interactive features are visible in the provided files. The implementation relies on standard React APIs for mounting and updating the view, with the main emphasis on establishing a simple framework for further development rather than showcasing complex data-driven graphics.

Sep 13, 2020