Skip to main content
SimilarExport ZIP
100%

Fork of CV: Scatter Plot

✓ Published0🌍 Public
AAddiga Himesh Chander
Last edited Mar 29, 2026
Created on Mar 29, 2026
Forked from CV: Scatter Plot

This scatter plot visualizes the relationship between a startup's age and its active user count, with each circle representing a company from a CSV dataset. Built with React and D3 v7, the visualization uses linear scales derived from data extents to position circles on age and user metrics. Users can click any circle to highlight it, which changes its fill to white with a black stroke. The chart includes labeled axes for company age and active users, with the SVG rendering responsive to container dimensions via a ResizeObserver.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Pseudo Scatter Plot

This example displays five circles at fixed (x, y) coordinates on a full-screen SVG, simulating a scatter plot. The circles are positioned according to a hard-coded dataset with varied y-values that decrease as x increases, creating a diagonal pattern. Built with React and D3 v7, the visualization uses d3-selection to bind data to circle elements and render them with a uniform radius of 30 pixels. The component measures its container’s dimensions and dynamically sets the SVG’s width and height to fill the viewport.

Wwuc280@haw-hamburg.de
78% match
Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a simple scatter plot of age versus salary for four sample data points, using circles positioned by linear scales. It renders to an SVG element with D3 v7 for the data-driven graphics and axes. The code also includes a React component that displays a "Hello D3 & React" message, showing integration between the two. The chart is static, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and margins applied within the 600x400 viewport.

Ppavanireddy03sai@gmail.com
77% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization shows a scatter plot displaying the relationship between signups and revenue across 100 data points from a CSV dataset. The chart uses SVG rendering with D3 v7, featuring a reusable `scatterPlot` function that handles scales, axes, grid lines, and point rendering. The code employs `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization, with a white background, cursive font styling, and blue semi-transparent circles at a fixed radius of 5 pixels.

Kkarthikpavan1198@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
76% match
Loading thumbnail…

Fork of React & D3 Starter

This example presents a reusable React-based scatter plot that visualizes the relationship between song duration and popularity from a CSV dataset. The visualization employs D3.js v7 for data processing, linear scaling, and axis generation, while React 19 manages the component structure. The code uses `d3.csv()` to load data, `d3.scaleLinear()` for coordinate mapping, and `d3.axisBottom()` and `d3.axisLeft()` to render axes. All elements are drawn as SVG circles with a steelblue fill, positioned using `cx` and `cy` attributes derived from the scaled data values.

Mmynedisanjana@gmail.com
75% 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
75% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com
75% 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
75% match