datasetviz

100%

✓ Published0🌍 Public

Last edited Jun 10, 2018

Created on Jun 10, 2018

This example visualizes a small dataset of nine x,y coordinates as a scatterplot, showing the distribution and relative spacing of points in a two-dimensional plane. The code uses D3.js, specifically `d3.scalePoint` to map the input values to pixel positions, and appends SVG circles for each data point. The data originates from a gistfile1.txt, parsed inline by the script. The rendering approach is straightforward, with fixed axes omitted and a plain SVG container, making the raw coordinate relationships the focus of the view.

AI-generated description

Similar vizzes

Loading thumbnail…

datasetviz

This example shows a small scatterplot of nine 2D points from a gist, mapping each x/y coordinate to a circle’s position. It uses D3’s `d3.forceSimulation` to gently nudge the circles into a stable layout, with the original data values drawn as faint gray dots behind the moving nodes. The visualization highlights how a force-directed simulation can reorganize raw coordinates into a readable cluster, while preserving the dataset’s numeric origins. Rendering relies on SVG circles and D3’s update/enter/exit pattern to bind the data.

Aalvarorueda89

89% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

80% match

Loading thumbnail…

D3 Scatterplot

This example visualizes a scatterplot of eight x-y coordinate pairs, with each point labeled by its numeric coordinates. It demonstrates how to map data values to screen positions using linear scales. The visualization is built with D3.js v3 and renders to SVG. It uses `d3.scale.linear` to create the x and y scales, `d3.svg.axis` to add axes, and binds data to circles and text elements for points and labels. The code defines axes with a bottom orientation and left orientation, and applies CSS styling for the axis lines and text.

GGerardoFurtado

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

79% match

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera

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

78% match

Loading thumbnail…

simple scatterplot

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.

Aaaronmunoz

78% match

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

77% match