Fork of Fork of Fork of Hello VizHub : Making circles 1

100%

Fork of Fork of Fork of Hello VizHub : Making circles 1

✓ Published0🌍 Public

Last edited Sep 16, 2021

Created on Sep 16, 2021

Forked from Fork of Fork of Hello VizHub : Making circles 1

This example displays 150 randomly generated circles scattered across an SVG canvas. The code uses D3 v5 APIs such as `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values to positions and colors. Each circle’s radius, x-coordinate, and y-coordinate are derived from the random data multiplied by additional random factors. The circles are rendered with semi-transparent fills and strokes using RGB strings, demonstrating basic data binding and SVG element creation.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello VizHub : Making circles 1

This example displays a scattered field of semi-transparent, randomly colored circles over a dark background, with each circle’s position and radius derived from random numbers. The visualization uses D3 v5 to generate the SVG elements, employing `scaleLinear` for the x and y axes, `scaleOrdinal` with `schemeCategory10` for potential color mapping, and manually computed `rgb()` strings for fill and stroke. The code also includes a large embedded SVG path, though it is not rendered in the visible output.

NNita

92% match

Loading thumbnail…

Fork of Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path-1

This example displays a generative abstract composition of overlapping, semi-transparent circles scattered across a black SVG canvas. The circles have random radii, positions, and stroke colors ranging in green and blue hues, creating a dense, layered visual texture. The code generates an array of 990 coordinate pairs using a loop that applies random scaling factors, then binds this data to circle elements. It relies on D3 v7’s selection and data join methods, with attributes set directly via `.attr()` calls, including fill, stroke-width, and stroke color derived from random RGB values.

NNita

85% match

Loading thumbnail…

Fork of Hello VizHub

A single static circle is rendered in the center of an SVG canvas, sized at 480, 250, with a radius of 250. The visualization uses D3 v5 to select the root SVG element and append a circle shape, setting its position and size through chained `attr` calls. The SVG canvas is fixed at 960 by 500 pixels, and the page includes minimal CSS to remove body margins and hide overflow. The example demonstrates basic SVG manipulation with D3, printing the canvas width to the console.

AAbhi1410-lab

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

83% match

Loading thumbnail…

Fork of teaching 3

This example generates 250 circles with randomized positions, sizes, and colors. The JavaScript code creates a D3 SVG visualization with a linear scale mapping data to coordinates. A glowing, hand-drawn path is also rendered. The visualization uses D3 v5 via UNPKG and imports functions like `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` from the `d3` module. The SVG output is rendered with animation support, and the Dancing Script font styles the page.

CCurran Kelleher

83% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and arrange multiple colored circles on an SVG canvas using D3.js. It shows a data-driven approach where each circle’s position, size, and color are defined in a JavaScript array. The code uses D3’s `select`, `selectAll`, and `join` methods to bind data to circle elements, then sets attributes like `cx`, `cy`, `r`, and `fill` via method chaining. The visualization highlights D3’s general update pattern and hot-reloading workflow, with a light green background and semi-transparent circles for overlap effects.

RRohithNaiduDevareddy@my.unt.edu

83% match

Loading thumbnail…

Fork of Fork of Circles with D3

This example renders a set of seven semi-transparent, solid-colored circles positioned across an SVG canvas. The data is a hardcoded array of circle properties, including x, y, radius, and fill color, which the code binds to SVG circle elements using D3’s data join. The visualization is created with d3.select and d3.selectAll, while the fixed coordinates and radii produce a static, abstract composition. The code sets the SVG background to a light ivory and uses a concise, data-driven approach to generate the shapes.

Eeschuman20@gmail.com

83% match

Loading thumbnail…

Fork of Circles with D3

This visualization displays a collection of colored circles scattered across a light background, each positioned with distinct coordinates and radii. The code uses D3.js version 7.8.5 to bind an array of data objects to SVG circle elements, setting their `cx`, `cy`, `r`, and `fill` attributes while applying a 70.8% opacity. The example demonstrates basic data joins with `selectAll` and `join`, showcasing how static positional and stylistic properties map directly from data. The rendering approach relies on SVG within a responsive container, with no animation or interaction, highlighting a simple, static scatter-like composition.

Vvishal R

83% match