nataliaas

@nataliaas·3 public vizzes

Face+_+Glass

A cheerful yellow face fills the browser viewport, drawn as a full-screen SVG circle with a black outline. Two smaller black circles serve as eyes, positioned symmetrically above the center, while a thick black arc below forms a smiling mouth. The visualization uses React for component structure and D3’s `arc` generator to define the mouth’s curved path. Dimensions and positions are calculated from `window.innerWidth` and `window.innerHeight`, centering the face dynamically. This example demonstrates a minimal blend of React rendering and D3’s geometry API within a scalable vector graphic, adapting to any screen size automatically.

May 1, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The circles are positioned using explicit `cx` and `cy` coordinates within a 960×500 SVG viewport. The code uses raw SVG elements and attributes—`circle`, `fill`, `stroke`, and `stroke-width`—to define the shape and styling, with no JavaScript libraries or dynamic behavior. The rendering is entirely static, using inline SVG markup embedded directly in the HTML body.

May 1, 2021

Loading thumbnail…

Fork of Hello HTML

This example demonstrates a completely blank HTML page with only a title, showing the minimal structure required for any web document. The code uses no external libraries or data sources, relying solely on native HTML elements. It includes an embedded YouTube video link in the README, but the rendered page itself contains no visualization, graphics, or interactive behavior. The fork serves as a starting point for developers to build upon, illustrating the basic scaffolding of a webpage in its simplest form.

May 1, 2021