Filtering the Grid

100%

Filtering the Grid

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

This example demonstrates a grid layout where 64 colored and shaped items can be filtered by color or shape using interactive buttons. Items smoothly animate between grid positions as filters are applied, shrinking to nothing when removed and growing back when reintroduced. The implementation uses d3.layout.grid for positioning, d3.comparator for multi-key sorting, and d3.svg.symbol for rendering shapes. Data is randomly generated, and transitions are handled with D3's `.transition()` method with staggered delays.

AI-generated description

Filtering items in a grid layout.

forked from <a href='http://bl.ocks.org/herrstucki/'>herrstucki</a>'s block: <a href='http://bl.ocks.org/herrstucki/5710596'>Filtering the Grid</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Sorting the Grid

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.

FFrissAnalytics

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

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

72% match

Loading thumbnail…

grids

This visualization displays a grid-based layout with multiple colored panels, including a header bar, a slider-controlled range display, and a large SVG canvas. The interface uses Bootstrap’s grid system for responsive column and row structuring, while d3.v5 handles SVG sizing and element selection. A slider appears to adjust a numeric value shown in the adjacent label, with the main chart area left empty. The page uses a fixed full-viewport layout with distinct color-coded sections for headers, controls, and content areas.

AAnimesh Nautiyal

71% match

Loading thumbnail…

D3 complex filtering

An interactive scatterplot demonstrates dynamic filtering of 200 random points using radio buttons to select preset filter modes: none, center, edges, or quadrants. Built with D3 v7, it uses scaleLinear for axes and axisBottom/axisLeft for rendering. Clicking a radio button applies a transition to recolor points based on geometric conditions relative to the midpoint (500, 500), highlighting central clusters, edge outliers, or quadrant-specific groups with schemeCategory10 colors, while rendering via SVG circles.

KKaustav Sen

71% match

Loading thumbnail…

Filtering Objects

The example demonstrates interactive filtering of categorical data cards, where each card is colored according to its group (A, B, or C) and labeled with the group name. A dropdown menu lets users select a group to display, showing only matching cards and removing others with a gray fade-out transition. The visualization uses D3 v4’s data join, `transition`, and `selection.exit().remove()` to handle dynamic updates, with a static dataset of 24 objects. Filtering is driven by a `change` event listener on the select element, and card styling relies on inline HTML and CSS classes.

EEfratVil

69% match

Loading thumbnail…

Gradient Grid

A 3×3 grid of rectangles displays a static gradient of grayscale tones. Users select a column value from a menu, triggering a transition that outlines rectangles in the selected column and those before it with a red stroke. The visualization uses D3 v7’s selection, data join, and transition API to animate the SVG elements. The fixed grid data is hardcoded, and the menu is built with D3’s `dispatch` and standard HTML select elements.

Sscheenmi@gmail.com

69% match

Loading thumbnail…

Grid Snapping

An interactive grid of color-changing rectangles represents a dataset of yearly groups, with brushing to select and highlight cells. The visualization uses a custom brush component in D3.js to snap selections to the grid of ordinal scales, then triggers a transition that animates the selected rectangles through a red-to-blue color change with a bounce easing effect. The code builds the SVG from scratch, defining ordinal scales for years and groups, and handles brush events to invert the selection coordinates back to data values.

SSpaceActuary

69% match