Skip to main content
SimilarExport ZIP
100%

DataViz D3 - Smiley Face Part II (React.js)

✓ Published0🌍 Public
Jjinjuta.s.au@gmail.com
Last edited Mar 10, 2024
Created on Mar 10, 2024

This example uses React.js to render a static smiley face visualization in SVG, building on the “Smiley Face” series. It shows a yellow circle with a thick black stroke for the face, accompanied by two dark eye circles positioned symmetrically around the center. The code explicitly uses React 16.9 production builds via unpkg, and renders the shapes through JSX-style SVG elements (`<circle>`). The rendering approach is purely declarative, with no data source or interactivity, relying on hardcoded coordinates for the face and eyes to demonstrate React’s component-based DOM updates.

AI-generated description

A bare minimum HTML page.

Half way towards a smiley face with HTML and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization with D3, JS, React

This example presents a static SVG drawing of a smiley face as a data visualization, using basic geometric shapes rendered through inline SVG markup. The visualization shows a yellow circle with two smaller black circles for eyes and a partial yellow arc for the mouth, all positioned within a defined viewport. The code relies on React 18.2.0 loaded via a UMD script and logs the React object to the console, while the SVG elements are defined directly in the HTML file rather than generated programmatically. The rendering approach is purely SVG-based, with no D3 or JavaScript animation logic present.

GGanesh Aguru
91% match
Loading thumbnail…

DataViz D3

This example renders a simple smiley face using React and D3 within an SVG canvas. It shows a yellow circle head with two black eyes and an open mouth outlined as an arc. The visualization uses D3’s `arc()` generator to compute the mouth path, with static coordinates for the eyes and face. React manages the component structure, while D3 v5 provides the shape-drawing API, all displayed through SVG elements in a fixed 960×540 viewport.

Kkdaily16
91% match
Loading thumbnail…

Fork of Data Visualization with D3 - Smiley Part II

A React component renders a static smiley face using SVG circles. It shows a large yellow circle with a red stroke for the face, and two smaller red circles positioned symmetrically for the eyes, all centered within a 960 by 500 viewport. The code uses ReactDOM to mount the component into the HTML root, with all dimensions and offsets defined as JavaScript constants. The example demonstrates basic SVG shape composition and layout within React, without any interactive or data-driven behavior.

AAurore Paligot
91% match
Loading thumbnail…

Smiley Face Part II

A smiley face built with React and D3 is rendered as an SVG graphic. The visualization shows a yellow circle face with two black eyes and a curved mouth, all centered on a 960 by 500 pixel canvas. The code uses D3's `arc()` generator to create the mouth path and React to manage the SVG elements, including the `circle` shapes and the `path` for the mouth. The face is drawn using a static set of coordinates and dimensions defined in the React component.

Aaishwarya8615
90% match
Loading thumbnail…

Smiley Face Part I

This example uses React to render a simple smiley face as a static SVG graphic. It displays a yellow circle with a black stroke for the head, plus two smaller filled circles positioned symmetrically as eyes. The code draws shapes using D3’s `arc` import, though only SVG circle elements are used. The face is centered on a 960x500 canvas, with eye offsets and radii defined mathematically. React 17 and D3 v7 are loaded via UMD bundles.

PPatrick Asante Owusu
90% match
Loading thumbnail…

Smiley Face with JS and React

This example renders a classic smiley face as a React component, using SVG for display. It builds the face from primitive shapes: a yellow circle for the head, black-stroked eyes, and a mouth drawn with the D3 `arc` generator. The D3 arc creates a semicircular path by specifying inner and outer radii, a stroke width, and start/end angles, while React manages the SVG elements and JSX markup. The visualization demonstrates a minimal integration of D3’s geometry utilities with React’s declarative rendering in a static, non-interactive diagram.

SSreynit Khatt
90% match
Loading thumbnail…

Smiley part II - React

A yellow smiley face is rendered as an SVG circle with two black eye circles, centered in a 960x500 viewport. Built with React and D3 v7, the visualization uses the React `render` method to create the SVG elements, with circle positions and radii defined by constants like `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The code draws a static face with a yellow fill, black stroke, and no mouth or other features.

MMushraf Altaf
90% match
Loading thumbnail…

Smiley Face Part II

This example renders a smiley face in SVG using React components alongside D3’s `arc` generator for the mouth. The face consists of a yellow circle with a black stroke, two static eye circles, and a curved mouth path positioned via a centered `<g>` transform. The code builds the visualization declaratively in React, leveraging D3 v5’s `arc()` to compute the mouth’s path, while hardcoded dimensions and offsets define the layout. It demonstrates a hybrid approach where React manages the DOM structure and D3 supplies geometric calculations.

PPhilippe Rigovanov
90% match