Skip to main content
SimilarExport ZIP
100%

Demo-1

✓ Published0🌍 Public
NNita
Last edited Jun 16, 2025
Created on Jun 16, 2025

A playful D3.js and React visualization presents 10 interactive circles and 8 interactive squares in rainbow colors, with pulsing, bouncing, rotating, flip, and spin animations. Clicking a shape selects it, dimming unselected shapes. It loads letter and count data from a CSV file using d3.csv. The title text animates with a stroke-dash drawing effect and rainbow color cycle, while d3.scaleLinear, d3.scaleSequential, and d3.interpolateRainbow handle sizing and coloring.

AI-generated description

Rainbow Shapes Visualization

A vibrant visualization displaying 10 interactive circles and 8 interactive squares created with D3.js and React.

The circles feature rainbow colors and animations, including pulsing, rotating, and bouncing effects. The circles have different sizes and can be selected by clicking on them.

The squares also feature rainbow colors with flip and spin animations. They can be independently selected by clicking on them.

The title also features a rainbow animation with a drawing effect.

MIT Licensed

Similar vizzes

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
80% match
Loading thumbnail…

96% Zeiterpannis

A D3.js and React visualization renders five circles loaded from a CSV file, scaling their positions to fit the viewport with `d3.scaleLinear`. Clicking a circle turns it red with a thicker border while others remain cyan. The code uses React hooks for state management and D3’s data join for interactive updates.

Uudjeffrey.jay@gmail.com
80% match
Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay
79% match
Loading thumbnail…

D3 Selection Exploration

A dynamic collection of circles animates in real time, with positions, radii, and colors shifting continuously. The visualization demonstrates React and D3 version 7 selection methods, using `select` and `join` to bind and update SVG circle elements to arrays of data objects generated by a custom `makeData` function. An interval drives the animation at roughly 60 frames per second, incrementing a time variable that modulates sine waves controlling each circle's vertical position, radius, and RGB color values. The example showcases how D3's data joins efficiently handle live updates to the DOM.

Ccharlieronchetti@gmail.com
79% match
Loading thumbnail…

Displaying d3 data with React

This example displays the CSS named colors as a circular donut chart, with each color occupying a slice of the ring. It loads the color data from a CSV file using d3.csv, then renders each slice as an SVG path element created with d3.arc. React manages the component state and rendering, using useState and useEffect to fetch the data asynchronously and map it to the chart. The visualization highlights the integration of d3’s data-loading and shape-generation APIs with React’s declarative component-based UI.

MMyTrueName
79% match
Loading thumbnail…

Show&Tell

This example displays six semi-transparent circles in varying sizes and colors on a pale green background. Using React and D3, the `select` and `join` methods bind an array of position, radius, and fill data to SVG circle elements. The visualization demonstrates a straightforward scatterplot-like rendering where each circle’s attributes are set directly from the data, with opacity fixed at 708/1000. No interactive or animated behaviors are included.

AAga Domanska
79% match
Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca
79% match
Loading thumbnail…

Circles with D3 and React

This example renders a scatterplot of 14 colored circles on an SVG canvas using React and D3. Each circle’s position, radius, and color come from static data defined in a separate JavaScript module. The visualization integrates React’s `useRef` and `useEffect` hooks with D3’s `select` method to bind data and create circle elements via `join`. The D3 v7 code applies `attr` setters for cx, cy, r, and fill properties.

CCurran Kelleher
79% match