2-Dimensional Data Display of GUIText

100%

2-Dimensional Data Display of GUIText

✓ Published1🌍 Public

Last edited Sep 25, 2019

Created on Sep 23, 2019

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.

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

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

72% match

Loading thumbnail…

HW2 Treemap

This example shows a hierarchical treemap visualization where nested rectangles represent data values, with each rectangle’s area proportional to its value and text labels displaying the numeric data. The layout is generated using D3 v5’s `treemap` and `hierarchy` functions, which compute rectangle positions and sizes from a nested data structure. The SVG rendering applies a semi-transparent royal blue fill with white strokes to the rectangles, while white Helvetica text labels each node. The treemap layout is configured with a 900 by 400 pixel size and a 16-pixel outer padding, and the root’s values are summed using the `sum` method.

Mmryvin

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

68% match

Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

GGuillamon

67% match

Loading thumbnail…

TreeMapv2

This example visualizes a hierarchical tree structure of software model elements using a treemap layout. The graph.json data shows nested EClass objects organized by domain, with each node’s size determined by its `degree` value. D3 v3’s `d3.layout.treemap` algorithm partitions the 960×500 SVG canvas, rendering each node as a rectangle with a label, colored via the `category20c` scale. The visualization uses `d3.json` to load the data and SVG `rect` and `text` elements for output.

LLauraCortes

66% match

Loading thumbnail…

TreeMap

This tree map visualizes a hierarchical log of user interface events from a browsing session, shown as nested rectangles whose sizes correspond to a time metric. The layout is computed with `d3.treemap()` on the loaded JSON data, with elements rendered as SVG `<rect>` and `<text>` nodes. The d3 hierarchy is processed through `d3.hierarchy()` and laid out with `d3.treemap()`.

Ffloresh

66% match

Loading thumbnail…

Fork of TERGAR TRAINING - 2

This visualization displays a hierarchical tree structure using a horizontal dendrogram layout, with text labels sized inversely to node depth. The code loads CSV data from a GitHub gist and processes it through d3.stratify and d3.tree, rendering links via linkHorizontal paths and labels with SVG text. Pan and zoom capabilities are implemented using d3.zoom, applying transforms to a zoom group. The styling uses a custom Playfair Display font and green strokes for connections, with white text shadows for readability.

NNita

66% match