Circles with for loop

100%

Circles with for loop

✓ Published1🌍 Public

Last edited Oct 25, 2018

Created on Sep 21, 2018

Thirty green circles form a single horizontal row across an SVG canvas, each with a radius of 10 pixels and spaced 40 pixels apart. The example demonstrates programmatic data generation using a JavaScript `for` loop that builds an array of x-coordinates, which is then bound to circle elements via D3 v5’s data join (`svg.selectAll('circle').data(data).enter()`). The SVG width is explicitly set to 900 pixels, while the height is 500 pixels, and each circle’s `cx` attribute is computed from the generated data values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with for loop

A green horizontal row of 30 evenly spaced circles is drawn across a light background. The example demonstrates how to generate SVG circle elements using a `for` loop to construct a data array, which is then bound to the visualization through D3's data join. It uses D3 v5 selections and the `.enter()` method to append each circle, setting its `cx` position based on the computed array values and assigning a fixed radius and fill color.

NNita

92% match

Loading thumbnail…

Repeat Array

A row of green circles is rendered on an SVG canvas, evenly spaced from left to right. The example demonstrates how to generate and repeat array data using custom JavaScript functions. The code creates a data array of ten values, each incrementing by 100, and binds it to circle elements via d3’s `selectAll` and `data` methods. Circles are positioned using the `cx` attribute mapped from the data, with a fixed `cy` of 300, and styled with a radius of 10 and green fill.

NNita

83% match

Loading thumbnail…

Circle overlap

Ten concentric circles, colored from black through green, blue, yellow, orange, purple, teal, and green to yellow and finally red, are drawn inside an SVG. The circles expand outward in radius from 20 to 200, with their horizontal positions also set to their radius, creating a diagonal stack. The visualization uses d3.select to append a group, scales it by 1.5, and binds the data array via d3’s data join, setting circle attributes for radius, position, fill, stroke, and stroke width.

NNita

82% match

Loading thumbnail…

JS arrays

Fifteen circles are rendered in a horizontal row across the browser viewport, each with a radius of 20 pixels. The example demonstrates how to bind an array of numbers to SVG elements using D3’s `data()` and `enter()` selection methods. The code uses `d3.select` and `d3.range` to generate the data and append circles to an SVG, with x-positions calculated as `d * 50 + 50` and a fixed y-coordinate of 250. Rendering is done via inline SVG in the HTML document.

Ddexuzi

79% match

Loading thumbnail…

Circles

This visualization demonstrates a simple D3.js approach to creating SVG circles. Using the d3.select and join API, it establishes an SVG canvas that fills its container and renders a single circle with a steelblue fill at a fixed position. The code includes commented-out data arrays containing coordinates, radii, and colors, showing an alternative path for drawing multiple circles from structured data. The example focuses on the fundamental pattern of selecting, appending, and styling SVG elements.

Nnitinramagiri1@gmail.com

79% match

Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it

79% match

Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo

79% match

Loading thumbnail…

Circles with D3

This example displays a scattered arrangement of colorful circles of varying sizes and positions across an SVG canvas. Each circle is rendered with a distinct fill color, creating a visually playful composition. The code defines a static dataset of circle properties and uses D3 v7’s data join pattern with `selectAll`, `data`, and `join('circle')` to bind and append SVG circle elements. Attributes like `cx`, `cy`, `r`, and `fill` are set directly from the data object.

CCurran Kelleher

79% match