Fork of Fork of Hello VizHub : Making circles 1

100%

Fork of Fork of Hello VizHub : Making circles 1

✓ Published4🌍 Public

Last edited Mar 18, 2023

Created on Jan 2, 2021

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.

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 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.

Iiamsrihari28

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

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

84% match

Loading thumbnail…

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

This visualization generates 12,000 random data points and renders them as both a smooth, colored path using D3’s line generator with a basis curve, and as small circles at each coordinate. Built with D3 v7, the SVG displays the synthetic dataset on a black background, with semi-transparent strokes and fills assigned via random RGB values. The path is drawn first, followed by the circles, which overlay the line to highlight the distribution of the raw data points. The code demonstrates D3’s `d3.line()` API and data join for dynamic SVG element creation.

NNita

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

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

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 Fork of Circles with D3

This example demonstrates how to create a scatterplot-style visualization of circles using D3.js, with each circle positioned by explicit x and y coordinates and colored with distinct fills. The code uses D3’s `select` function and method chaining to bind an array of data objects to SVG elements, dynamically setting each circle’s center, radius, and fill via `.attr()` callbacks. A semi-transparent opacity is applied to all circles, and the visualization resizes to fit its container, drawing from static, hard-coded data.

LLI, CHENG-TSE

82% match