mundembe

@mundembe·5 public vizzes

Emoji with React

A yellow emoji face with black stroke, two eyes, and a red mouth rendered as SVG using React components. The code defines reusable React elements like `Face` and composes them within an SVG group transformed to the canvas center. It leverages `d3.arc` from d3.v7 to generate the mouth path, while React 17 manages the component structure and rendering. Layout constants for eye offset, radius, and mouth dimensions are defined inline, demonstrating the integration of D3's shape generators with React's declarative JSX syntax.

Feb 16, 2022

Loading thumbnail…

Lion emoji face

This example renders a lion emoji face using React and SVG circles, polygons, and strokes. The code defines a face with orange fur, brown outlines, ears, eyes, mouth, and a nose, along with white snouts and black spots. Positions and sizes are computed from constants like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius`, demonstrating declarative React JSX elements inside an `<svg>` container. D3 v7 is loaded via a CDN, though the drawing itself relies solely on SVG primitives without data-binding or axis scales.

Feb 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple face constructed from three SVG circles rendered inside a React application. It draws a large yellow circle as the head with two smaller black circles for eyes, all positioned using fixed coordinates derived from the container’s width and height. The code uses ReactDOM to render the SVG into the DOM, with D3 v7 loaded via a UMD script. The body margin is removed with CSS to create a full-bleed visualization.

Feb 15, 2022

Loading thumbnail…

emoji-like face with mouth (D3)

This example draws a yellow emoji-like face with two eyes and an open mouth in a circle, centered within an SVG canvas. The face is constructed entirely with React and D3’s `arc` generator for the mouth path, while the circle elements for the head and eyes use standard SVG properties. The visualization uses a fixed layout with computed constants for offsets and radius, and renders via React’s `ReactDOM.render`, with D3 loaded as a UMD module from unpkg.

Feb 15, 2022

Loading thumbnail…

Winking emoji face

A smiling yellow face rendered as SVG, composed of a filled circle for the head, two eyes, and a curved mouth arc. One eye is a closed wink drawn with a thick black line, while the other is a filled circle. Built with React 17 and D3 v7, it uses D3’s `arc()` generator to create the mouth path, and positions elements via SVG groups with transforms.

Feb 15, 2022