Gooey scatterplot

100%

Gooey scatterplot

✓ Published0🌍 Public

Last edited May 29, 2017

Created on May 29, 2017

This interactive scatterplot demonstrates the SVG gooey effect, where small nodes merge into larger cluster bubbles when grouped. The visualization presents 60 randomly generated data points across six clusters, with buttons toggling between grouped and ungrouped states. Using D3 v4, the code applies SVG filters including feGaussianBlur and feColorMatrix, with transition.attrTween animating the filter values to create the melting effect. Nodes transition to their cluster centers with staggered delays and exponential easing, while cluster circles fade in and out.

AI-generated description

Gooey scatterplot based on the Visual Cinnamon work. Many thanks to Nadieh Bremer for her excelent tutorials.

forked from <a href='http://bl.ocks.org/maritrinez/'>maritrinez</a>'s block: <a href='http://bl.ocks.org/maritrinez/31bb4cb9283ead2a305f2f9ec3ddef40'>Gooey scatterplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Gooey Effect

The visualization demonstrates a "gooey effect," where multiple circles emerge from a central stationary circle and then fall back into it, creating a fluid, blob-like appearance during their transition. The effect is achieved using an SVG filter with `feGaussianBlur`, `feColorMatrix`, and `feComposite` applied to a container group. D3.js v3 handles the rendering and animation, using a force layout (`d3.layout.force`) to manage the movement of the circles, while their positions are updated on each tick. The data consists of a single object with random velocity values, and all circles are initially placed at the center.

SSpaceActuary

81% match

Loading thumbnail…

Gooey Effect

A grid of small purple circles repeatedly morphs into a larger circle and back, creating a liquid-like "gooey" effect. The code uses an SVG filter with `feGaussianBlur` and `feColorMatrix` to blend overlapping shapes, while `d3.forceSimulation` computes cluster positions. Transitions apply `transition.attrTween` to interpolate filter values and stagger circle movement based on distance from the center.

AAjayyy

81% match

Loading thumbnail…

Gooey Effect

Sixty purple circles animate between a regular grid and a clustered circle, creating a smooth gooey merging effect. The transition is driven by an SVG filter using `feGaussianBlur` and `feColorMatrix`, with the blur values tweened via `transition.attrTween`. D3 v4’s `d3.forceSimulation` handles the clustering physics, while staggered `transition` delays on circle positions emphasize the organic flow. The effect alternates between the two states on a loop.

FFrissAnalytics

80% match

Loading thumbnail…

Gooey egde effect

A hexagon filled with colorful moving circles demonstrates a gooey edge-detection effect. The visualization applies an SVG filter using feGaussianBlur and feColorMatrix to create the gooey merging, then adds feConvolveMatrix to extract the edges of the merged shapes. A linear gradient fills the hexagon, which is defined as a clip path. The circles are positioned with random coordinates and animated via D3.js v4, with the filter defined in SVG defs and applied to the transformed circle group.

TThanaporn-sk

79% match

Loading thumbnail…

SVG inline only Gooey Effect

The example demonstrates a gooey effect in SVG, where multiple pairs of circles merge and separate with a smooth, organic visual transition. A clickable button triggers transformations that animate the circles’ positions, while paired goop paths dynamically generate stretched, fluid-like connections based on the distances and radii of each circle pair. Built with D3 v4, the visualization uses custom functions `goopGen` and `goopTransform` to compute path geometries, along with SVG attributes and D3’s data-binding capabilities to render the interactive animation. The code defines three circle pairs with specified coordinates and keys, all rendered in a 100x100 viewBox.

IIsaKiko

78% match

Loading thumbnail…

Gooey Exploding Scatterplot

This interactive Gapminder recreation plots life expectancy against fertility rates for countries over time, with a large year label and playable transitions. The “gooey” effect uses SVG filters—`feGaussianBlur`, `feColorMatrix`, and `feBlend`—to make continent groups coalesce or explode into their constituent countries with a paintball-splatter-like blur. The code creates a separate filter definition per continent, allowing individual toggling via the Explode All and Collapse All buttons. Data comes from Gapminder, and the visualization is built with D3 v4 using scales, axes, nesting, and transitions.

TThanaporn-sk

77% match

Loading thumbnail…

Gooey egde effect

Shifting circles confined within a hexagon produce a bold, gooey edge effect as they move and merge. The visualization applies an SVG filter chain—including `feGaussianBlur`, `feColorMatrix`, and `feConvolveMatrix`—to blur, threshold, and detect edges from the animated shapes. Built with D3 v4 and SVG, it uses a linear gradient fill and a clip path to constrain the motion, offering a dynamic exploration of filter-based visual styling.

KKcnarf

76% match

Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock

75% match