play1

100%

✓ Published0🌍 Public

Last edited Aug 26, 2021

Created on Aug 26, 2021

This example renders a stylized geometric composition in SVG, featuring a top arc and several intersecting black lines that suggest a three-dimensional form. The arc is generated using the `arc` function from D3, with its radius and width passed as props to a separate React component. The SVG is composed within a React app, using fragments to structure the code, while the design is hardcoded with specific coordinates rather than data-driven.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

84% match

Loading thumbnail…

D3_

This example renders a single SVG arc using React and D3. The page displays a heading and a small 100x100 pixel SVG containing a path generated by `d3.arc()` with fixed inner and outer radii, plus start and end angles. The arc is drawn via the `d3.arc()` function’s output, which is assigned to the `d` attribute of an SVG path element. The code uses React 17 and D3 v7, with the visualization embedded directly in a JSX component and rendered through `ReactDOM.render`. The data is hardcoded in the arc parameters.

Kkhenghuatlim

83% match

Loading thumbnail…

React Starter

This React Starter example renders a single, static SVG arc using the D3 `arc` generator to define its geometry. The `arc()` function constructs path data with an inner radius of 90, an outer radius of 100, and a starting angle of π/2, ending at 3π/2, producing a half-circle shape. The SVG is drawn inside a React component, which is rendered to the page via `ReactDOM.render`. The example demonstrates how to integrate D3’s path-generation utilities with React’s component model, though the resulting visualization is minimal, showing only the geometric path without any interactive or data-driven behavior.

RRui Tong

82% match

Loading thumbnail…

Untitled

This example displays a single arc shape as an SVG path, rendered in a teal fill with a black stroke. The arc is generated using D3.js’s `d3.arc()` API, which specifies inner and outer radii alongside start and end angles in radians, positioned via an SVG transform. The visualization is embedded in a minimal HTML page that loads D3 v4 and React, with the path drawn directly into an SVG container.

GGal Thelander

80% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple geometric composition rendered as SVG, featuring a large circle flanked by two smaller circles and a curved arc shape. The drawing is built with React components and the D3 `arc` function, which generates the path for the crescent-like form. All shapes are positioned within an SVG canvas using fixed coordinates and transformations, with the arc defined by inner and outer radii and specific start and end angles. The code demonstrates how React and D3 can be combined to create static vector graphics.

Bbrian13th

80% match

Loading thumbnail…

D3-React

This example demonstrates a minimal integration of D3 and React for SVG rendering. The code uses React to create a static SVG canvas containing a red circle with a black stroke, centered at 400 by 400 pixels. It specifically imports the `arc` function from D3 v6 via `d3.arc`, though the arc is not rendered in the final output. The visualization relies on React’s `render` method to mount the component into the `#root` div, with data defined as fixed constants for dimensions and styling.

MMark Porter

79% match

Loading thumbnail…

data vis 1

This example displays a single large yellow circle with a black outline and a separate circular arc path rendered below it, creating a simple two-shape composition. The visualization uses React to define the SVG structure, while D3’s `arc` generator computes the path for the second shape with specified inner and outer radii and a full 360-degree angle. The code imports the `arc` function directly from D3 and logs the generated path data to the console, demonstrating how D3’s shape generators integrate with React’s declarative JSX rendering.

Ffusionmind

79% match

Loading thumbnail…

Fork of React Starter

This example shows a minimal React application rendering a single SVG visualization: a yellow circle positioned inside an arc segment, centered on a 860×500 canvas. It demonstrates how to integrate D3’s `arc` generator with React’s JSX syntax, computing the arc path from static start and end angles. The code uses React 18’s `createRoot` for rendering and imports D3 v7’s `arc` API directly. The visualization is purely illustrative, with no external data source, and highlights the basic pattern of combining D3 shape generators with React components for SVG output.

TTrio-

79% match