Skip to main content
SimilarExport ZIP
100%

2-Dimensional Data Display of GUIText

✓ Published0🌍 Public
Ffloresh
Last edited Oct 3, 2019
Created on Sep 24, 2019

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.

AI-generated description

Testing out display of 2-dimensional GUIText Data

MIT Licensed

Similar vizzes

Loading thumbnail…

2-Dimensional Data Display of GUIText

This visualization displays parsed GUIText data as a 2D matrix of rectangles, where each row represents a parsed GUI hierarchy sequence sorted by frequency count. The rows are transformed using `d3.hierarchy` and `.descendants()` to flatten tree structures, with rectangle positions calculated via simple coordinate spacing. The code uses `d3.select` for SVG manipulation, `d3.json` for loading data, and `d3.hierarchy` for tree processing, rendering each GUI event as a steelblue rectangle. Data is aggregated by identical GUIText strings to show duplicate occurrences, with row order reflecting descending count values.

Ffloresh
91% 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
77% match
Loading thumbnail…

Rectangles using data

This example shows a blank interactive canvas with a single instructional text prompt, inviting code edits. The visualization uses D3 v4 to append an SVG element to the body, sized at 960 by 500 pixels, and places a monospaced text label at a fixed position. The code relies on D3’s selection and append methods to construct the SVG structure, though it renders no data-driven rectangles or other marks. The rendering approach is static SVG output, with no external data source loaded.

IIgathi
69% match
Loading thumbnail…

Aggregated Event Sequences with GUI Histograms

This example visualizes aggregated GUI event sequences and their attribute distributions. It shows compact event chains alongside histograms for window names, class names, and content types, with interactive brushing and regex-based filtering that highlights matching events in real time. The visualization uses d3.hierarchy to structure data, d3.scaleBand and d3.scaleLinear for the histograms, and d3.event handlers for tooltips. Event sequences are rendered as SVG rectangles, with animation updating counts and matched percentages as users type rules into a text input.

Ffloresh
67% match
Loading thumbnail…

Event Sequences

This visualization displays event sequences as linear streams of small squares, where each sequence represents a path of GUI widget interactions from a root window to a nested element. Clicking a square highlights its entire sequence with a yellow overlay and lists the widget IDs as breadcrumb text below. The tool filters sequences by executable path via a dropdown menu. It uses D3 v5 to load JSON data, build a hierarchical tree from each sequence, and render SVG rectangles for each widget, with click handlers triggering the selection and highlighting logic.

Ffloresh
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
66% match
Loading thumbnail…

Rectangles data Color Jason

This example visualizes a small hardcoded dataset of seven rectangles, each with explicit position, size, color, and a text label. The visualization shows the rectangles as colored SVG shapes with black outlines, while each rectangle is paired with its name displayed to its right in monospace font. The code uses D3 v4 to bind the JSON data array to SVG `<rect>` and `<text>` elements via `d3.selectAll().data().enter().append()`. It sets position and size attributes directly from the data properties, fills each rectangle with its specified color string, and positions the labels by offsetting from each rectangle’s coordinates. The rendering approach is plain SVG appended to the body, with styling applied inline through D3’s `.attr` and `.style` methods.

IIgathi
66% match
Loading thumbnail…

Rectangles using data Color II

This example shows seven rectangles, each filled with a distinct color from a hardcoded JSON dataset that defines their position, size, color, and name. The rectangles are rendered on a 960 by 500 pixel SVG canvas, with each rectangle labeled next to it using its corresponding name. The code uses D3 v4’s selection and data binding to append a group for each data element, then appends a `rect` and a `text` child to each group. The rectangles use a black stroke for clarity, while the text is styled in a monospace font. The data source is an inline array of objects, and the rendering relies on D3’s SVG manipulation.

IIgathi
66% match