Refactoring Circles

100%

Refactoring Circles

✓ Published1🌍 Public

Last edited Jul 8, 2022

Created on Jul 8, 2022

A large green circle fills the viewport, surrounded by four smaller blue circles positioned at its cardinal points, each with yellow strokes. A thin black arc curves inside the green circle, adding a subtle geometric accent. The visualization is rendered as SVG through React components, using D3’s `arc()` generator to define the curved path. All elements are drawn in a static, non-interactive layout, with dimensions computed from the browser window size.

AI-generated description

Testing my ability to work with JS, D3 and create circling circle.

Begin by creating the template in svg/html
Transfer them to JS using react framework

MIT Licensed

Similar vizzes

Loading thumbnail…

Circling Circles

A static SVG scene shows a large green circle, centered on a white background, whose thick black outline is punctuated by four smaller blue circles positioned at the cardinal points. Each small circle has its own yellow stroke, and the arrangement suggests a minimalist orbital motif. Built with React, the markup is generated via JSX, while D3 v5 is imported for its `select` API, though the visualization itself relies purely on SVG circle elements and window dimensions for sizing.

KKamalabot

89% match

Loading thumbnail…

Managing Complexity Circles

This example shows a large green circle with a thick black outline, surrounded by four smaller blue circles with yellow outlines positioned at the cardinal points. A thin black arc is rendered inside the central circle. Built with React and D3.js v5, it uses the `arc` API to define the arc’s geometry and SVG elements for rendering, demonstrating a simple layered composition of shapes.

KKamalabot

86% match

Loading thumbnail…

Circles with D3 and React

The visualization displays fourteen circles of varying radii and colors positioned across a 960-by-500 SVG canvas, with each circle’s center, size, and fill defined by a static array of objects. Built with React 19 and D3 v7, the app uses a `useRef` hook to select the SVG element and applies a D3 `select` and `.join` operation to bind the data array to circle elements. The code sets each circle’s `cx`, `cy`, `r`, and `fill` attributes directly from the data source, showing a straightforward declarative mapping of data to SVG shapes.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a static SVG scene of a large yellow circle with a black outline and two smaller black-bordered circles positioned inside it, resembling a face. The visualization is built using React 18 and D3 v7, rendering all shapes through an SVG component in a `react-dom` root. The code defines circles with explicit `r`, `cx`, `cy`, `fill`, and `stroke` attributes, while the page layout uses an embedded stylesheet to remove margins and hide overflow. The example serves as a creative foundation, inviting modifications like thematic styling for holidays.

Aaltugbozyaka@gmail.com

82% match

Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita

81% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example displays three static circles on an SVG canvas: a large yellow circle with a black stroke representing a face, and two smaller black circles as eyes. The visualization uses React 18 and D3.js 7.8.5, explicitly importing the D3 library and logging it to the console. The SVG is rendered with fixed dimensions of 960 by 500 pixels, and the circles are positioned using explicit `cx`, `cy`, and `r` attributes. The code demonstrates a simple declarative approach to SVG drawing within a React component structure.

Nnaveenkumar.m@kpriet.ac.in

81% match

Loading thumbnail…

Circle

The visualization shows a single large yellow circle with a thick black stroke, centered on a 960-by-500 SVG canvas. Rendered via React, it uses the `Circle` component to return an SVG `<circle>` element with fixed `cx`, `cy`, and `r` attributes. The code leverages React 17 and ReactDOM to mount the SVG into the DOM, with the circle’s fill and stroke properties defined directly in JSX. No data source is involved; the geometry is purely hardcoded.

33ssalunke

81% match

Loading thumbnail…

Compact circles within the Bigger Circle

A large circle outlines a plotting area, while numerous smaller, semi-transparent circles are randomly scattered within its bounds. The visualization uses React to render SVG elements, with coordinates generated by nested loops and conditional checks to keep points inside the main circle. Fill colors vary dynamically based on x and y positions, creating a colorful, clustered effect.

NNita

81% match