XAlomia

@XAlomia·4 public vizzes

Smiley Face Part 1

This example shows the first stage of building a smiley face, displaying only the yellow circular background, two black eyes, and a curved mouth arc. The face components are separate React components composed within an SVG container, with the mouth path generated using the D3 `arc` generator. The visualization uses React 17 and D3 v6, with all positioning calculated from a central origin and fixed offsets for the eyes and mouth radius. The face is rendered entirely through SVG elements without any data input, focusing purely on geometric composition.

Apr 14, 2021

Loading thumbnail…

HW Tweak Face

A stylized face built from SVG primitives sits at the center of a 960×500 canvas, composed of a yellow circle, two elliptical ears, black-outlined eyes, and a semi-circular mouth generated with d3.arc. The example demonstrates how to declaratively construct and position geometric elements using React’s JSX syntax, with dimensions and offsets defined as constants. D3’s arc generator computes the mouth path, while React handles rendering the SVG group and shapes. The code relies on ReactDOM to mount the component into the page, and d3.v6 for arc generation.

Apr 14, 2021

Loading thumbnail…

Hello HTML

This example demonstrates the minimal structure of a web page rendered with HTML, CSS, and JavaScript, showing how a single SVG circle is placed on a canvas. It uses an inline `<style>` block to remove page margins and hide overflow, and an inline `<svg>` element with a fixed width and height to define the circle’s position. No external libraries or frameworks are imported, so the example relies solely on native browser APIs for markup and styling, providing a starting point for more complex visualization projects.

Apr 13, 2021

Loading thumbnail…

Cars Report

This example shows a minimal web page that renders the text “hello world” in large type, demonstrating how to load D3 and local ES6 modules in VizHub. The page uses an HTML `<pre>` element as the output target and updates its content via `document.getElementById` in the main script, which imports from `cars.js` and `myMessage.js`. The data file includes a small JSON array of car objects parsed with `JSON.parse`. The code relies on a bundled script generated by Rollup, with styling defined in `styles.css`.

Apr 6, 2021