Fork of CV: Pseudo Scatter Plot

100%

Fork of CV: Pseudo Scatter Plot

✓ Published0🌍 Public

Last edited Jan 27, 2026

Created on Jan 27, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

CV: Pseudo Scatter Plot

This visualization shows how a set of five data points can be drawn as circles on a scatter plot using predefined x and y coordinates and a fixed radius of 30 pixels. The React component App uses a ref to access its container’s dimensions, which are passed to a viz function that sets the SVG’s width and height. The core rendering is handled by D3’s selection API via select and the join method, where each circle’s cx and cy attributes are bound to the data values. The data source is a static JavaScript array, and the chart uses no scales or axes; instead, the coordinates are used directly.

CCurran Kelleher

88% match

Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This pseudoscatter plot places six static circles on a fixed full-screen SVG, using hardcoded x/y coordinates from a separate data module. The example demonstrates a minimal D3 v7 setup with an import map, a reusable visualization function, and chained selections. `setupSVG` creates the SVG element via `select` and `join`, while `renderCircles` binds the data array and appends circles with `attr` for positioning and a fixed radius of 34 pixels. The visualization shows how data-driven rendering works without axes, scales, or interactivity.

BBismark Kofi Owusu Sarfo

84% match

Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows how to load and visualize a small CSV dataset as interactive circles in an SVG. The chart displays five data points positioned by their x and y coordinates, with clickable circles that highlight the selected point. Built with React and D3 v7, the App component uses d3.csv to parse the data, scales it with d3.scaleLinear, and renders the visualization through d3.select and selection.join. A custom useContainerDimensions hook tracks the container size via ResizeObserver, enabling responsive scaling of the fixed-domain coordinates.

Uudjeffrey.jay@gmail.com

84% match

Loading thumbnail…

Fork of Pseudo Scatter Plot

This is a static visualization of six circles arranged in a scatter plot pattern on a white background. Each circle is rendered as a distinct SVG element with fixed coordinates and a radius of 34.5 units. The example uses plain HTML, CSS, and inline SVG to construct the chart, with no JavaScript or external libraries involved. The plot offers a simple, minimal demonstration of how SVG shapes can be positioned manually to create a data-like layout.

AAbhinash Mallick

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

83% match

Loading thumbnail…

Fork of CV: Loading CSV Data

DDurga Prasad MEDISETTI

83% match

Loading thumbnail…

Fork of Pseudo Scatter Plot

This example demonstrates the fundamental building blocks of SVG graphics, presenting seven black circles arranged at scattered coordinates across a white rectangular canvas. The visualization showcases basic vector shape creation using the SVG `<svg>`, `<rect>`, and `<circle>` elements directly inline in an HTML page. Each circle is positioned using explicit `cx` and `cy` attributes with a uniform `r` value of 50 pixels. The code relies purely on static SVG markup without any JavaScript libraries, frameworks, or external styling, providing a minimal illustration of how geometric primitives compose a simple graphical composition.

Jjinjuta.s.au@gmail.com

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

82% match