Skip to main content
Log in
R

Rayed12

@Rayed12·15 public vizzes

Loading thumbnail…

Fork of Smiley Face Part V

A React and D3v5 example renders a smiley face as scalable vector graphics, composed of a pink background circle, two eyes, and an arc-based mouth. The code demonstrates modular component architecture through ES6 imports, with separate files for each facial feature. D3's `arc` generator creates the mouth path, while React Fragments group the eye elements. SVG circles and paths are positioned relative to a central coordinate system using a transform group. The visualization splits reusable React components into individual modules, showing how to integrate D3 calculations with React's declarative rendering for static SVG compositions.

May 15, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face with two eyes, eyebrows, and a curved mouth, all rendered as SVG elements. The face is centered and drawn using D3 v5’s `select`, `arc`, and geometric shape methods. A transition animates the eyebrows by shifting them upward on load before returning them to their original position. The design mirrors a classic smiley icon, with the mouth created from an arc path and the eyes and head as circles.

May 15, 2022
Loading thumbnail…

Fork of Smiley Face Part V

A fork of Smiley Face Part V renders a yellow, black-stroked smiley face in React with SVG, centered on a 960×500 canvas. It splits components—BackgroundCircle, Eyes, and Mouth (using d3.arc)—into separate ES6 modules, with React Fragments composing the eyes. The code defines eyebrow rectangles but lacks the d3-selection logic to apply them, so only the static face appears. SVG output uses d3.v5 and React 16.9, with no visible data source or animation.

May 15, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

May 15, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn on a 960-by-500 SVG canvas. Two solid black circles serve as eyes, while the large yellow circle with a black stroke forms the head; the mouth is not yet drawn, as noted in the README. The rendering relies on raw SVG elements—`circle` with `fill` and `stroke` attributes—defined directly in the HTML, with CSS hiding scrollbars and resetting margins. The code uses no external libraries, only native SVG markup for static vector shapes.

May 15, 2022
Loading thumbnail…

Raed

A smiley face is rendered as a static SVG graphic, centered within the viewport. The yellow face, black stroke, eyes, and mouth are all drawn using basic SVG shapes and D3’s `arc` generator for the mouth path. The visualization is built with React components, using D3 v7 for the arc calculation, and displays a simple, fixed composition without interaction.

Apr 5, 2022
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This visualization uses D3.js to build a smiling face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth path generated with the `d3.arc` function. The eyebrows animate upward and back down over four seconds using chained `transition.attr` calls, demonstrating DOM manipulation and data binding in D3 v5. The face is centered on a 960×500 SVG canvas, with all shapes positioned relative to a central group.

Apr 5, 2022
Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG shows a subtle animation as its eyebrows rise and fall in a repeating two-second loop. Built entirely with D3.js v5, the example uses `d3.select` and `d3.append` to construct circles, rectangles, and a mouth path via `d3.arc`, while chained `transition().duration()` calls drive the eyebrow movement. The code reads the SVG's width and height attributes to center the face within a 960×500 canvas, demonstrating fundamental DOM manipulation and data-driven styling without external data.

Apr 5, 2022
Loading thumbnail…

Fork of mujSmile

A cheerful, animated face built with D3.js v6 shows a yellow circle with blinking eyes, moving eyebrows, a rotating mouth, a spinning nose, and a red cigarette that scales and rotates. The SVG scene, centered in a 960x500 viewport, uses D3's `arc()` generator for the mouth and nose paths, while `transition()` and `attr()` handle the sequential animations over two-second intervals. Rectangles form the eyebrows, teeth, and cigarette, with explicit stroke and fill attributes defining their colors, all rendered entirely through SVG markup without external data sources.

Apr 5, 2022
Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, rendered as a large circle with two smaller eye circles and a mouth. The face scales responsively to the viewport dimensions, with all elements positioned relative to the window's center. The visualization uses React to manage the SVG elements, calculating positions and sizes dynamically from `window.innerWidth` and `window.innerHeight`. ReactDOM renders the component tree, where each circle is drawn using SVG tags with properties for fill color, stroke, and radius.

Apr 1, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow smiley face rendered as an SVG, with two black eyes positioned on a larger yellow circle. The visualization uses React to define and render the SVG elements, while D3 v7 is loaded but not actively used in the drawing logic. The code demonstrates basic React component structure, JSX syntax with inline JavaScript expressions for coordinates and dimensions, and styling through CSS to remove body margins. The rendering approach relies on static SVG circles with fixed properties, illustrating fundamental React and SVG integration within a minimal setup.

Apr 1, 2022
Loading thumbnail…

Fork of Raed

This example shows a blank SVG canvas created with React and D3 v6, framed by a visible margin area that highlights the layout convention. The `VizContainer` component abstracts the SVG and group elements, following the standard margin structure with dimensions set to 960 by 500 pixels. The code uses React 16.13.1, ReactDOM, and D3 v6, all loaded via CDN, and renders an empty container ready for future visualization content. The margin display can be toggled off by removing the `showMargins` prop.

Apr 1, 2022
Loading thumbnail…

Raed

This example shows a blank React and D3 visualization scaffold with visible margins, demonstrating the standard margin convention for SVG layouts. The App component defines fixed dimensions (960 by 500 pixels) and margin values, then renders a VizContainer that abstracts the outer SVG and inner group elements. The container conditionally displays gray and light gray rectangles to visualize the margin areas, which can be hidden by removing the `showMargins` prop. The code uses React 16.13.1, ReactDOM, and D3 v6, all loaded via CDN links, with the rendering approach using plain SVG elements.

Apr 1, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow smiley face rendered as an SVG, with two black eyes positioned on a larger yellow circle. The visualization uses React to define and render the SVG elements, while D3 v7 is loaded but not actively used in the drawing logic. The code demonstrates basic React component structure, JSX syntax with inline JavaScript expressions for coordinates and dimensions, and styling through CSS to remove body margins. The rendering approach relies on static SVG circles with fixed properties, illustrating fundamental React and SVG integration within a minimal setup.

Apr 1, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple yellow circle with a black stroke, rendered as an SVG element inside a React application. Using React and ReactDOM, the code defines a functional component that returns the circle with fixed dimensions for width and height. The SVG is sized at 960 by 500 pixels, with the circle centered and given a radius of 245 pixels. The visualization demonstrates basic shape rendering through React’s JSX syntax, creating a minimal smiley face base without facial features.

Mar 29, 2022