Skip to main content
SimilarExport ZIP
100%

Fork of make a face d3js

✓ Published0🌍 Public
GGodspower Wodi
Last edited Mar 3, 2022
Created on Mar 3, 2022
Forked from make a face d3js

This example shows an interactive face made of circles that respond to mouse movement using a D3 force simulation. The visualization reads COVID-19 case data from a CSV file, though the display itself focuses on the playful animated face rather than a traditional chart. Built with D3 v7 and React, the code uses `d3.forceSimulation` to position the facial features, which are rendered as SVG elements within a 960x500 viewport. The simulation continuously updates node positions, creating a lively, dynamic expression that follows the pointer.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

An animated face built with D3.js v5 and React shows a red circle head with eyes, eyebrows, and a mouth. The eyebrows transition up and down in a looping motion using `transition.duration` and `transition.attr`. Rendered as SVG, the code uses D3’s `select` and `arc` to construct the mouth path, with eye and brow shapes positioned via translation attributes. The face is centered on a 960x500 SVG canvas with no external data.

DDarren-20
87% match
Loading thumbnail…

Fork of make a face d3js

This animated SVG face uses D3.js v7 to build a cheerful character from basic geometric shapes. It draws a yellow circle head with elliptical eyes, circular irises, rectangular brows, and a mouth shaped using the `arc` function. The eyebrows are the only animated elements, moving via chained `transition` calls on their transform attributes. The markup is generated imperatively through `select` and `append`, with coordinates calculated from the SVG’s width and height attributes.

GGodspower Wodi
86% match
Loading thumbnail…

Fork of Make a Face with D3 and React

This example demonstrates a simple animated face built with D3.js v6 and React. It shows a yellow circle with eyes, brows, and a mouth, where the brows animate vertically up and down over time. The visualization uses D3’s SVG selection and shape creation methods such as `select`, `append`, `attr`, and `transition`, along with the `arc` generator to draw the mouth path. React handles the page’s header and initial render, while D3 directly manipulates SVG elements.

GGordon Yang
86% match
Loading thumbnail…

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

A face constructed from simple SVG shapes is assembled and animated using D3.js v6. The example uses `d3.forceSimulation` to position and move the facial features, such as eyes and mouth, creating a lively, physics-based effect. The SVG elements are bound to data and updated each tick of the simulation. The code relies on standard D3 selections and the `d3.force` module to handle the layout and animation, rendering the final result in the browser.

Ssonghai fan
86% match
Loading thumbnail…

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

This example demonstrates how to construct an animated face using SVG elements and D3.js v5. The visualization builds a face from basic geometric shapes, applying custom styling through CSS classes that define stroke colors and line properties. The code initializes an SVG canvas with fixed dimensions and relies on D3’s selection and data-binding methods to render the face components. The design emphasizes round line joins and caps for a smooth, illustrated appearance, with a compact layout that avoids page scrolling.

CChromosin13
86% 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
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
85% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This face visualization created with D3.js v7 renders a stylized cartoon face using SVG shapes, including a radial gradient-filled circle for the face, black eyes with white reflection highlights, a curved nose path, and an arc-based mouth. Interactive hover transitions scale the face radius via `transition().duration()`, while the mouth is drawn using `d3.arc()` with specified inner and outer radii. The code appends all elements to an SVG canvas, using basic SVG attributes and event listeners for mouse interactions.

Sshailajat1998@gmail.com
85% match