Skip to main content
SimilarExport ZIP
100%

Scatter Chart

✓ Published1🌍 Public
Aavesh1998
Last edited Jun 3, 2020
Created on Jun 3, 2020
Forked from The d3 test

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
78% match
Loading thumbnail…

Draw scatter plot

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.

Aadam.hsaine@gmail.com
77% 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
76% match
Loading thumbnail…

Scatterplot

A scatterplot displays 12 black circles at varying positions across an SVG canvas, suggesting a simple distribution of data points without axes or labels. The visualization uses static SVG circle elements rendered within an HTML page, with coordinates and radii defined directly in the markup. CSS styles center the container and remove page margins. The implementation relies on plain JavaScript-free HTML, utilizing inline SVG properties rather than a framework or data-generation library.

CClaudio Puggioni
75% match
Loading thumbnail…

Making a Scatter Plot

This example shows a minimal scatter plot built with D3 v6 in a React framework, rendering to SVG. It demonstrates how to create a basic chart from scratch using the D3 library, with data points positioned via the `d3.scalePoint` or `d3.scaleLinear` scale. The code includes a simple `index.html` page that loads D3 and a bundled JavaScript file, which uses D3 selections to append circles to the SVG element. The visualization is intentionally bare-bones, focusing on the core mechanics of setting up scales and shapes, with styling provided by an external CSS file.

Eegrebing
75% match
Loading thumbnail…

Learning Scatter Plot on D3

This example demonstrates a minimal scatter plot setup using D3 within a React framework. The page displays a simple HTML message with large centered text, along with a basic CSS styling. The code initializes an SVG-less visualization, focusing on the foundational structure for future D3 scatter plot development. It does not yet render actual data points, instead serving as a starting template that references the D3 v3 library and React integration patterns. The implementation uses plain HTML and CSS, with the message element serving as a placeholder for the forthcoming chart.

UUzoemeka Okechukwu Innocent
75% match
Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma
75% match
Loading thumbnail…

Scatter Plot

This example creates an empty scatter plot using D3.js v4, setting up a fixed SVG canvas with defined margins and dimensions. The code establishes a scalable vector graphics (SVG) container and applies a translation transform to position a group element within the plot area. The visualization does not include any data points or axes, focusing solely on the foundational layout structure. It uses D3’s selection and attribute methods to configure the SVG’s width, height, and transform, preparing the coordinate system for future data binding. The data source is not specified in the visible code, and no rendering beyond the empty scaffold is demonstrated.

BBerengerCunillera
75% match