Aristotle13

@Aristotle13·3 public vizzes

(Nishant) Fork of Fork of smileface Hello HTML

This example renders a smiling face emoji as an SVG graphic, composed of a yellow circle for the face, two black circles for eyes, and a curved arc for the mouth. Built with React and D3.js v6, it uses the `d3.arc()` API to define the mouth’s path with specified radii and angular ranges. The `<svg>` element’s dimensions, positioning, and stroke properties are set directly through React props, with the entire emoji grouped and translated within the coordinate system.

May 6, 2021

Loading thumbnail…

Fork of smileface Hello HTML

This example shows a classic smiley face drawn with SVG shapes inside a React application. The face consists of a yellow circle for the head, with black circles for the eyes and an arc-shaped path for the mouth. The code uses the `d3.arc()` API to generate the mouth’s path geometry, calculating its inner and outer radii and angular range. Positioning relies on explicit coordinates relative to a translated group element, while React’s `ReactDOM.render` mounts the SVG into the HTML page. The D3 library is loaded via a CDN, and the chart renders with a fixed 960x500 viewport.

May 5, 2021

Loading thumbnail…

Fork of Fork of smileface Hello HTML

This example displays a yellow smiley face with two eyes, rendered as SVG circles on a dark background. It uses React 17 and ReactDOM 16.9 to mount a functional component that defines the face’s geometry, including a large yellow circle for the head and two black eye circles with fixed offsets. The SVG dimensions and stroke width are set as constants, and the component is rendered into a root div element.

May 5, 2021