Skip to main content
SimilarExport ZIP
100%

Dataviz 1 - Face (Multiple files + ES6 Modules)

✓ Published0🌍 Public
RRyAlpha
Last edited Nov 19, 2021
Created on Nov 19, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 1 - Face (React components + ES6)

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.

RRyAlpha
92% match
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
91% 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…

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

Make a Face Part 5 - Multiple Files with ES6 Modules

This example draws a simple face composed of three SVG elements: a yellow background circle, two black eyes, and a mouth arc. The component uses React for JSX-based rendering and d3’s `arc` generator to define the mouth’s path. Hard-coded constants control dimensions and spacing, with all shapes centered via a group transform. The visualization demonstrates combining React components with ES6 modules and d3.v7 for static SVG composition.

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

Dataviz 2020_Ep6 - 2. Face Part 2 (React Basic Setup)

A stylized face is drawn using two SVG circles for eyes and one larger circle for the head, all rendered in yellow with a black outline. The visualization uses React with ReactDOM to render the SVG elements, and the code defines constants for positioning attributes like center coordinates, offset distances, and radii. The face is centered on a 960 by 500 canvas, with the head's radius calculated from the canvas height and stroke width. This example demonstrates a basic React setup for creating simple geometric data visualizations.

MMinwoo Pak
87% match