100%

Fork of Circles with D3

✓ Published0🌍 Public

Last edited Feb 4, 2024

Created on Feb 4, 2024

This example uses D3 to draw a set of colored, semi-transparent circles on a light green background. The visualization is generated from a hard-coded array of data points, each specifying the circle's x and y coordinates, radius, and fill color. The Svelte-based code employs d3’s `select` function to manage the SVG container and repeatedly updates the circles using the `.join` pattern, setting attributes like `cx`, `cy`, `r`, `fill`, and `opacity` directly from the data.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

Svelte

Here's a video on how to get started with Svelte as well!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

This example shows a playful array of six semi-transparent, brightly colored circles scattered across a pale green background. The visualization uses D3.js (version 7) to bind static data points—each specifying x and y coordinates, a radius, and a fill color—to SVG circle elements. The code leverages the `select` and `join` pattern to create the circles, setting their attributes directly from the bound data. The rendered result is a simple, colorful scatter-plot-like composition, demonstrating basic data binding and SVG manipulation with D3 in a Svelte environment.

Mmuslih_k_diy

95% match

Loading thumbnail…

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.

NNita

94% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to draw a set of six colorful circles on a light green SVG canvas, each with a distinct position, radius, and fill color. The rendered circles are semi-transparent, creating subtle overlaps. Built with Svelte, the code imports `select` from d3 and leverages a data array to bind circles to the SVG, setting attributes like `cx`, `cy`, `r`, `fill`, and `opacity`. The visualization demonstrates a basic data-join workflow with D3 in a Svelte component.

RRashmi Ranjan Sahani

94% match

Loading thumbnail…

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.

NNita

94% match

Loading thumbnail…

Fork of Circles with D3

This example displays six semi-transparent circles with varied colors and sizes positioned across a light green background. Built with Svelte and D3, it uses `d3.select` to create an SVG canvas and binds an array of circle objects containing x, y, radius, and fill properties. The `join('circle')` pattern renders the shapes with specified coordinates and dimensions, while the opacity attribute applies a fixed transparency. The code serves as a simple base for creative modifications, such as holiday-themed variations.

Rrpal28384@gmail.com

93% match

Loading thumbnail…

Fork of Circles with D3

A fork of the “Circles with D3” example, built with Svelte, renders a static set of six colored circles of varying radii and positions on a light green background. Each circle is drawn as an SVG `<circle>` element using D3’s `select` and data join, with hard-coded coordinates, fills, and a uniform opacity of 0.708. The visualization emphasizes minimal composition over interaction, demonstrating D3’s core selection and binding pattern within a Svelte component’s lifecycle.

Ssophie.pichler@ufficina.de

93% match

Loading thumbnail…

Fork of Circles with D3

Colorful translucent circles of varying sizes and positions float over a soft green background. Built with Svelte and D3, the visualization uses d3-selection to bind an array of six circle data objects to SVG circle elements. Each circle’s x, y, radius, and fill color are set directly from the data, with a fixed opacity of 0.708. The simple, static composition highlights how data-driven attributes can be efficiently mapped to visual properties in a Svelte component.

Aavicfai@126.com

93% match

Loading thumbnail…

Fork of Circles with D3

This example displays six semi-transparent circles of varying sizes and colors scattered across a pale green background. The circles are drawn using D3’s data join pattern within a Svelte component. The code imports `select` from D3, sets the SVG dimensions to match the container, and binds an array of position, radius, and fill values to each circle. Rendering is handled reactively when the container’s size changes, with opacity fixed at 0.708.

Rrichard.adamson@hotmail.com

93% match