flufficornn

@flufficornn·4 public vizzes

Smiley face part 1

A yellow smiley face rendered in SVG. The visualization shows a head, two eyes, and a smile, all positioned relative to a central coordinate system. The face is constructed using React components and D3's `arc()` function to create the mouth path. The code defines constant dimensions for the eyes, mouth, and stroke width, then renders the shapes as SVG circles and a path.

Jul 8, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a simple, stylized face using D3.js v5 within a React framework. It constructs a yellow circle for the head, two eyes with eyebrows, and a mouth path. The eyebrows animate by moving down and up over two seconds using D3 transitions. The code leverages `d3.select`, `d3.arc` for the mouth shape, and SVG attributes for positioning, with the entire scene drawn inside an SVG element.

Jul 8, 2022

Loading thumbnail…

SVG Fundamentals

A minimal example of SVG fundamentals, this page renders a single shape inside an inline `<svg>` element. The code defines a circle element but deliberately misspells it as `<cirlce></cirlce>` within the SVG namespace, demonstrating that malformed tags will not render a shape. The example uses raw HTML and SVG markup without any JavaScript logic or data binding, relying solely on the browser’s static SVG rendering capabilities. It serves as a starting point for learning how SVG structures map to visual output, with no external libraries or dynamic behavior involved.

Jul 6, 2022

Loading thumbnail…

Hello HTML

This example presents a minimal HTML page that demonstrates the foundational structure of a web document. The code defines a basic document with a title, an empty body, and links to external resources. It serves as a starting point for styling with CSS and adding interactivity through JavaScript, establishing a blank canvas for further development. The example explicitly references a React Starter project, positioning this HTML as a primitive precursor to more complex, framework-driven visualizations.

Jul 6, 2022