Check

100%

✓ Published1🌍 Public

Last edited Mar 27, 2023

Created on Mar 24, 2023

This example demonstrates a scatterplot with five circles positioned on an SVG canvas, each sized according to a numerical value. The visualization is built using D3 version 7, specifically leveraging `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers. The chart maps data from an inline array of objects with `xVal`, `yVal`, and `rVal` properties to positions and radii. The code uses the declarative scale functions to compute the mapping and appends the resulting circles to the SVG element, with the axes rendered at the left and bottom edges.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis

80% match

Loading thumbnail…

Learn D3 in 5 minutes

This example shows how to create a simple scatterplot-like visualization using D3’s data join pattern. Five circles are bound to an array of numeric values, with each circle’s radius determined by its corresponding data point. The code uses `d3.select`, `.data()`, and `.join()` to bind the array, then applies inline SVG attributes for positioning and CSS styles for fill and stroke colors. Rendering occurs in an SVG element, with D3 v7 loaded via a CDN script tag.

PPremkumar

80% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple scatterplot of circles arranged on a 2D plane, with each circle’s position and size determined by explicit data values. It demonstrates D3’s data join and method chaining to bind an array of circle objects to SVG `<circle>` elements, setting `cx`, `cy`, `r`, and `fill` attributes. The visualization uses D3 v7 with the `select` function and the `.data().join()` pattern for efficient rendering, while the canvas background and opacity styling enhance the overlap effect. Data is embedded directly in the code as a static array, serving as a foundation for later loading external data sources.

RRohithNaiduDevareddy@my.unt.edu

79% match

Loading thumbnail…

Dot & Line Chart Method

This example demonstrates a dot and line chart that plots five data points with varying radii, connecting them with a blue line while rendering each point as a red-stroked white circle. The chart includes linear scales for x and y axes, with axis labels generated via `axisLeft` and `axisBottom`. Built with D3 v7, the visualization uses `scaleLinear`, `extent`, `line`, and `select` to map data values to screen coordinates, drawing SVG paths and circles at full window dimensions. The data is hardcoded as an array of objects with `xVal`, `yVal`, and `rVal` properties.

Fferneyhoughedward@gmail.com

79% match

Loading thumbnail…

Circles with D3

This example shows a set of seven colorful circles scattered across an SVG canvas, each with a distinct size, position, and fill color at 70% opacity. It demonstrates core D3.js v7 concepts including data binding, the General Update Pattern, and method chaining via `select`, `selectAll`, `data`, and `join` to render `circle` elements. The visualization uses static, data-driven coordinates and colors defined in a JavaScript array, rendered through an HTML import map loading D3 from a CDN. The code also showcases the `join` API for creating SVG circles within a container sized to the viewport.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

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

79% match

Loading thumbnail…

Let's make a face

This example shows a minimal scatter of five black circles arranged in a vertical column, rendered as an SVG through D3’s data join pattern. The code sets an SVG canvas with a height of 500 pixels and width of 50, then uses `d3.select('body').append('svg')` and `svg.selectAll('circle').data(dataset).enter().append('circle')` to bind an array of numeric values to circles, all initially placed at fixed coordinates. Although the commented-out block suggests an intended horizontal layout using `attr('cx', function(d, i) { … })` and radius mapping, the active code leaves positions static, producing a simple column of uniform black dots. The example relies on D3 v6, React, and basic SVG attributes like `fill`, `cx`, `cy`, and `r`.

MModalMBS

78% match