Noor M

@noorrocks·6 public vizzes

Smiley Face (Part 4) - Assignment -> React Components

This example renders a smiley face as a set of React components, composed of a yellow background circle, two eyes, a red arc mouth, and four white teeth. Built with React and D3 v5, it uses the `d3.arc` generator to produce the mouth path, while positioning elements via SVG coordinates and transforms. The visualization demonstrates a declarative component-based approach to constructing SVG graphics, with each facial feature defined as a separate function and assembled within an `<svg>` element.

Feb 16, 2020

Loading thumbnail…

Smiley Face Part 4

This example shows a stylized smiley face built with React and D3 v5, rendered as an SVG. It uses a radial gradient for the background and a rotated linear gradient for the face fill. The eyes, pupils, and eyebrows are separate React components, with the eyebrows styled using CSS variables that change their fill and stroke-width on hover. The mouth is drawn with D3’s `arc` generator, and a blue tongue is rendered as a separate path. The code defines layout constants for positioning all facial features.

Feb 9, 2020

Loading thumbnail…

Face part IV, React components

A React component renders a stylized face using SVG, with a yellow-to-red gradient background circle, two white eyes with black pupils, and a smile drawn with a d3.arc path. The face is centered in a 960x500 viewport, with drop shadows and stroke filters applied via SVG defs. React 16.10 manages the component hierarchy, while D3 v5 provides the arc generator for the mouth shape, demonstrating hybrid SVG and D3 integration within a React application.

Feb 8, 2020

Loading thumbnail…

Smiley Face (Part 3) - Assignment -> D3.js

This example shows a yellow smiley face drawn with SVG primitives: a yellow circle for the head, black circles for the eyes and pupils, and a red arc for the mouth. Rendered with React, it uses D3.js’s `arc` generator to construct the mouth path, specifying inner and outer radii, a corner radius, and angular start and end points. The face is centered within a 960×500 SVG viewport using explicit pixel offsets for the eyes and mouth. The code sets stroke widths in pixels but does not animate or respond to interaction.

Feb 8, 2020

Loading thumbnail…

Smiley Face (Part 2) - Assignment -> React.js

A yellow smiley face with black outlines is rendered as an SVG graphic, centered in a 960x500 viewport. The face consists of three circles: a large head and two smaller eyes, all positioned using fixed pixel coordinates. The example demonstrates declarative SVG drawing in React.js, where geometric properties like coordinates, radii, and stroke widths are passed as JSX attributes. The code uses React 16.7 and ReactDOM to mount the component, with no interaction or animation, serving as a static visualization of basic shape composition.

Feb 8, 2020

Loading thumbnail…

Smily Face (Part 1) - Assignment

This example shows a simple smiley face constructed from four SVG circles: a large yellow head with a black outline, and two smaller black circles for eyes. The code uses basic SVG elements within an HTML page, setting coordinates and styling attributes directly on each `<circle>` element. The head is centered at (480, 250) with radius 245, while the eyes are positioned symmetrically at (380, 200) and (580, 200) with radius 50. All shapes are rendered using SVG’s built-in rendering, with no external libraries or data sources.

Jan 18, 2020