Skip to main content
100%

JS Bin

✓ Published0🌍 Public
VValIlya
Last edited Jun 19, 2017
Created on Jun 19, 2017

A grid of small colored cells arranged in 21 rows and 4 columns, where green cells represent 1 values and white cells represent 0 values from a binary solution array. The visualization includes a top axis labeled with employee indices (0–3) and a left axis labeled with time slots (0–20), created using D3.js with SVG rendering. The data represents a scheduling or optimization solution, with each cell colored according to its binary value using a linear color scale from white to green.

AI-generated description

forked from <a href='http://bl.ocks.org/ValIlya/'>ValIlya</a>'s block: <a href='http://bl.ocks.org/ValIlya/4db61bbfdb53f2de9cf3188af487648a'>JS Bin

// source http://jsbin.com/qemeyoq</a>

mit Licensed

Similar vizzes

Loading thumbnail…

JS Bin

A grid-based visualization displays a binary schedule matrix, where each row represents a time slot and each column represents an employee, with green cells indicating active assignments and white cells indicating idle periods. The chart renders as a small SVG heatmap (200x400 pixels) with top and left axes showing slot and employee indices, and a text label beneath displaying the total cost of the schedule (e.g., 77916.13). The data is loaded from a JSON file containing an array of schedule solutions, and the visualization presents the 21st solution.

VValIlya
89% 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
72% match
Loading thumbnail…

JS Bin

This example uses D3 to generate a 40-by-40 grid of SVG rectangles, each initially filled red. The visualization responds to mouseover events, changing a hovered rectangle’s fill to green via the `style` method. The grid is positioned using an ordinal scale with `rangeBands` across an 800-pixel square. The code defines an `onClick` function that toggles a rectangle’s color between red and green, though this handler is not attached to any event in the visible code.

WWillNetsky
71% match
Loading thumbnail…

Heatmap

This heatmap displays binary matrix values as colored cells, with rows and columns labeled for reference. The visualization supports three ordering strategies: random permutation, optimal leaf ordering, and initial order restoration, all controlled by buttons. Built with D3.js and the reorder library, the SVG renders cells colored on a white-to-orange scale based on value intensity, while the table.js component handles responsive reordering with animated transitions.

Iimsohandsome123
68% 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
68% match
Loading thumbnail…

2-Dimensional Data Display

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.

Ffloresh
67% match
Loading thumbnail…

Lottokone1

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.

SSokrates86
67% match
Loading thumbnail…

Gist 5475820

This example shows a small grid of colored cells tracking how country rankings change over time. The visualization uses a dataset with six countries and seven years (2003–2009), where each cell’s color encodes a rank value from 1 to 6. The code reshapes the data into a flat array of year–country–value triples, then draws SVG rectangles with `d3.select` and `.enter()`. It uses `d3.scale.quantize` for the color scale and `d3.scale.ordinal` for positioning. Hovering turns a cell white, and clicking logs the selected element to the console.

11wheel
67% match