simple scatterplot

100%

simple scatterplot

✓ Published0🌍 Public

Last edited Feb 16, 2018

Created on Feb 16, 2018

This example displays seven data points as a simple scatterplot, with x and y values plotted against a blank SVG canvas. The visualization is built using D3 v4, where the code appends an SVG element to the body with a fixed width and height, though it does not render any circles or axes for the points. The raw data is stored as an array of JavaScript objects, and the script prepares the SVG container but leaves the actual plotting incomplete. The source is a gist by YCCZhao, forked from an earlier block, using the d3 library with an SVG rendering approach.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/andrewdblevins/'>andrewdblevins</a>'s block: <a href='http://bl.ocks.org/andrewdblevins/6af5dfd19ac090e3f2305e5b01035c4c'>simple scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

simple scatterplot

This example shows a simple scatterplot of seven data points, each defined by x and y coordinates on a fixed 960-by-500 SVG canvas. The visualization uses D3 v4 to create the SVG container and relies on the `d3.select` and `attr` methods to set its dimensions. The data is hardcoded as an array of JavaScript objects, and while the code preps the SVG, it does not yet plot any circles or axes, leaving the points unrendered. The body is styled with zero margins to make the chart full-width.

SScarlettHui

95% match

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points on an SVG canvas, with each point positioned according to its x and y coordinates from a hard-coded JavaScript array. The visualization uses D3 v4 to append an SVG element to the body and set its dimensions to 960 by 500 pixels. While the code initializes the scatterplot structure and data, the point-rendering logic is incomplete, leaving the circles unplotted and the chart unfinished.

SSkyBTW

93% match

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points from a small hard-coded array, each with x and y coordinates. The visualization is created using D3 v4, rendering to an SVG element that is appended to the page body. The code begins selecting the body and appending an SVG canvas of 960 by 500 pixels, then attempts to map the data array to circle elements, though the example only shows the initial setup without completing the circle rendering.

DDJURK

90% match

Loading thumbnail…

simple scatterplot

This simple scatterplot displays seven data points on a Cartesian grid, with x-values ranging from 0 to 50 and y-values from 0 to 70. The visualization uses D3 v4’s `d3.scaleLinear` to map data coordinates to pixel positions, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are appended to an SVG canvas, with their radius and fill color varying per index. The data is hardcoded as an array of objects, and the axes are positioned using SVG `transform` attributes.

VVishwacorp

90% match

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points with x-values between 14 and 39 and y-values between 22 and 61. The visualization uses D3 v4 to create SVG circles, with linear scales mapping the data domain to screen coordinates. The code defines x and y scales, generates axes with d3.axisBottom and d3.axisLeft, and appends circles with radii and fill colors that vary by index. The data is hardcoded as an array of objects, and the chart renders within an SVG canvas sized 960 by 500 pixels.

VVickyLouise

89% match

Loading thumbnail…

D3 Scatterplot

This D3.js v3 scatterplot displays eight data points as circles on an SVG canvas, with each point labeled by its raw coordinate values. The visualization maps the first and second values of each array to the x- and y-axes using linear scales with padding and nice rounding. Axes are generated with the `d3.svg.axis` API, positioned on the bottom and left. The data is embedded directly in the code as an array of coordinate pairs, and the circles use the `cx` and `cy` attributes for placement.

WWilliamQLiu

83% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

83% match

Loading thumbnail…

Pseudo Scatter Plot with D3

This example shows a minimal scatter plot of six static data points, each rendered as a circle with a 34-pixel radius on a full-screen SVG canvas. It uses D3 v7’s join pattern: `selectAll('svg').data([null]).join('svg')` creates the canvas, while `selectAll('circle').data(data).join('circle')` binds the coordinates. The visualization adapts responsively to the browser window via a fixed-position container, and the data comes from a static JavaScript array in `data.js`.

CCurran Kelleher

82% match