Skip to main content
SimilarExport ZIP
100%

HAW test 5.12

✓ Published1🌍 Public
Wwdn616@haw-hamburg.de
Last edited Dec 5, 2025
Created on Dec 5, 2025

Five circles, positioned proportionally from a CSV file, are plotted on a responsive SVG canvas. Clicking a circle changes its fill to white with a black stroke while others remain solid black. Built with React and d3.v7, the visualization uses `scaleLinear` to map x and y coordinates from data space to the container's pixel dimensions, dynamically resizing via a `ResizeObserver`. The `join` API efficiently updates circle attributes and click handlers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Test44

Five circles sit at fixed coordinates on an SVG canvas, each with a radius of 30 pixels. The visualization uses D3 v7’s selection and data join methods to bind the array of x/y points to circle elements, setting their positions via the `cx` and `cy` attributes. The React app measures its container dimensions and passes them, along with the static dataset, to a custom `viz` function that updates the SVG. The rendering relies on D3’s `select` and `join` APIs within a React component.

Mmch@prison.ch
85% match
Loading thumbnail…

CV: Responsive Clickable Circles

This example shows a set of five circles arranged diagonally across a responsive SVG canvas. Clicking any circle toggles its state, changing its fill from black to white and adding a thick black outline. The visualization uses React state to track the selected circle and D3 v7 scales to map fixed data coordinates to the container’s dynamic width and height. A ResizeObserver hook measures the container, triggering a re-render of the circles via D3’s select and join pattern.

CCurran Kelleher
83% match
Loading thumbnail…

#HAW Benny Test Pixar

This example renders five fixed circles positioned by hard-coded x and y coordinates. The visualization uses d3.v7's selection and join operations within a React 19 application, drawing SVG circles with a radius of 30. The circles are placed at arbitrary points without connecting lines or animation, and the code relies on the `selectAll` and `join` APIs to manage the SVG elements.

Wwua439@haw-hamburg.de
83% match
Loading thumbnail…

Fork of HAW test 5.12

This interactive scatterplot displays five data points from a CSV file, connected by a line to reveal a downward trend. Clicking a square point highlights it with a white fill and bold black stroke. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, a D3 line generator for the path, and `ResizeObserver` to make the SVG responsive. The `selectAll('rect').join('rect')` pattern renders the clickable points with custom colors.

MMatthias Stahl
82% 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
82% match
Loading thumbnail…

Fork of CV: Clickable Circles

This example shows a set of five circles arranged diagonally across an SVG canvas. Clicking a circle toggles its fill to white with a black stroke, while all others remain black, using React state to track the selected circle’s ID. The visualization is rendered with D3 v7, where select and join manage circle elements, and the click handler updates React state via a callback.

Jjustinenns@hotmail.com
81% match
Loading thumbnail…

CV: Clickable Circles

A React application renders five black circles positioned along a downward curve using D3.js. Clicking any circle turns it white with a black outline, visually indicating selection through a state-managed callback. The visualization leverages D3's `select` and `join` operations within an SVG container, with circle coordinates and styling defined directly in the data array and rendered through `renderCircles`. The selected state is tracked in React and re-applied on each interaction.

CCurran Kelleher
80% 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