D3 with React first steps

100%

D3 with React first steps

✓ Published0🌍 Public

Last edited Sep 22, 2020

Created on Sep 22, 2020

Two React-based face visualizations showcase the integration of D3 with React's declarative component model, where faces are constructed from reusable SVG components like `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses D3's `arc` API to generate a path, while a separate globe visualization employs `d3.geoOrthographic` projection with `d3.geoPath` and `d3.json` to render world map data from a remote JSON source, featuring interactive drag and zoom capabilities.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Intro with React

A simple SVG face rendered through React demonstrates how React’s declarative component model can be used to draw D3-like visualizations. Using React and ReactDOM, the code declaratively defines three circles—a yellow face with a black stroke and two black eyes—positioned via hardcoded coordinates and inline style attributes for stroke width. The SVG output is static, with no data or interaction; it illustrates the basic integration of React’s JSX syntax with SVG primitives to produce vector graphics.

MMark Odayan

87% match

Loading thumbnail…

D3

A smiling face built from modular React components draws on D3 for one curved path. BackgroundCircle, Eyes, and Mouth each render SVG primitives, with Mouth using D3's arc generator to create a smile between computed angles. The example demonstrates splitting UI elements into separate ES6 files while composing them with React fragments. D3 v5, React 16.9, and ReactDOM render the static scene at 960 by 500 pixels.

MMarcusABR

86% match

Loading thumbnail…

D3 intro

This example renders a smiling face using D3 v5 and React, with SVG elements including circles, rectangles, and paths. The face is centered on the screen, and the eyebrows animate upward and downward using chained `transition()` calls with a two-second duration each. The code leverages D3’s `select`, `arc`, and `line` APIs to construct the mouth and nose shapes, while static SVG attributes define the eyes and overall composition. The visualization demonstrates basic SVG drawing and animation within a React framework.

CChris Mora

86% match

Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

SShasvathan Pathmanaban

86% match

Loading thumbnail…

Face with D3 js

This example uses D3.js to draw a simple, static face composed of SVG shapes, including a head, eyes, and mouth, within a 960x400 viewport. The code selects an existing SVG element and appends circles and paths using D3's data-binding and shape-generator APIs, such as `d3.arc` for the mouth. The visualization demonstrates basic SVG manipulation with D3 v5, though it does not include interactive or animated behavior.

Aadmk840

85% match

Loading thumbnail…

d3 intro

This example displays a yellow and red SVG face built with React and D3. It constructs a circle for the head, two offset circles for eyes, and a mouth path generated using the `d3.arc()` API with specified inner and outer radii and start/end angles. React renders the SVG elements, while D3 handles the arc geometry for the mouth.

Mmarrue15

85% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a grid of cartoon faces, each with randomly sized eyes, rendered as SVG in a React application. It demonstrates the use of D3 v6’s `arc` generator to construct the smiling mouth path, while React components compose the face from reusable parts like background circles and eye pairs. The data is generated with `d3.range`, and each face is positioned by a centered `<g>` transform. The rendering approach combines D3’s geometry utilities with React’s declarative SVG elements.

XXinya Gao

85% match

Loading thumbnail…

Simley D3 and React Part V

This example shows a smiling face built from primitive SVG shapes, composed of a yellow background circle, two black eyes, and a curved mouth. It demonstrates how D3 and React can be combined to create declarative, reusable components. The visualization uses React’s component model to structure the code, with `BackgroundCircle`, `Eyes`, and `Mouth` as separate functions. D3’s `arc` API generates the mouth’s path, while SVG’s `<g>` element translates all components to the canvas center. The rendering is static, with no interaction or data source beyond hardcoded dimensions.

Bbakstorage00001

85% match