Skip to main content
SimilarExport ZIP
100%

Fork of Clickable Circles from CSV

✓ Published0🌍 Public
KKamil Poprawa
Last edited Sep 19, 2026
Created on Sep 19, 2026

This example displays a scatterplot of colorful circles loaded from a CSV file, with click interaction to highlight a selected node. Written in React, it uses D3’s `selectAll` and `data` join to bind CSV rows to SVG circle elements, mapping `cx`, `cy`, `r`, and `fill` attributes. A React `useState` hook tracks the selected circle’s ID, and clicking a circle triggers a re-render that adds a black stroke to the chosen node. The code imports `csv` from D3 to parse the data and passes it to a reusable `viz` function that updates the visualization.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Clickable Circles from CSV

This example displays a scatterplot of colored circles loaded from a CSV file, where clicking a circle highlights it with a black outline. Built with React and D3 v7, it uses the `csv` function to parse data and the `select` API with a `join` operation to bind circle elements to each data row. The `selectedId` state triggers a re-render, applying the stroke style via a conditional attribute.

CCurran Kelleher
90% match
Loading thumbnail…

Clickable Circles from CSV

This example displays a set of colored circles loaded from a CSV file, each positioned and sized by its own coordinates and radius. Hovering over a circle highlights it with a black stroke, using a React state to track the selected circle's ID. The visualization is rendered with D3 v7's `select` and `csv` APIs, alongside React's `useEffect` and `useState` hooks, with circle attributes and mouse events applied via `selection.join`.

223100098@lums.edu.pk
88% 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
88% 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
88% match
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
86% 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
86% 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
86% match
Loading thumbnail…

Fork of CV: Loading CSV Data

This example demonstrates loading CSV data in a React application and rendering interactive circles in an SVG. It uses d3.csv to fetch data.csv, mapping string values to numbers for the id, x, and y fields. The d3.scaleLinear function scales the x and y coordinates to fit the container’s dimensions, which are tracked via a ResizeObserver. The circles are redrawn with d3’s join method, responding to click events by toggling a selected circle’s fill color between white and black, managed through React state.

AAparna Desi Reddy
85% match