Goed voorbeeld

100%

Goed voorbeeld

✓ Published0🌍 Public

Last edited Feb 8, 2018

Created on Feb 8, 2018

A clustered dot plot arranges 50 circles around a central point, with each circle's distance from the center determined by how its randomly generated count differs from a selected circle's count. Clicking any circle increments its count and causes it to move to the center while all other circles reposition based on the new distance metric. The visualization uses d3.scaleSqrt for sizing, d3.scaleLinear for both radial distance and color mapping from steelblue to red, and transitions with an 800-millisecond duration to animate the repositioning. An SVG container with concentric gray guide rings provides a static backdrop for the interactive data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau

77% match

Loading thumbnail…

d3-cluster

The example demonstrates d3-cluster, a layout that groups overlapping circles into clusters and highlights the merged boundaries. After rendering 500 randomly positioned circles with varied radii and colors, the code applies the cluster layout, which sorts points by size and detects overlaps to assign each circle to a cluster. The resulting visualization overlays new circles with a distinct orange stroke, where the stroke width reflects the number of overlapping points in each cluster. The implementation uses custom d3-cluster APIs like `.x()`, `.y()`, and `.radius()`, built with d3-scale, while the initial rendering relies on d3 selections and SVG circle elements.

PPhilippe Rivière

77% match

Loading thumbnail…

Intro D3 Workshop

Fifty red circles radiate from the center of an SVG canvas, each sized by a random count value and positioned by distance from a clicked circle. Clicking a circle increments its count and re-renders the layout, animating all circles to new positions via `transition()` over 800 milliseconds. The example uses D3 v4 scales (`d3.scaleSqrt`, `d3.scaleLinear`) to map counts to circle radius and color, with a color gradient from steelblue to red based on proximity to the clicked circle. A gray ring backdrop and trigonometric positioning complete the interactive workshop demo.

GGJHazelaar

77% match

Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323

77% match

Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis

77% match

Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca

77% match

Loading thumbnail…

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

NNita

77% match

Loading thumbnail…

Clustered Force Layout III

This example shows a clustered force layout where 200 circles are grouped into 10 color-coded clusters, with node sizes varying by cluster. D3’s force layout initializes nodes near their cluster’s center on a circular path, then applies custom cluster and collision forces during each tick to converge on a stable arrangement. An entry transition uses `transition.attrTween` to grow circle radii from zero, delaying collision detection to reduce jitter. The visualization is rendered as animated SVG using D3 v3, with data generated randomly via `Math.random` and `d3.scale.category10` for colors.

Mmbostock

77% match