Grid Snapping

100%

✓ Published0🌍 Public

Last edited Mar 21, 2016

Created on Mar 20, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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

75% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

74% match

Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ

74% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

74% match

Loading thumbnail…

Dataviz 2018 Assignment Graphics

This example demonstrates a simple grid of blue squares rendered inside an SVG element. The visualization begins with a single static rectangle defined in the markup, then uses the D3.js `select` and `attr` APIs to programmatically append a looping series of additional rectangles, creating a dense 50-pixel grid pattern across the canvas. The underlying data is generated algorithmically rather than sourced from a dataset. The final result is an abstract, low-level exercise in shape composition, with the SVG output styled by a minimal external CSS file.

MMukund Khandelwal

73% match

Loading thumbnail…

Brush Snapping II

A time-series brush snaps selections to day boundaries on a date axis. The visualization uses a D3 v4 SVG chart with a horizontal brush, where brushing fires a *brush* event that rounds the selection’s start and end dates to the nearest day. The code uses `d3.brushX` with an `.on("brush")` listener, `d3.event.selection.map(x.invert)`, `d3.timeDay.round`, and `d3.select(this).call(d3.event.target.move, …)` to adjust the brush’s extent. The axis grid highlights hourly ticks with reduced opacity.

Mmbostock

73% match

Loading thumbnail…

Dataviz 2018 Assignment Graphics

A grid of small blue rectangles is generated and drawn into an SVG canvas. The page loads an HTML document that defines a 5000 by 3000 pixel SVG element and uses a JavaScript loop to create each rectangle, setting its position, size, and fill color programmatically via the SVG namespace. The rectangles are arranged in rows and columns, creating a simple, repeating pattern. The visualization relies entirely on the SVG `rect` element and JavaScript DOM manipulation, with no external charting library, and includes a CSS stylesheet for general page styling.

MMukund Khandelwal

73% match

Loading thumbnail…

Brush Snapping

A time-series brush snaps to day boundaries upon release. The example shows a timeline from August 2013 with a grid of 12-hour ticks; selecting a range triggers an `end` event, and the brush smoothly transitions to a rounded day-aligned selection using `brush.move` with a D3 transition. If rounding yields an empty interval, the code uses `timeDay.floor` and `timeDay.offset` to ensure a valid one-day range. The visualization uses d3.v4, an SVG axis with custom tick formatting, and an animated brushing interaction over a date scale.

Mmbostock

72% match