Julia Múgica

@juliajmg·3 public vizzes

Fork of HTML Starter

This example demonstrates SVG fundamentals by rendering a single red circle on an HTML page. The circle is positioned with explicit `cx`, `cy`, and `r` attributes, and its fill color is set to red. The code uses raw SVG markup inside an `<svg>` element with no additional libraries or frameworks, relying solely on basic HTML and CSS. The visualization is a static graphic, showing only what a minimal SVG circle renders in a browser.

Mar 15, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face rendered as a yellow circle with black stroke, two eyes, and a mouth arc, centered in an SVG canvas. It uses React to build the SVG elements and D3’s `arc()` generator to create the mouth path. The circle and eyes are drawn with basic SVG circle elements, with positions and sizes defined as constants. The face is translated to the center of a 960×500 viewport, and the code demonstrates how to integrate React components with D3 geometry helpers for static visualization.

Apr 17, 2021

Loading thumbnail…

Ju's smiley face

This example shows a cheerful, cartoon-like smiley face built entirely with SVG shapes: a yellow circle for the face, two smaller circles for eyes, and a D3 arc path for the mouth. The code uses React to compose the SVG elements declaratively, translating the origin to the canvas center to simplify positioning. It leverages the D3 `arc` method with method chaining to generate the mouth’s path geometry, calculating its inner and outer radii and angular range. The face is rendered within a 960×500 viewport, with a black stroke outlining the main circle.

Apr 17, 2021