Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
MMinwoo Pak
Last edited May 31, 2021
Created on Apr 16, 2021

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.

AI-generated description

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

Refactoring so that App Component orchestrate other React Components instead of directly creating virtual DOMs

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

See also React Starter.

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
92% match
Loading thumbnail…

Face Part IV

A React component renders a smiley face as SVG, composed of a yellow circular background, two black eyes, and a curved mouth path. The code imports the `arc` function from D3 v5 to generate the mouth’s arc shape with specified inner and outer radii and angles. Static dimensions and positions are defined as constants, and the component structure uses JSX within ReactDOM’s render call. The example demonstrates integrating D3 geometry utilities with React’s declarative component model, with no interactive behavior or data binding present.

Kkripton-it
91% 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
90% match
Loading thumbnail…

Smiley Face Part IV (React Components & ES6)

This example shows a yellow smiley face built from SVG primitives, with yellow circular background, two black eyes, and a curved mouth. It demonstrates how to combine React components with D3’s arc generator for the mouth path. The code uses React and ReactDOM for rendering, D3’s `arc()` method for path data, and ES6 features like arrow functions, destructuring, and template literals. The face is centered on a 960×500 canvas, with eyes offset by fixed pixel values and the mouth drawn as an arc between specified angles.

IIlgar Akalın
90% 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
90% match
Loading thumbnail…

Face part IV, React components

A smiling face built from SVG shapes renders in React, using d3.arc to generate the mouth path and custom React components for the background circle, eyes, and mouth. The code imports React, ReactDOM, and d3’s arc function, applies CSS filters and a linear gradient via SVG defs, and positions elements with transforms. The face is drawn with yellow and red gradients, black strokes, and dropshadows, demonstrating modular component reuse and d3 integration within a React rendering pipeline.

Ggjonor
89% match
Loading thumbnail…

Let's Make a Face Part IV (React Components & ES6)

A yellow smiley face is drawn as an SVG, with a filled circle for the head, two small circles for the eyes, and an arc for the mouth. The face is built using React components, with the background circle and mouth path defined as separate reusable elements. The mouth is generated using the D3 `arc` function, while the SVG is rendered by ReactDOM. All values are computed from constants for width, height, and offsets, reflecting a component-based approach to structuring the visualization.

JJadeJOy
89% match
Loading thumbnail…

Let's Make a Face Part IV (React Components & ES6)

This example shows a yellow smiley face built from SVG primitives—a background circle, two eye circles, and a mouth arc—centered on a 960-by-500 canvas. The face is composed entirely of React components, with the `BackgroundCircle` defined as a reusable component and the `App` component rendering the full SVG. The mouth’s crescent shape is generated using D3’s `arc` generator, which supplies the `d` path data. The code imports React, ReactDOM, and D3’s `arc`, and renders the result into a `#root` div, demonstrating how to combine React’s component model with D3’s geometric utilities for declarative, ES6-based visualization.

NNikhil Reddy Manda
89% match