Skip to main content
100%

Finds best (closest to square) grid sides for a number of square tiles

✓ Published0🌍 Public
Aaman-tiwari
Last edited Mar 16, 2016
Created on Mar 16, 2016

This example visualizes the dimensions of a grid—specifically, the closest-to-square pair of integers that can perfectly contain a given number of square tiles. It determines these dimensions by iterating through possible grid widths, testing for divisibility, and retaining the last valid pair. The implementation, written in C++, uses no external visualization libraries; instead, it relies on the standard `sqrt` and `ceil` functions from the math library to bound the search. The resulting grid dimensions are output as plain integer values, with no graphical rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

Square Grid

A square grid visualization displays quantities from zero to 9,999 as a hundred-by-hundred matrix of small squares, grouped into rows and blocks to represent powers of ten. The animation randomly resets the target count, then uses `d3.select` and `d3.range` to update the `rect` elements via `.transition()` with staggered delays, while a text label interpolates its number using `d3.interpolateNumber` and a custom tween. The rendering uses SVG within a 960×990 canvas, with cell and group spacing computed from the available width.

GGerardoFurtado
58% 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
56% match
Loading thumbnail…

Square Grid

This visualization displays a changing quantity as a grid of colored squares, where each square represents one unit, arranged so small rows of ten, groups of one hundred, and large rows of one thousand allow quick reading of exact counts by powers of ten. The count updates randomly, with squares animating in and out using `transition.attr("width", 0)` and `transition.delay` based on index. The SVG rendering uses `d3.select` and `d3.range` to manage the cells, and a `d3.interpolateNumber` tween animates the text label. The code uses the D3 v3 library and an interval timer to trigger updates.

Mmbostock
56% match
Loading thumbnail…

Implementation of sqRoot

This example implements a square-root approximation function using a binary search algorithm. The calculation begins with a range from 1 to the input number, repeatedly narrowing the search interval by comparing the midpoint squared to the target. The code tracks all midpoints in an array, sorts them, and returns the largest successful approximation when the search converges. The visualization demonstrates the step-by-step narrowing process, with each midpoint calculation highlighted as the algorithm iterates toward the result.

YYonet
56% match
Loading thumbnail…

Gist 1825fd83399f5e4df6f8b0d10399f465

This example displays a hexagon grid built from scratch, with two layout modes: flat-topped and pointy-topped hexagons. The visualization shows how hexagonal tiling can be generated programmatically, calculating exact vertex positions and cell centers based on geometric constants. The HexGrid class handles both orientations, spacing cells in a brick-like pattern that accounts for row offsets. Using custom math rather than a charting library, the grid’s points are derived from basic trigonometry and coordinate arithmetic. The code logs grid dimensions and counts to the console, revealing the underlying structure of the hexagonal lattice.

MMAKIO135
54% match
Loading thumbnail…

simple grid

A 200-by-200 pixel SVG canvas displays a 4x4 grid of 50-pixel squares, each filled with the same circular texture pattern. The example uses D3 v4 to append the SVG container and rect elements, while the texture is generated with the textures.js library, specifically via `textures.circles()`. Each square’s fill is set to `t.url()`, which returns a data URI referencing the shared texture, demonstrating how to apply a repeating pattern across multiple shapes without duplicating the pattern definition.

Aannabsmylie
50% match
Loading thumbnail…

Gist 0e347a46041a01aa3c4f

This example visualizes the Collatz conjecture by mapping each integer from 0 to 5199 to a small square, where the fill color encodes the number of cycles to reach 1 and the stroke color encodes the maximum value reached during the sequence. The squares are arranged in a grid, and hovering over a square updates a text label to show the exact cycle count and maximum for that number. The visualization uses D3.js (version 3.5.5) to compute the Collatz sequences, bind the data to SVG rectangles, and apply linear color scales with HSL interpolation for the two attributes. The layout positions squares sequentially in rows of fixed width, and the code notes that changing the width parameter alters the grid pattern.

CCBasis
49% match
Loading thumbnail…

Squaring the circle, part 1

This example shows a geometric experiment that builds regular grids by arranging points along the outlines of concentric polygons, with the number of sides and spacing adjustable via a dat.GUI control panel. It starts with a central dot and adds successive layers of rings, each ring containing points distributed evenly along the polygon’s perimeter. The visualization uses D3.js version 4.3 to render SVG circles and paths, with configurable parameters for polygon sides, radius, point size, and opacity. The code dynamically recalculates point positions on any parameter change, demonstrating how circular paths can be approximated and transformed into structured grid-like formations.

FFrissAnalytics
49% match