Mushraf Altaf

@Mush-A·4 public vizzes

Fork of Fork of Fork of Smiley part III - React & D3 - tweak

A yellow smiley face rendered with React and D3 follows the mouse cursor across the screen. The face uses D3’s `arc` generator to draw the mouth, while the eyes are separate circles whose red pupils shift position based on the cursor’s coordinates. Mouse movement updates React state via a `mousemove` listener, triggering re-renders of the SVG elements. The visualization is built with React 16.9, D3 v7, and SVG, with hardcoded dimensions of 960 by 500 pixels.

Jul 23, 2021

Loading thumbnail…

Fork of Fork of Smiley part III - React & D3

This example shows a classic yellow smiley face rendered as a static SVG graphic. The face consists of a large yellow circle with a black stroke, two black circle eyes, and a dark mouth drawn using an arc path that spans from a half to a three-quarter angle. The visualization combines React with D3’s `arc` API to generate the mouth shape, while passing coordinates and dimensions as inline props. The entire drawing is centered within a 960 by 500 pixel SVG canvas, with all elements positioned via a group translation.

Jul 23, 2021

Loading thumbnail…

Smiley part II - React

A yellow smiley face is rendered as an SVG circle with two black eye circles, centered in a 960x500 viewport. Built with React and D3 v7, the visualization uses the React `render` method to create the SVG elements, with circle positions and radii defined by constants like `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The code draws a static face with a yellow fill, black stroke, and no mouth or other features.

Jul 23, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a static SVG smiley face, composed of a large yellow circle with two smaller black circles for eyes, using nothing but an HTML page and inline SVG markup. The visualization demonstrates how raw SVG elements—`<svg>`, `<circle>`, and presentation attributes like `fill`, `stroke`, and `r`—can be used directly without any JavaScript libraries. The code sets a fixed viewport of 960 by 500 pixels and positions each shape explicitly via `cx` and `cy` coordinates. The page is a minimal fork of the classic “Hello HTML” template, showing a hand-coded shape as a starting point for SVG-based data art.

Jul 22, 2021