merge

100%

✓ Published0🌍 Public

Last edited Nov 11, 2022

Created on May 15, 2021

Forked from zkusebna

A set of colored circles displays the relative values of financial assets such as EUR, BTC, and GOLD loaded from data.csv. Each circle’s radius encodes its value, while its fill color is assigned using a d3.scaleOrdinal with a range generated by d3.quantize and d3.interpolateYlOrRd. The example demonstrates the d3 .merge() method, combining enter and update selections so that all circles are repositioned to a common x-coordinate after initial rendering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Merge Sites

This example simulates the merging of 300 randomly generated circles based on their size and proximity. It shows how smaller circles are absorbed into larger, overlapping ones, with the resulting combined circle repositioning to reflect the merged mass. The animation progresses in discrete steps, with circles fading out as they are subsumed, until only the largest remain. The code uses d3.v4's selection and transition APIs to animate SVG circle attributes, with the merge logic implemented as a custom iterative function.

PPhilippe Rivière

72% match

Loading thumbnail…

D3 Selections (with lines)

This example demonstrates the difference between D3's `join` and `merge` operations by animating a dynamic set of circles and vertical lines. As the data count shifts with a sine wave, the `d3.select` API's `join` method incrementally updates the SVG elements, seamlessly adding or removing nodes. Circles are positioned and sized based on generated data, with a `d3.scaleLinear` color mapping from white to green applied to both the circle strokes and the lines descending from each circle to the chart's bottom. The animation runs at roughly 60 frames per second using `setInterval`.

AAndrea Mignone

71% match

Loading thumbnail…

Fork of D3 functions

This example shows how D3’s data join handles dynamic updates to a scatterplot of five circles. Buttons trigger removal or modification of data points, with exiting circles turning red while new and updated circles render in steel blue. The code uses D3 v5’s `select`, `scaleLinear`, and `merge` to bind array data to SVG circles. Updates call the `update` function, which handles enter, update, and exit selections, while random coordinates come from a custom `rand` helper.

BBomkerss

71% match

Loading thumbnail…

Merge Sites, One Move

Three hundred translucent blue circles, each with a random position and weight, collapse into larger circles through an iterative merge process. The animation shows weighted circles absorbing smaller overlapping neighbors, moving the center of mass as weights combine, until only non-overlapping circles remain. Built with d3.v4, the SVG circles transition their radius, position, and opacity over two seconds using `transition()`. The merge logic is custom JavaScript, repeatedly scanning for overlapping circles and combining their weights in a single pass, with absorbed circles fading out and being removed.

PPhilippe Rivière

70% match

Loading thumbnail…

D3 functions

This example demonstrates D3’s data-join pattern with a set of circles plotted on an SVG canvas. Buttons trigger updates: “Remove” pops a data point, while “Modify” replaces a random point with new coordinates. Using `selectAll('circle')`, `enter`, `merge`, and `exit`, it shows how to handle entering, updating, and exiting elements. The code uses D3 v5’s `scaleLinear`, `select`, and `max`, with data defined as an array of `{x, y}` objects and rendering via SVG circles.

TTimothyMiage

70% match

Loading thumbnail…

join

This example demonstrates how D3’s data join reconciles SVG circles with an array of values, updating existing elements and appending new ones via `.join('circle')`. The visualization pairs two fixed circles with a joined selection of four circles, whose radii derive from the data `[20,30,40,60]`. Using d3.select and d3.csv, the code reads `data.csv` and `data2.csv` but does not display their contents, instead focusing solely on the join mechanics. Rendered as SVG, the circles are styled with red, green, and blue strokes, highlighting how the join overrides attributes like position and fill.

Hhanulik.ondrej@gmail.com

70% match

Loading thumbnail…

Fork of Circles with D3

This example shows a collection of overlapping circles arranged on a light green background, each with distinct positions, radii, and vivid fill colors. It demonstrates how D3’s data join and method chaining bind an array of circle objects to SVG elements, setting their center coordinates, radius, and fill via attribute accessors. The visualization uses the `select`, `selectAll`, `data`, and `join` methods to manage the DOM, with a fixed dataset defined in code rather than loaded from an external source.

HHagar E

70% match

Loading thumbnail…

D3-Arrays - merge

A green sine wave of circles moves continuously across the screen, with each circle’s vertical position and radius oscillating over time. The animation uses D3 v7’s `line` generator to draw a connecting path behind the circles, while `selectAll` and `join` update both the path and circle elements. Circles are generated fresh each frame via a custom `makeData` function, with rendering handled through SVG and a `setInterval` timer that adjusts the wave’s amplitude.

Gg1g10

69% match