Skip to main content
100%

d3.js Scatter test page

✓ Published0🌍 Public
Aannelid
Last edited Dec 14, 2017
Created on Aug 1, 2016

This page demonstrates a simple scatter plot using D3.js v4, visualizing the relationship between category and score for two data types (Alpha and Beta). The data is loaded from a TSV file, cleaned, and augmented with a horizontal jitter to separate overlapping points. The chart includes axes, gridlines, a legend, and interactive tooltips that display category, score, and type on hover. Semi-transparent colored circles are rendered in SVG, with colors assigned by data type via a categorical color scale. The visualization was updated to D3 v4 by annelid, based on 1wheel's original block.

AI-generated description

forked from <a href='http://bl.ocks.org/1wheel/'>1wheel</a>'s block: <a href='http://bl.ocks.org/1wheel/98129315d0f7df3b53e3'>Scatter I</a>

updated to d3.js.v4 by <a href="https://bl.ocks.org/annelid">annelid</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 implementation testing

A scatterplot-style visualization maps four series of quarterly literacy and line-level scores as static steelblue circles, with each circle’s vertical position determined by its Q1 value. The chart uses d3.csv to load the dataset, d3.scaleLinear for both x and y axes, and d3.axisBottom plus d3.axisLeft to render the axes. All circles share a fixed radius of 20 pixels, and the SVG rendering is driven by standard d3 selections and data joins.

Aannelid
76% match
Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6
75% match
Loading thumbnail…

The d3 test

A basic scatterplot maps four pairs of numbers from the `xdata` and `ydata` arrays onto a two-dimensional chart. The visualization uses the D3 v2 library to create linear scales for both axes and draws circular points with a fixed radius and partial opacity. The chart renders axes via `d3.svg.axis()` and updates the points through `g.selectAll("scatter-dots")` in a `redraw()` function, though the code does not invoke this function, so only the axes and empty plotting area are visible on load.

Aavesh1998
74% match
Loading thumbnail…

The d3 test

This example shows a simple scatter plot of four data points, each represented by a steelblue circle, positioned along linear x and y axes. The data is a hardcoded array of coordinate pairs. The visualization is built with D3 v2, using `d3.scale.linear` for the x and y scales, `d3.svg.axis` for the axes, and SVG `circle` elements appended to a group. The chart is sized with margins, and the axes are drawn on the bottom and left of the plot.

Aalexhoke
74% match
Loading thumbnail…

D3 test

A scatterplot of fifty randomly generated data points uses D3.js scales and SVG to map values to x- and y-axes, with circle radius encoding the y-value. A button labeled "Transition" triggers D3 transitions that animate the circles' positions and sizes. The visualization demonstrates transition effects on individual SVG elements, as noted by the author, and includes axes generated with `d3.svg.axis`. The data is random, and the rendering uses SVG with D3 v2.

Aabhishekpolavarapu
73% match
Loading thumbnail…

d3 Test visualization with scatterplot

This d3.v5 scatterplot renders red, semi-transparent circles on a large SVG canvas, with axis labels, tick marks, and a title styled via CSS. The chart uses `d3.axisBottom` and `d3.axisLeft` to generate the axes, and the data is hard-coded in the JavaScript file, plotted via `d3.selectAll` and `d3.attr` for positioning. The visualization emphasizes simplicity, with all marks sharing a uniform color and opacity.

YYoungmoOh
73% match
Loading thumbnail…

D3 Scatterplot (Animations)

This D3 v3 scatterplot displays 15 randomly generated data points on an SVG canvas with linear scales and axes. The visualization highlights animated transitions: clicking the header text regenerates the dataset, updates the x and y scale domains, and smoothly transitions the circles to their new positions using D3’s `.transition()` method. The code uses `d3.svg.axis`, `d3.scale.linear`, and SVG circle elements, with random integer values generated in JavaScript.

WWilliamQLiu
73% match
Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
73% match