manjushayarreddu

@manjushayarreddu·9 public vizzes

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives—a yellow circle, two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and downward over two two-second intervals using D3’s `transition()` and `attr()` methods. The code imports `select` and `arc` from D3, sets explicit constants for eye spacing and eyebrow dimensions, and renders everything on an SVG canvas with a centered group transform.

Feb 23, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This interactive SVG smiley face is built using React components that render D3-generated arc paths, showcasing a hybrid approach where React manages the DOM structure and D3 handles geometric calculations. The visualization combines multiple D3 arc generators for the mouth, eyes, and ears, along with D3’s `arc()` function to create curved shapes. Standard SVG elements like circles, ellipses, lines, and paths compose the facial features, with React’s `ReactDOM.render` mounting the component. The code uses D3 v5 and React 16.9 to draw the static face with styled strokes, fills, and transforms.

Feb 23, 2023

Loading thumbnail…

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

This example shows a static SVG smiley face with animated-looking features, including pink face, red eyes with black pupils, white eye arcs, purple ears, and a black mouth created using D3.js arc generators. The face is built with React components that use D3 v5's `arc()` API to construct the mouth, eye, and ear paths, while circles, ellipses, and lines handle the other facial elements. The code demonstrates fundamental DOM manipulation through D3.js within a React framework, with all coordinates and dimensions defined as constants before being rendered as SVG elements.

Feb 23, 2023

Loading thumbnail…

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

This example builds a smiley face with D3.js v5, animating its eyebrows in a repeating up-and-down motion. The face is constructed entirely from SVG primitives—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` API for the mouth—all grouped and positioned via `transform` attributes. The animation uses chained `transition().duration()` calls on the eyebrow group, while static styling is applied directly to attributes like `fill` and `stroke`. The code imports `select` and `arc` from D3 and renders to a fixed 960×500 SVG canvas.

Feb 23, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a stylized smiley face using React and D3, composed of SVG primitives such as circles, lines, ellipses, and arcs. It shows the face centered on a yellow background, with eyes, pupils, eyebrows, ears, and a mouth constructed from geometric shapes. The code defines D3 arc generators (e.g., `arc()` for the mouth and `d3.arc()` for the eye and ear shapes) and applies transforms to position them. React manages the SVG elements, while D3 v5 supplies the arc path calculations.

Feb 22, 2023

Loading thumbnail…

smiley

This example shows a simple smiley face rendered as an SVG, with a green circular head, two black eyes, and a black mouth arc drawn using D3’s `arc` generator. The face is built declaratively in React, with all measurements (center coordinates, stroke width, eye offsets, and mouth radius) defined as constants. D3 computes the mouth path via `d3.arc()` with specified inner and outer radii and start/end angles, while React renders the `circle` and `path` elements inside an SVG container. The code uses `ReactDOM.render` to mount the component to the DOM.

Feb 22, 2023

Loading thumbnail…

smiley

A simple SVG smiley face is drawn using React components, where a yellow circle with a black stroke forms the head and two filled circles represent the eyes, positioned symmetrically around the center. The face is centered dynamically based on the window dimensions, with its size scaling relative to the viewport height. The implementation uses React 16.9 and ReactDOM to render the SVG elements directly in the browser, computing all positions and radii from the window's width and height rather than using fixed coordinates.

Feb 22, 2023

Loading thumbnail…

manjushas smiley

This example shows a yellow smiley face centered on the screen, with black outlined eyes and a curved mouth, all rendered as SVG shapes. The face’s size and position adapt to the browser window using `window.innerWidth` and `window.innerHeight`. The code uses React with JSX to declare the SVG elements, and the mouth is generated with the `d3.arc` function, which computes a path from angular coordinates. The face is composed of circles for the head and eyes, while the mouth is drawn as a thick arc with a dark fill.

Feb 22, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face drawn as a yellow circle with two eyes, rendered as an SVG graphic using React. The face is positioned through a translation transform based on computed center coordinates, with eye offsets and radii defined as constants. The code uses React’s `ReactDOM.render` to mount the SVG element, and relies on the D3 `arc` generator to create the mouth shape, though the mouth is not currently visible in the output. The face’s dimensions and stroke widths are all parameterized, demonstrating a reusable component structure.

Feb 21, 2023