Lottokone1

100%

✓ Published0🌍 Public

Last edited Jan 12, 2016

Created on Jan 10, 2016

A grid of 39 colored rectangles displays lottery draw frequencies, with colors mapped from red to darker shades based on value. The layout positions six columns per row, expanding vertically across seven rows. Built with D3.js version 3.5.5, ordinal and linear scales (`d3.scale.ordinal`, `d3.scale.linear`) compute x and y positions, while a third linear scale maps minimum to maximum values to RGB red intensity. SVG renders the static visualization, using hardcoded data and blockbuilder.org as the source.

AI-generated description

Built with blockbuilder.org

Lottokone

Similar vizzes

Loading thumbnail…

Untitled

A donut chart displays the percentage distribution of five lottery games, with each sector labeled and separated by white strokes. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to generate colored slices from the CSV data, rendering text labels via the arc centroid API. The SVG chart is sized to 500 by 400 pixels, with a legend positioned in the upper left.

Vvenkatajayanth03

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

68% match

Loading thumbnail…

fisheye-rectangles

A fisheye grid of 32 rectangles distorts in response to mouse movement, magnifying the hovered cell and shrinking its neighbors. Each colored cell shows a random name and date in its corner, with the distorted border thickness and text size reflecting proximity to the cursor. Built with D3.js and lodash, the visualization uses SVG clip paths and mouse event handlers to dynamically scale each rectangle’s geometry, creating a lens-like effect across the fixed 4x8 layout.

11wheel

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

67% match

Loading thumbnail…

Gist c1f0db859e835896ade3

This visualization presents a 37×9 grid of cells, each colored according to a log2 ratio value from a CSV dataset. Using D3.js v3 with SVG and animation, cells transition smoothly between color intensities, revealing clusters of high (4) and low (0-1) values. The animation highlights the distribution of ratios across rows and columns, making patterns in the data immediately visible through color mapping.

BBenHeubl

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

67% match

Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

CCaroline Ghisolfi

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

67% match