Multiple SVGs with Functio/n

Multiple SVGs

Three stacked SVG panels show parallel animated sequences of circles moving horizontally across colored backgrounds. Each SVG contains ten circles driven by an array of numeric values, with one panel displaying a static blue dot alongside an expanding green-outlined circle, while the other two panels animate yellow and red outlines using D3 v5 transitions. The example demonstrates creating multiple independent SVG containers via d3.select and append, applying staggered transition.attr calls with a two-second duration to position circles at calculated coordinates.

78% match

Circles with for loop

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.

76% match

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.

75% match

practice 1 - Circle around circle

This example displays a set of concentric circles centered on a fixed point, each filled with a different color and outlined in black. A small red circle is appended separately within the same SVG group. The visualization is built using D3 v5’s `select` and `append` methods to create SVG circles, with positions and radii driven by an array of JavaScript objects. The colored circles are stacked using `data.reverse()` to layer them from largest to smallest.

Fork of Circles with D3

This example displays six semi-transparent circles of varying sizes, colors, and positions on a light green background. It uses the Svelte framework and the d3.select and d3.join API to create and manage the SVG circle elements. The circle data is defined as an array of objects with x, y, r, and fill properties, and rendering also occurs through a forEach loop that appends circles directly to the SVG container.

D3: Drawing SVGs

This example demonstrates how to create basic SVG shapes with D3.js by rendering five circles of increasing radius. The code uses D3’s data join pattern, calling `selectAll`, `data`, `enter`, and `append` to bind an array of five numbers to circle elements. Each circle’s x-position is calculated from its index, its radius from the bound data value, and its fill, stroke, and stroke-width are set accordingly. The static SVG is 500 pixels wide and 50 pixels tall, with all circles vertically centered.

MMarisa Tania

Fork of Circles with D3

This visualization displays six semi-transparent circles of varying sizes, positions, and bright colors against a pale green background. It uses the D3.js library's select, selectAll, and join methods to efficiently bind and render the circle elements within an SVG container, sizing the visualization to fit the available space. The circles are drawn based on hard-coded data containing x and y coordinates, radius, and fill color, with a fixed opacity value applied to all shapes. The example serves as a template for creating and styling simple geometric compositions using D3's data-driven document manipulation.

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.