Sorting the Grid

100%

Sorting the Grid

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

64 circles in a square grid encode three random attributes: size, color, and id. Users sort the grid by clicking “sort by” links for id, size, or color. The d3.layout.grid library positions nodes in a fixed grid; the d3.comparator library builds multi-key sort comparators that reorder the data. Clicking triggers an animated transition using `node.transition()` with a stagger delay, moving circles to their new sorted positions while adjusting radius and fill via d3 scales.

AI-generated description

Grid layout in combination with multi-dimensional sorting using d3.comparator.

forked from <a href='http://bl.ocks.org/mayblue9/'>mayblue9</a>'s block: <a href='http://bl.ocks.org/mayblue9/e0403ef97c56deab5079ef1f5bc366db'>Sorting the Grid</a>

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

74% match

Loading thumbnail…

minimalistic circle grid

A minimalistic circle grid displays ten uniformly sized circles arranged in a single vertical column, each positioned at a fixed radius. The visualization uses D3 v4 with the `d3.gridding()` layout function to compute the grid coordinates from a simple array of ten data points. Circles are rendered as SVG elements, translated to their calculated `cx` and `cy` positions within an 800-by-600 viewport. The example relies on the external `d3-gridding` plugin to handle the layout, with no additional styling or interaction beyond the basic geometric arrangement.

FFrissAnalytics

73% match

Loading thumbnail…

Circles and rectangles grid

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

NNita

72% match

Loading thumbnail…

Grid Multi Foci Force Layout

This example shows a grid multi-foci force layout that clusters circles representing project statuses and owners. Each node is colored by a categorical scale and positioned near one of several fixed focal points arranged in a grid, with node radius encoding a numeric value. The visualization uses D3 v3’s force layout to simulate attraction toward these foci, with an ordinal x-scale mapping statuses to columns. Data is drawn from an inline JavaScript array, and rendering is done via SVG circles with jQuery used for window sizing.

FFrissAnalytics

72% match

Loading thumbnail…

Objects ordering

Forty randomly placed circles of varying colors demonstrate z-order manipulation through mouse interactions. Hovering brings a circle to the front by appending it as the last SVG child, while clicking sends it to the background by inserting it as the first child. The code uses D3 v4 with SVG elements, d3.range for data generation, and d3.scaleOrdinal for color mapping, with mouseover and click events controlling element order via parentNode methods.

EEfratVil

72% match

Loading thumbnail…

Grid layout

A grid layout arranges points and rectangles into evenly spaced rows and columns, with new items added and removed in a cycling animation. Two separate grids are rendered side-by-side in an SVG: one uses points with `d3.layout.grid`’s `.points()` mode, the other uses bands with `.bands()` and padding. The code leverages `d3.select`, `d3.range`, and the `transition` API to smoothly animate changes as the data array grows and shrinks, demonstrating how layout calculations update dynamically.

FFrissAnalytics

71% match

Loading thumbnail…

GRID

A 10x10 grid of square cells responds to clicks by cycling through four fill colors: white, blue, orange, and gray, based on a per-cell click counter. The SVG is generated with D3 v4, using data binding to create rows and columns of `rect` elements. Each cell maintains its own click state, and the `d3.select(this)` method directly updates the clicked square’s style. The grid itself is static, with no animation or external data source beyond the locally generated coordinate and dimension objects.

CChristoph Diefenthal

71% match

Loading thumbnail…

Square Grid

A grid of gray squares fills the view, with each square representing a single unit, arranged so that rows of ten, blocks of one hundred, and groups of one thousand are visually distinct. The count, displayed as a large number, animates upward or downward as the grid randomly updates to a new total between zero and ten thousand, using transitions to add or remove squares. The visualization uses D3 v4 with data joins and tweens to interpolate the numeric label, while the grid’s layout is computed via `d3.range` and positional math. This example is forked from Mike Bostock’s original block.

GGerardoFurtado

70% match