simple scatterplot

100%

simple scatterplot

✓ Published0🌍 Public

Last edited Feb 16, 2018

Created on Feb 16, 2018

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.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9bc9c1c2174570aa6e0b002639d24a53'>simple scatterplot</a>

mit Licensed

Similar vizzes

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

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

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

83% match

Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

83% match

Loading thumbnail…

ScatterPlot

This scatterplot uses D3 to display a set of points on an SVG canvas, with axes drawn via a linear scale. The code defines explicit margins and dimensions, then appends an SVG group to position the plot area. Each data point is rendered as a circle, though the dataset itself is not included in the visible code. The visualization focuses on showing the distribution of values across the x and y coordinates, with no additional encoding beyond position. The implementation relies on D3’s selection and scale APIs, following a standard margin-based layout pattern.

BBerengerCunillera

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

82% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

81% match