Johel Durán Acuña

@JohelDuranA·4 public vizzes

Homework 1

This example renders a partial smiley face in a React-powered SVG canvas. The code uses D3’s `arc` function to draw a thick semi-circular mouth, with two dashed placeholder lines for eyes, all centered on a 960×500 coordinate system. The face is built programmatically using absolute coordinates and transformations, with an empty rectangle overlay. The visualization demonstrates basic geometric composition and D3’s arc path generation within a React component, though the final output is an incomplete facial sketch.

Jul 1, 2022

Loading thumbnail…

smiley face part III

This example displays a yellow smiley face composed of simple SVG shapes: a large filled circle for the head, two smaller circles for the eyes, and an arc path for the mouth. It uses React 18 for rendering and d3.v7's `arc` function to define the mouth’s geometry with inner and outer radii. The SVG element is centered, with the face elements positioned using a `transform` translation.

Jun 29, 2022

Loading thumbnail…

smiley face part II

A yellow smiley face rendered as an SVG appears centered on a white background, with two black eyes and a thick black circular outline. The face is missing its smile, making it incomplete. Built with React and ReactDOM, the visualization uses JSX to define three circle elements, with eye positions calculated from center offsets and a radius based on half the viewport height.

Jun 28, 2022

Loading thumbnail…

Smiley face part I

This example shows a simple yellow smiley face drawn on an SVG canvas, with two black circles representing eyes and a larger outlined circle for the face. The face is centered horizontally and positioned slightly below the vertical midpoint of the 960×500 viewport. The code uses raw SVG elements, including `circle` tags with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes, all placed directly in the HTML without any JavaScript libraries. The rendering is static, relying solely on SVG markup for its presentation.

Jun 27, 2022