Fork of Data Visualization with D3 - Smiley Part II

Fork of Smiley Face Part 1

This is a React-based SVG visualization that draws a smiley face using D3.js and ReactDOM. The face consists of a yellow circle with a black stroke, two eyes, and a mouth arc created using the D3 arc generator with specified inner and outer radii and angle ranges. The SVG elements are positioned using the centerX and centerY coordinates, with eye offset values and a mouth radius defined as constants. The example demonstrates how D3's arc API can be integrated with React for geometric shape rendering.

Bbhavani44

Fork of Fork of Data Visualization with D3 - Smiley Part IV

This example shows a stylized smiley face composed of green SVG shapes on a white background, centered within a 960×500 viewport. The face includes two eyes, a semi-circular mouth, and yellow cheek rectangles, all rendered using D3’s `arc` generator for the mouth path and React components for each facial feature. The code uses React 17 and D3 v7, applying SVG primitives like `circle`, `rect`, and `path` within a grouped `g` element translated to the center. Positioning relies on fixed offsets for the eyes and cheeks, while the mouth arc is defined by inner and outer radii and start/end angles.

AAurore Paligot

Fork of Smiley Face Part II

This example demonstrates a classic smiley face rendered with React and D3, using SVG elements to form the face’s yellow circular head, black outline, and two eye circles. The visualization adapts dynamically to the browser’s window size, centering the face and scaling its radius based on the viewport height. React manages the component structure, while D3’s `arc` module is imported but not used in the visible code. Instead, the face is drawn with plain SVG `circle` elements, with positions and dimensions calculated from fixed offsets for the eyes and center coordinates.

EEmerson Castillo

Fork of Smiley Face Part 2

A smiley face rendered with SVG circles in React, using D3 v7 for the chart dimensions and styling. The code draws a yellow face with two eyes via hardcoded coordinates relative to the center width and height. ReactDOM renders the SVG to a root div, with no data source or interaction—purely static geometric shapes.

KKazyManazy

Fork of Smiley Face Part 3

This React and D3 visualization renders a smiley face as an SVG, built from a yellow background circle with a black stroke, two smaller circles for eyes, and a curved mouth path. The mouth is generated using D3’s `arc` API, which defines an annular sector with specified inner and outer radii and angular start and end points. The code explicitly sets the canvas dimensions, positions elements via a centered transform, and uses ReactDOM to render the SVG into the page. The static composition illustrates coordinate placement and D3’s geometric path generation within a React component.

Hhukbk

Fork of Smiley Face Part II

A React and D3 v7 component renders a smiling face as an SVG graphic, composed of a yellow background circle, two black eyes, and a curved mouth. The face is drawn using reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth generated by the `d3.arc()` API. The SVG is centered within a 960×500 viewport, with all coordinates and dimensions defined as constants. The example demonstrates how to combine React’s component model with D3’s shape generators for declarative, data-driven visualization.

BBugGreen

Fork of Fork of Fork of Data Visualization with D3 - Smiley Part V

This example shows a stylized smiley face rendered as an SVG, with a green circular face, yellow rectangular cheeks, green eyes, and a green mouth formed by an arc. The face is composed from reusable React components, including `BackgroundCircle`, `Eyes`, `Cheeks`, and `Mouth`. Positioning relies on D3’s `arc` API to generate the mouth path, while all shapes are centered via an SVG `<g>` transform. The visualization uses React 17 and D3 v7, with static, hard-coded dimensions.

AAurore Paligot

Fork of Smiley Face Part II

This example renders a full-screen yellow smiley face using React and D3. The face is composed of SVG elements, including a background circle, two eye circles, and a mouth arc, all positioned relative to the window center. The code uses D3’s `arc` function to create the mouth path with specified inner and outer radii and start/end angles. React components manage the SVG structure, while D3 v7 provides the geometric calculations. The visualization demonstrates a component-based approach to building a simple chart-like graphic.

AAoibhinnRed