fernando peguero

@fernandoapeguero·5 public vizzes

SVG Fundamentals

This example demonstrates the foundational elements of HTML, CSS, and JavaScript within a single page. It renders a large, styled text message using a CSS class to control font size and alignment. The page uses plain HTML for structure and CSS for visual presentation, with no external libraries or JavaScript logic. It serves as a minimal template for understanding how these core web technologies work together.

Jul 30, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a minimal HTML page that renders the message “Hello HTML!” centered in the browser window with very large, 13-em font size text. The page uses plain CSS for styling and layout, with no JavaScript or external libraries. It demonstrates the fundamental structure of an HTML document, combining a `<style>` block for the `.message` class and a single `<div>` element in the body. This serves as a basic template for understanding how HTML and CSS work together.

Jul 30, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” in bold, oversized text. It demonstrates a minimal setup for combining HTML structure with CSS styling and JavaScript functionality on a single page. The code uses a plain `<div>` element with a CSS class to control font size and alignment. No external libraries or data sources are involved, serving as a foundational starter template for web-based visualizations.

Jul 30, 2022

Loading thumbnail…

Smily Fork

This example shows a smiling face built from basic SVG shapes, with a gradient-filled head, two eyes, a lower mouth arc, a nose ellipse, and slanted eyebrows. The visualization demonstrates how to compose a familiar icon using D3’s `arc` generator for the mouth path, React for component rendering, and SVG elements like `circle`, `path`, `line`, and `ellipse` for the remaining features. The code defines gradients and uses D3 v7 within a React 17 application, rendering the final graphic to the DOM via `ReactDOM.render`.

Nov 13, 2021

Loading thumbnail…

Fork of Hello HTML

A React component renders a yellow smiley face as an SVG graphic, using D3's `arc` generator to create the mouth path between specified angles. The face consists of a large yellow circle with a black stroke, two black eye circles positioned symmetrically, and a mouth arc. A small gray ellipse sits below the mouth as a nose detail. The visualization demonstrates combining React's declarative JSX with D3's geometric shape utilities, with all coordinates calculated relative to the SVG's center point.

Nov 13, 2021