Amir

@ahalizadeh26·4 public vizzes

Fork of Fork of Smiley Face Part III

This example renders a smiling face as a reusable React component, composed of separate SVG elements for the background circle, eyes, and mouth. The mouth uses d3’s `arc` generator to create a curved path based on configured radius and width values. All shapes are drawn in SVG within a single `<g>` container that translates the drawing to the center of a 960-by-500 viewport. The code explicitly defines constants for dimensions and positions, demonstrating a modular, parameter-driven approach to building simple visualizations with d3.v7 and React 17.

Jan 8, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a classic smiley face rendered as a scalable vector graphic using React and D3 v7. The face consists of three circles—a yellow head with a black stroke and two black eyes—plus a mouth drawn as a D3 arc path. The code uses `d3.arc()` to generate the semicircular mouth and React’s `ReactDOM.render` to mount the SVG. All positions and radii are defined as JavaScript variables, making the face easily adjustable through constants like `eyeOffsetX` and `mouthRadius`.

Jan 6, 2022

Loading thumbnail…

Smiley Face Part I

A smiling face is rendered as a centered SVG graphic, with a yellow circular head, black stroke outline, two eyes, and a curved mouth arc. The visual is built using React to construct the SVG elements, while D3’s `arc()` generator defines the mouth path with specified inner and outer radii and angular start and end points. Hardcoded dimensions for the face, eye positions, and mouth shape are provided as constants within the code.

Jan 6, 2022

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a simple smiley face in progress, featuring a large yellow circle with two smaller black circles representing eyes. The visualization is built with an SVG canvas and styled using basic HTML elements, including a title and header. The code uses native SVG circle elements with explicit coordinates and stroke properties, rendered directly in the browser through the D3.js v3 library. The face is incomplete, missing a mouth, as the title suggests it is only the first part of a larger design.

Jan 5, 2022