0504_d3실습

100%

✓ Published0🌍 Public

Last edited May 4, 2021

Created on May 4, 2021

This example creates a static smiley face using SVG shapes, rendered through a plain React component in the bundled visualization. The code draws three circles directly in the SVG markup: a large yellow circle for the face, two smaller black circles for the eyes, and a yellow nose with a black stroke. The rendering uses inline SVG elements without D3.js functions or data-driven joins, relying solely on hardcoded coordinates and styling attributes. The page, defined in index.html, loads JavaScript to display the composition on a 900x400 canvas.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Smily face part I

This example renders a simple static smiley face using React and D3 v5, drawing SVG circles directly in the HTML. The face consists of a large yellow circle for the head and two smaller black circles for eyes, with no mouth or other features. The code uses plain SVG elements with hardcoded coordinates and attributes, bypassing D3's data-driven utilities. React is imported but only logs to the console, while the visual output relies entirely on static markup. The sketch includes a comment hinting at future eye-offset calculations, but no interactive or animated behavior is present.

HHao2020560

91% match

Loading thumbnail…

D3 Tutorial

This example shows a static smiley face made of three SVG circles on a yellow background, drawn inside an HTML page that loads React 18.2. The visualization uses plain SVG elements—a large yellow circle with a black stroke and two smaller black circles for eyes—hardcoded in the markup. The code includes a minimal JavaScript entry point that logs a message, while the README references a React starter template for extending the setup.

AAbrisG

91% match

Loading thumbnail…

Smiley face Part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes, rendered on a 960 by 500 canvas. The drawing is implemented directly in the index.html markup using basic SVG elements, including circle tags with explicit coordinates and stroke attributes. Although the page loads React and ReactDOM libraries, the code does not utilize them for the visualization itself; the bundled JavaScript is minimal. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

FFlore

90% match

Loading thumbnail…

Hello HTML

This example renders a simple smiley face in SVG using React and D3. The face is composed of a yellow background circle, two black eye circles, and a mouth path generated with the `arc()` function from D3. The code uses React to create the SVG elements and computes coordinates with static variables, such as `eyeOffsetX` and `eyeOffsetY`. The mouth arc is drawn with an inner and outer radius, starting and ending angles defining a half-circle shape. The visualization shows basic composition and DOM manipulation with React 17 and D3 v7.

Cchun0330

90% match

Loading thumbnail…

smiley face pt1

This example draws a simple smiley face using SVG shapes in a React application. A large yellow circle forms the head, with two smaller black circles for eyes, all positioned using explicit center coordinates and offsets. The code also defines a `mouthArc` using `d3.arc()` but does not render it in the final output. The visualization is rendered with D3 v7 for the arc generator and React 18 for the DOM structure, with the entire face centered on a fixed 960x500 canvas.

Sshre1310

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

This example draws a smiley face as an SVG graphic, combining React components with D3.js to generate the shapes. The face is centered with yellow circular eyes, red pupils, orange eyebrow-like lines, and a blue head. The code uses D3’s `arc` API to form the mouth and eye arcs, and relies on React’s `ReactDOM.render` to display the static composition, with positions and sizes defined as constants.

Cchakritha06

90% match

Loading thumbnail…

Smile Part 1

This example draws a static smiley face using raw SVG shapes within a React application. The code renders three circles—a large yellow face with a black stroke, and two smaller black eyes—directly in the JSX markup of the HTML file. It uses React and ReactDOM from CDN links, with D3 loaded but not actively used for any data or simulation. The visualization follows a margin convention through a custom `VizContainer` component, which abstracts the SVG group structure and can display margins via a `showMargins` prop.

Ssamsangraula

89% match