Assignment 5

100%

✓ Published0🌍 Public

Last edited Oct 1, 2026

Created on Oct 1, 2026

This example shows five circles positioned by x/y coordinates from a small CSV dataset, with black fill by default and white fill with a thick black stroke for the currently selected circle. The React app loads data via d3.csv, tracks selection state, and resizes the SVG through a ResizeObserver in a custom hook. Rendering uses D3 v7 selections with scaleLinear to map coordinates to container dimensions, and click handlers trigger the selection callback.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows five circles positioned on a responsive full-screen SVG, with data loaded from a CSV file containing id and x/y coordinates. Clicking a circle toggles its fill from black to white, adding a black outline to indicate selection. The React app uses a custom hook with ResizeObserver to track container dimensions, then passes d3-selection and d3-scaleLinear to render circles with scaled positions. D3’s csv function parses the data, and the circle selection is managed through React state, triggering re-renders via useEffect.

AAparna Desi Reddy

87% match

Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows five circles positioned according to x and y coordinates loaded from a local CSV file. Clicking a circle highlights it by changing its fill to white with a black stroke. The React app uses a custom hook with ResizeObserver to track container dimensions, then renders the visualization with D3 v7's selection and scaleLinear APIs. Data loading uses d3.csv to fetch and parse numeric values, and circle interactions update React state to trigger re-renders.

DDurga Prasad MEDISETTI

87% match

Loading thumbnail…

HAW test 5.12

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.

Wwdn616@haw-hamburg.de

84% match

Loading thumbnail…

CV: Loading CSV Data

This example demonstrates how to load and visualize data from a CSV file using React and D3 v7. It renders five circles positioned according to x and y coordinates read from `data.csv`, with interactive click-to-select behavior that highlights the chosen circle. A custom `useContainerDimensions` hook tracks the container size using `ResizeObserver`, while D3's `csv` function parses the data and `scaleLinear` maps data coordinates to screen space. The `join` method efficiently handles circle creation, updating, and removal in the SVG rendering.

CCurran Kelleher

83% match

Loading thumbnail…

Fork of CV: Loading CSV Data

Five circles read from a CSV file form a static scatter plot over a responsive full-viewport container. Clicking a circle toggles its selection state, highlighting it with a white fill and black stroke. The React app loads the data with `d3.csv`, manages container dimensions using a `ResizeObserver` hook, and renders the SVG circles via `d3.select` and `d3.scaleLinear`.

GGuntupalli Mohan kalyan

82% match

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

82% 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

82% match

Loading thumbnail…

Fork of CV: Loading CSV Data

This example demonstrates an interactive scatter plot of five data points loaded from a CSV file, rendered as circles scaled to the container size. Clicking a circle selects it, turning its fill from black to white with a black stroke. The code uses React with hooks for state management and container dimensions, while D3 v7 handles CSV parsing via `d3.csv` and SVG rendering through `select`, `join`, and `scaleLinear` for positional mapping.

DDurga Prasad MEDISETTI

81% match