100%

Intro to D3

✓ Published0🌍 Public

Last edited Aug 25, 2020

Created on Aug 24, 2020

This example builds a stylized smiley face entirely with React and SVG, using a full-screen viewport and centralized coordinates. The code defines circle elements for the head, two eyes, and an implied mouth, with properties like `eyeOffsetX`, `eyeRadius`, and `strokeWidth` controlling the layout. Rendered through ReactDOM, the face resizes to the browser window, drawing a yellow circle with a black stroke and two smaller black circles for eyes. The approach demonstrates how to compose SVG shapes programmatically in a React component rather than using D3’s data-binding utilities.

AI-generated description

Intro to D3.js

Date: 2020-08-24
Author: Parker Oakes
DataViz2020

Purpose

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js intro!!

This example creates a cheerful smiley face entirely with SVG shapes inside a React application. The visualization uses D3 version 6 to append a large yellow circle for the face, two smaller black circles for asymmetrical eyes, and a curved path for the mouth. The mouth is generated using D3’s `arc()` function, which constructs an annular sector path. The code explicitly sets SVG attributes like `fill`, `stroke`, and `transform` to position and style each geometric element on a 960 by 500 canvas.

Eevsjg

91% match

Loading thumbnail…

D3 face

This example renders a stylized smiley face using D3.js version 5 within a React framework, drawing an SVG scene onto a 960 by 500 canvas. The code constructs a yellow circular head, black rectangular goggles with handles, and circular eyes using SVG shape elements, while employing the `d3.arc` API to generate the mouth path. Through D3 selections and attribute chaining, it positions groups and elements relative to the SVG’s center, demonstrating a static, hand-coded vector illustration.

Rreddyakshitha

91% match

Loading thumbnail…

React + D3 II , using components

This example shows a smiley face rendered as an SVG using React components for each shape, with D3 generating the mouth path. The face consists of a yellow circle with a black stroke, two eye circles, and an arc created by `d3.arc()`. React manages the SVG elements declaratively, while D3 provides the arc generator with specified inner and outer radii and start/end angles. The code uses React 16 and D3 v5, rendering directly into the DOM via `ReactDOM.render` with static positioning based on fixed dimensions.

NNicolás Troncoso

90% match

Loading thumbnail…

Making a Smiley Face with D3

This example shows how to build a smiley face using React, SVG, and D3. It renders a yellow circle for the face, two smaller circles for the eyes, and a smile created with the `d3.arc` function from the `d3-shape` module. The code uses JSX to define the SVG elements and JavaScript to compute the arc path, with D3’s arc generator handling the start and end angles for the mouth. The face is centered using a translation transform based on computed dimensions.

Jjjacobatandover

90% match

Loading thumbnail…

Smiley Beginner D3

This example displays a simple smiley face composed of SVG shapes: a yellow circle for the head, two small circles for eyes, and a curved arc for the mouth. Built with React and D3 v7, it uses the `arc()` generator to define the mouth’s path with specified inner and outer radii and angles. The head and eyes are drawn with React’s `<circle>` elements, while coordinates are calculated relative to the center of the 960×500 viewport. Rendering occurs via ReactDOM, with D3 loaded alongside React.

ZZoe Ferencova

90% match

Loading thumbnail…

D3.js Starter

This example renders a smiley face in an SVG canvas using D3.js version 5. It draws a yellow circle for the head, two black circles for the eyes, and a semi-circular path for the mouth, all positioned via width and height attributes retrieved from the SVG element. The code uses d3.select to append shapes and d3.arc to generate the mouth path, with styles defined in an external CSS file. It demonstrates basic SVG manipulation and shape generation within a React framework using D3’s selection and arc APIs.

Mmballestiero

90% match

Loading thumbnail…

D3 and React Smiley

This example shows a smiley face composed of SVG shapes, with a yellow circular background, two black eyes, and an arc-shaped mouth. The face is built from reusable React components—BackgroundCircle, Eyes, and Mouth—assembled within a FaceContainer that wraps the SVG and applies a translation to center the graphic. The mouth uses the d3.arc() API to generate an SVG path with specified inner and outer radii and angular extents, while the overall layout is positioned using React props passed from the top-level App component.

GGordon Yang

90% match

Loading thumbnail…

Creating a Smile with D3

This example shows a smiling face built from SVG shapes using D3 version 5 with React. It draws a yellow circle with black strokes for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The code demonstrates D3 selections, attribute manipulation, and the `arc` generator, with positions computed from the SVG dimensions and helpers like `eyeRadius` and `eyeSpacing`.

GGustavo Maciel

90% match