Skip to main content
SimilarExport ZIP
100%

Datavis 2020 Course - Funny Face

✓ Published1🌍 Public
Hhartjohn
Last edited Dec 12, 2021
Created on Dec 12, 2021
Forked from HTML Starter

A yellow smiley face is drawn on a black-outlined circle, with two black eyes and an open mouth, all centered in an SVG graphic. The code uses React for the component structure and D3.js version 7’s `arc` generator to create the mouth path, while circles are positioned manually via JSX attributes. Rendering is strictly SVG-based, with hardcoded dimensions and offsets; no external data source is used.

AI-generated description

Suivi du cours Datavis 2020 Funny FACE

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 1 - Face (React + D3)

This example uses React and D3.js v7 to render a simple, static smiley face as an SVG graphic. It shows a yellow circle for the head, two black circles for eyes, and a curved arc for a mouth, all positioned relative to a central coordinate system. The React component defines the SVG elements with numeric values for dimensions, offsets, and radii. The mouth shape is generated using D3's `d3.arc()` function to create a path with specified inner and outer radii and angular range, and the component is mounted to the DOM using `ReactDOM.render()`.

RRyAlpha
87% match
Loading thumbnail…

Funny Face

A cartoon face rendered as an SVG with React and D3 shows a symmetrical smiley with distinct eyes, pupils, a nose, and a tongue. The face’s head is a gold circle with a brown stroke, while the left eye is pink and the right eye is white, each with differently positioned pupils. The code uses D3’s `arc` generator to create the mouth path, and React components structure each facial feature. All elements are positioned within a single SVG group transformed to the center of a 1000×500 canvas.

AAkrutiKhurana2103
87% match
Loading thumbnail…

smiley face

A smiley face rendered as a yellow circle with black stroke, two solid black eyes, and an arc-shaped mouth. The SVG is built with React components, using D3’s `arc()` generator to construct the mouth path. Dimensions and positions are derived from constants, with the face centered in a 960 by 500 viewport. D3 v7 and React 17 are loaded via UMD scripts, and the visualization uses declarative JSX to define circles and the path element.

Ttknaik
87% match
Loading thumbnail…

Fork of Datavis 2020 Course - Funny Face - Tweek

This example displays a static, stylized face constructed from SVG shapes centered on a yellow circle. The face includes two offset eyes—one rectangular and one circular—and a mouth drawn as an arc path, all with explicit stroke and fill properties. The visualization is built using React for structure and d3.arc to generate the mouth’s path geometry, with all elements rendered inside an SVG canvas. The code uses D3 v7 and React 17, positioning the face through fixed coordinates and transforms.

Hhartjohn
87% match
Loading thumbnail…

Dataviz 2020_Ep8 - 4. Face Part 4 - React Components Basics

This example shows a simple smiley face drawn with SVG shapes, composed of a yellow circle background, two eyes, and a mouth arc, all orchestrated by a React App component that delegates to smaller components. The code uses React and ReactDOM for component rendering, and the D3.js `arc()` API to generate the mouth path. The rendering is static SVG, with the face centered within a 960 by 500 viewport and positioned via a translate transformation.

MMinwoo Pak
87% match
Loading thumbnail…

DataViz

This example shows a single yellow smiley face rendered in SVG, with randomized facial features such as eye position, eye radius, mouth width, and mouth radius. The face is composed of reusable React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) assembled within an SVG container. The code uses React 17 and D3 v7, specifically the `arc` generator from `d3` to draw the mouth path, while `range` from D3 creates an array of one face. Each render produces a uniquely generated face due to random values assigned to its proportions.

JJayesh Yadav
86% match
Loading thumbnail…

Smile Face

A yellow smile face rendered with React and D3 v5, drawn as SVG shapes. The face consists of a circle for the head, two smaller circles for the eyes, and an arc-generated mouth using the `d3.arc` API. The entire face group is rotated 25 degrees, with the mouth’s start and end angles set via math constants. The code uses React to create JSX elements and the `arc` function from D3 to compute the mouth’s path, all styled with inline attributes like fill and stroke.

AAmir
86% match
Loading thumbnail…

smiley

A yellow smiley face rendered in SVG, with black outlined eyes and a curved mouth, is centered against a blank background. The visualization is built with React and D3’s `arc` generator to construct the mouth path, while circles are used for the face and eyes. The component sets explicit pixel dimensions and positions all elements relative to a central group, demonstrating a straightforward mapping of geometric primitives to a familiar icon.

BBVNPK001
86% match