Skip to main content
SimilarExport ZIP
100%

Dataviz 1 - Face Practice (React + D3)

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

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.

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

D3 Viz 1

This interactive face built with React and D3.js v7 renders a yellow circular head with black stroke outline, two eyes, and an arc-based mouth using SVG. The visualization uses D3’s `arc` generator from the `d3` module to construct the mouth path, while custom React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) organize the SVG elements. The code defines parameters like `eyeOffsetX`, `mouthRadius`, and `strokewidth` to control the face’s geometry, all within a fixed 960×500 viewport.

JJohn H
89% 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
88% 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
88% match