Skip to main content
SimilarExport ZIP
100%

Fork of making face

✓ Published0🌍 Public
SShishiraRudrabhatla
Last edited Jun 18, 2022
Created on Jun 18, 2022
Forked from making face

A fork of a "making face" example renders a single large circle in an SVG canvas, initially populated with no data or interaction. Built with React and D3, the code selects the SVG element and appends a circle with a fixed radius of 200 units via D3's selection and attribute methods. The visualization is minimal, showing only this geometric shape against a black background, with no animation, axes, or data source evident. The rendering relies on D3's DOM manipulation within a React component structure.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of making face

A blank SVG canvas of 690 by 500 pixels awaits a single circle, which is appended via D3’s `select` and given a radius of 200. The code, built with React and rendered via SVG, sets up the basic geometric element without specifying fill, stroke, or position, leaving the visualization minimal and abstract. Using only `d3.select` to manipulate the SVG, this example demonstrates a bare-bones starting point for a face-like composition, though no actual facial features or data are present in the current implementation.

JJamesHop31
92% match
Loading thumbnail…

Fork of making face

A blank SVG canvas of 690 by 500 pixels awaits a single circle, which is appended via D3’s `select` and given a radius of 200. The code, built with React and rendered via SVG, sets up the basic geometric element without specifying fill, stroke, or position, leaving the visualization minimal and abstract. Using only `d3.select` to manipulate the SVG, this example demonstrates a bare-bones starting point for a face-like composition, though no actual facial features or data are present in the current implementation.

JJamesHop31
92% match
Loading thumbnail…

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

A simple React-based visualization uses D3.js to render a smiling face as static SVG elements. The code defines circles for the face outline and eyes, with hardcoded coordinates and styling properties. It imports React and ReactDOM from the React 18 UMD build, then logs the React object to the console. The visualization does not demonstrate interactive behavior or dynamic data; it solely displays a fixed geometric composition in a 960x500 SVG canvas.

Aaubhi89
87% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A simple SVG face renders a large light green circle as the head, with two smaller black-outlined circles for eyes positioned on a 960 by 500 canvas. Built with React and ReactDOM, the component calculates center coordinates and uses hardcoded eye positions. The example demonstrates basic circle primitive rendering and static layout, with no interactive behavior or data binding.

SSahil-Jain-s
87% match
Loading thumbnail…

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

This example uses D3.js to compose a simple SVG scene with circles, rectangles, and paths, mixing raw shapes with grouped elements. It demonstrates styling via CSS classes, including black strokes on lines and paths with rounded joins. The code appends a circle to an existing SVG using D3’s `select` and `append` methods, while the HTML markup defines the initial geometry and coordinates. Rendering relies on the SVG DOM, with a minimal React setup noted in the README.

PPuja229
87% match
Loading thumbnail…

Fork of Face

A smiling face rendered with SVG, centered and scaled to fill the browser window. The visualization constructs the face using D3’s `arc` generator for the mouth and plain SVG circles for the head, eyes, and stroke. The React component computes the coordinates and dimensions based on the window’s width and height, with the head radius derived from the viewport height. The example demonstrates a hybrid approach, using React for structure while calling on D3 for the arc path generation.

Ttheocostaras
87% match
Loading thumbnail…

Fork of let's make a face with D3.js

A stylized face is constructed from basic SVG shapes, including a yellow circle for the head, two white ellipses for the eyes, black circles for pupils, and a gray arc for the mouth. The drawing is rendered on a 1000×500 SVG canvas using D3 v5 selection and attribute methods. Coordinates are computed dynamically from the canvas width and height, while the mouth is generated using the D3 arc generator with explicit inner and outer radii and angle values. The code is written in React and imports the `select` function from D3.

KK V VINITHA
86% match
Loading thumbnail…

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

This example uses D3.js v5 to draw a stylized face on an SVG canvas. The face consists of a large orange circle for the head, two smaller circles for eyes, and a mouth rendered using D3's `arc()` path generator. The code also creates eyebrows as rectangles, which animate upward and back down over two seconds each way using chained `transition().attr()` calls. The visualization demonstrates basic SVG shape construction and sequential animation within a React framework.

SSnehareddy19
86% match