Dataviz 1 - Face (React components + ES6)

100%

Dataviz 1 - Face (React components + ES6)

✓ Published1🌍 Public

Last edited Nov 19, 2021

Created on Nov 18, 2021

Forked from Dataviz 1 - Face (React + D3)

This example renders a simple cartoon face using React components and ES6 syntax, combining SVG circles and a d3 arc path. It shows a yellow circular head with black stroke, two offset eyes, and a curved mouth spanning the lower half. The code imports `arc` from `d3` to generate the mouth path, while React manages the component structure and rendering into the DOM via `ReactDOM.render`. D3 v7 and React 17 are loaded from CDN, with all face dimensions defined as constants.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 1 - Face Practice (React + D3)

This example builds a stylized face using React and D3 v7, rendered as SVG. It shows a static composition of a yellow circle for the head, two black circles for eyes, and arcs for a mouth and moustache, all positioned with SVG transforms. The code uses `d3.arc()` to define the mouth and moustache paths with specific inner/outer radii and angle ranges. React 17 renders the SVG elements, while D3 provides the arc generator, with all dimensions and offsets hard-coded.

RRyAlpha

94% match

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

93% match

Loading thumbnail…

Dataviz 1 - Face (Multiple files + ES6 Modules)

This gallery example renders a yellow, black-outlined face built from SVG primitives—a circle for the head, a pair of circles for eyes, and an arc-based mouth. It uses React components (Face.js, Eyes.js, Mouth.js) to compose the figure, with the mouth’s curved path generated by D3’s `arc` API. The example demonstrates how multiple ES6 modules and React’s `Fragment` and `transform` attributes can be combined to structure a simple visualization.

RRyAlpha

92% match

Loading thumbnail…

Dataviz 1 - Face (React)

A simple face composed of three SVG circles rendered with React. The yellow head and two black eyes are drawn using React's JSX syntax within an SVG element, with dimensions defined as constants. It uses React 17 and ReactDOM to mount the component into the DOM, demonstrating basic React rendering of static SVG shapes without external data or interactivity.

RRyAlpha

92% match

Loading thumbnail…

Dataviz 2020_Ep7 - 3. Face with React AND D3 (Add a mouth): Arc, Group

A yellow circular face with two black eyes and a curved mouth is drawn using SVG, rendered through React. The code combines React components with D3's `arc` generator to create the mouth, while circles define the face and eyes. The face uses a yellow fill, black stroke, and the mouth is positioned using an arc path. The example demonstrates integrating D3 shape generation with React's declarative rendering, using `react-dom` to mount the SVG into the DOM.

MMinwoo Pak

89% 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

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to construct a simple cartoon face using D3.js v6 within a React framework, rendered as SVG shapes. It draws a yellow circular head with black eyes and a smiling mouth using the `d3.select` and `d3.arc` APIs. The code reads the SVG’s width and height attributes, positions the face elements relative to the center, and uses an arc generator to create the mouth path. The visualization demonstrates basic shape manipulation and layout without any external data source, relying purely on hardcoded constants for spacing.

Ffc248017

88% match

Loading thumbnail…

Dataviz 2020_Ep9 - 5. Face Part 5 - Modularize with ES6 Modules

This example shows a modularized face composed of a yellow background circle, two eyes, and an arc-shaped mouth, all rendered as SVG within a React component. The code imports React and ReactDOM, along with three separate ES6 module components—BackGroundCircle, Eyes, and Mouth—to structure the visualization. The Mouth component uses d3.arc to generate a path, while fixed dimensions and offsets position the facial features symmetrically around the center of a 960×500 viewport.

MMinwoo Pak

88% match