Golfresultancy

@Golfresultancy·3 public vizzes

my face

This example displays a simple cartoon face constructed from layered SVG shapes in a 960x500 viewport. A large yellow circle with a green stroke and 0.6 opacity forms the head, while two green ellipses with smaller, semi-transparent circles and white pupils create the eyes. The visualization uses raw SVG primitives—circle and ellipse—without any JavaScript libraries or data binding. The static composition, defined directly in the HTML markup, demonstrates basic vector styling, opacity layering, and shape positioning. The accompanying script logs "Hello JavaScript!" to the developer console but does not alter the rendered graphic.

Feb 23, 2021

Loading thumbnail…

Fork of Smiley face final part 3

This example renders a stylized smiley face using React and D3.js, with all shapes drawn as SVG elements. The face consists of a yellow circular head with a dashed blue outline, two green eyes with red dashed borders, and a red mouth created using the `arc()` generator from D3. Coordinates are computed relative to the SVG center via a translation group, while fixed offsets define the eye positions and mouth radius. The code demonstrates a hybrid approach, combining React’s declarative component structure with D3’s geometry utilities for path generation.

Feb 23, 2021

Loading thumbnail…

Smiley face final part 3

This example shows a stylized smiley face built from SVG shapes, with a yellow head, green eyes, and a red mouth arc, all rendered through React components. The head and eyes use dashed strokes with custom colors, while the mouth is generated using the d3 `arc` function with specific inner and outer radii and angular start and end points. The visualization is positioned using a central transform, and D3 v6 provides the arc calculation logic, while React handles the declarative rendering of the SVG structure.

Feb 23, 2021