André Thiago Netto

@athiago·4 public vizzes

Fork of React Starter

This example shows a simple yellow smiley face rendered as an SVG graphic, built with React and D3.js. It demonstrates how to compose reusable React components—`BackgroundCircle`, `Eyes`, and `Mouth`—that accept props for geometry and styling. The code uses `d3.arc()` to generate the mouth path, while circles for the face and eyes are placed using fixed coordinates derived from a 960×500 viewport. The rendering approach relies on declarative JSX and SVG elements, with D3 only for the arc path calculation.

Mar 21, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a simple yellow circle with a black outline and two smaller black circles positioned inside it, representing a face. The code uses React 18 to render the SVG directly into the DOM, with the entire visualization defined as static SVG elements. It relies on the ReactDOM API for rendering, while the SVG markup includes explicit coordinates for the face’s features. No interactive behavior or data fetching is present, making it a minimal starter template for React-based SVG visualizations.

Mar 21, 2024

Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational "Hello World" for VizHub V3, showing how the runtime renders a single styled text element inside a container. It highlights the hot-reloading workflow by rendering a hardcoded font size of 222 pixels within an HTML string, using inline CSS for centering. The code exports a `main` function that sets the container’s innerHTML, illustrating the simplified entry point that replaces traditional HTML files. This serves as a minimal template for interactive widget development, where manual code changes trigger immediate visual updates in the browser.

Mar 21, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" of VizHub V3, a blank slate starting point that showcases continuous hot reloading. The code exports a `main` function that receives a container element and renders a text string using inline styles, with the font size set to a static value. The example highlights interactive widgets, where holding Alt and dragging a number in the editor adjusts properties like font size in real-time, providing immediate visual feedback through the runtime environment. The rendering approach uses plain DOM manipulation via `container.innerHTML` without additional libraries.

Mar 21, 2024