Draw scatter plot

100%

Draw scatter plot

✓ Published0🌍 Public

Last edited Jan 20, 2025

Created on Jan 16, 2025

Forked from Blank Slate with Hot Reloading

This React example generates a scatter plot with 50 randomly positioned points, rendered using the Recharts `ScatterChart` with `XAxis`, `YAxis`, and `CartesianGrid`. A button triggers regeneration of the data, while a custom `Tooltip` displays the exact X and Y coordinates on hover. The plot uses random numeric values between 0 and 100 for both axes, with the point count displayed dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Chart

This example demonstrates a scatter chart using Chart.js, with the scatter plot drawn on an HTML canvas element. The chart is configured with `responsive: true` to adapt to its container’s width, which is set to 50% of the page. The code initializes the chart inside `window.onload` by accessing the canvas context via `getContext("2d")` and creating a new `Chart(ctx).Scatter()` instance. A `randomScalingFactor` function generates random integer data points scaled to 100, but the chart is initialized with empty `scatterData`, so no visible points render until data is provided.

Aavesh1998

77% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

EEfratVil

75% match

Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79

75% match

Loading thumbnail…

Psudo Scatter Plot

This example shows a sparse scatter plot with six circular points arranged diagonally across an SVG canvas. Each circle has a fixed radius and distinct x/y coordinates, creating a pseudo-random distribution that resembles a simple data visualization. The visualization is rendered using plain SVG elements—specifically `<circle>` and `<rect>` tags—within an HTML page. It uses React as the underlying framework, though the code is written as static markup without interactive features or data-binding logic. The white background and cleaned-up body styling highlight the simple, minimal approach to displaying categorical or numeric point data.

Ppanthabuddhi@gmail.com

75% match

Loading thumbnail…

Resuable D3 Scatter Plot

This reusable scatter plot component renders a static 2D chart, plotting a set of points against numerical x and y axes using D3.js scales and SVG. The code defines a single point dataset and draws circles with a default radius and fill color, while displaying axis labels and tick marks via d3.axisBottom and d3.axisLeft. The chart is built as a configurable function, allowing users to pass custom data, margins, and dimensions for reuse. The accompanying HTML file is minimal, showing only a placeholder message, and does not include any interactive or animated behaviors.

UUzoemeka Okechukwu Innocent

75% match

Loading thumbnail…

SVG

This example renders a static scatterplot of 100 points with randomized positions and radii. Each point’s x and y coordinates are generated using `d3.randomNormal` with a mean of 0.5 and standard deviation of 0.15, clamped between 0 and 1, then mapped to pixel positions. The radius of each circle also comes from `d3.randomNormal`, with a minimum enforced at 3 pixels. The code imports D3 version 7.9.0 and uses a simple SVG-based rendering approach within a React application, though the visualization itself does not involve any interactive or animated behavior.

DDevZeonec

73% match

Loading thumbnail…

Untitled

This example shows how to render an interactive scatter plot of random data points using React. It uses the `react-kapsule` library to integrate the Three.js scene graph with React components, where each point is a Three.js `Mesh` object. The code loads data from a JSON file via a `useEffect` hook and updates the positions of the points with `d3.forceSimulation` to create a gentle clustering effect. The visualization also includes basic orbit controls for rotating the 3D scene.

NNita

73% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

73% match