Skip to main content
100%

simple scatterplot

✓ Published0🌍 Public
Aaaronmunoz
Last edited Feb 16, 2018
Created on Feb 16, 2018

This example shows a simple scatterplot of seven data points, each defined by an x and y coordinate, plotted on a 960-by-500 SVG canvas. The code uses D3 v4 to append an SVG element to the body, but it does not yet render the circles or axes, leaving the visualization incomplete. The data is hardcoded as an array of objects, and the rendering approach relies on SVG, with the page layout fixed via CSS. The example demonstrates the initial setup for a scatterplot using D3’s selection and attribute methods.

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

simple scatterplot

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.

YYCCZhao
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
94% 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
92% match
Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points with x-values ranging from 14 to 39 and y-values from 22 to 61. The visualization uses D3 v4 to create an SVG canvas sized at 960 by 500 pixels, appending it directly to the body element. The data is hardcoded as an array of JavaScript objects, but the code does not yet include scales, axes, or circle elements for rendering the points.

Aandrewdblevins
91% 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
90% 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
84% match