2-Dimensional Data Display

100%

2-Dimensional Data Display

✓ Published2🌍 Public

Last edited Sep 23, 2019

Created on Sep 23, 2019

A 2-dimensional grid of numeric values is displayed as a matrix of colored squares, with each cell’s value overlaid as white text. The visualization uses D3.js v5 with SVG rendering, employing `selectAll`, `data`, and `enter` to bind nested array data from a hardcoded dataset to rows and columns. Each square is a `rect` with fixed dimensions, and text labels are positioned within cells, demonstrating a basic data binding and layout pattern.

AI-generated description

Testing out display of 2-dimensional data

MIT Licensed

Similar vizzes

Loading thumbnail…

2-Dimensional Data Display of GUIText

This visualization displays parsed GUIText data as a two-dimensional grid of squares, where each row represents a separate parsed GUI event sequence and each column represents a step within that sequence. The code uses D3 v5 methods including `select`, `data`, `enter`, and `append` to bind the hierarchical data and render SVG rectangles. The `ParseGui` class in JavaScript parses the text attributes into tree structures. The display uses a fixed square size with spacing between rows and columns to create a matrix layout.

Ffloresh

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

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

74% match

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

73% match

Loading thumbnail…

drawing squares

This example demonstrates how to draw a series of rectangles whose widths correspond to values in a local data array. The rectangles are vertically aligned and randomly colored, with a tooltip appearing on mouseover to display each rectangle’s value. The visualization uses D3.js v5 via a CDN import, leveraging `d3.select`, `d3.sum`, and `.enter()` to build SVG rectangles. The code also imports a local ES6 module for the message text and uses D3 event handling with `d3.event` for positioning the tooltip.

Ddumbdataguy@gmail.com

73% match

Loading thumbnail…

grids 2

This example presents a dashboard layout with distinct regions for a map, table, slider, and hierarchical data, though the visible code only establishes the Bootstrap-based grid structure and an empty SVG canvas. The page uses Bootstrap 4 for responsive column and row sizing, with a fixed full-height container and color-coded placeholders. D3 v5 is imported and used solely to set the SVG’s width and height based on the document’s client dimensions. The index.js file applies these attributes without additional data binding or rendering, leaving the actual visualizations unimplemented.

AAnimesh Nautiyal

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

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

73% match