The d3 test

100%

✓ Published0🌍 Public

Last edited Mar 13, 2018

Created on Mar 13, 2018

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.

AI-generated description

forked from <a href='http://bl.ocks.org/bunkat/'>bunkat</a>'s block: <a href='http://bl.ocks.org/bunkat/2595950'>Simple Scatter Chart Example</a>

mit Licensed

Similar vizzes

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

86% match

Loading thumbnail…

d3 circles

This example displays a scatterplot of 50 randomly generated data points, each positioned by x and y coordinates on linear scales. The circles transition from teal to black with varying radii based on the y-value. Clicking the prompt above the chart generates new data points, triggering animated transitions that update circle positions, radii, and the axes using d3.axisBottom and d3.axisLeft. The visualization uses d3.v4 with SVG rendering, including a clipPath to contain the circles within the chart area.

Aadammak137

81% match

Loading thumbnail…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Ssaipaidipalli

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

80% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

80% match

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

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

79% match

Loading thumbnail…

Scatter Plot with d3.js

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

Aakshayvenishetty1437

79% match