2-19-2022 rework

100%

2-19-2022 rework

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Feb 19, 2022

This visualization reworks semantic JSON knowledge structures into an interactive graph of nodes, links, and groups. It displays the logical relationships within sentences, such as "the shark bit the surfer savagely," by parsing hierarchical data from files like `example.json` and `happycat.json`. The code uses D3 v4’s `d3.json` to load data, creates nodes with varying widths based on text measurement via Canvas `measureText`, and employs WebCola for force-directed layout. SVG and Canvas contexts render the graph, with node types distinguishing referents, predicates, and groupings.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

3-27-2022 rework

This visualization reworks a JSON knowledge graph of analyzed sentence events, using d3.v4 to display nodes and links in an SVG canvas. It renders the example sentence "the shark bit the surfer savagely at the beach yesterday because it was hungry" as a structured network, with nodes sized by text length and organized into labeled groups. The layout relies on force-directed simulation from the WebCola library, while canvas-derived text measurement via `ctx.measureText` tunes node dimensions. The graph distinguishes predicates, referents, and phrases, with edges showing logical dependencies.

CConnor Trump

90% match

Loading thumbnail…

2-13-22 Clean Sheet

This visualization renders a semantic knowledge graph from linguistic JSON data, showing propositional relationships such as predicates, referents, and nested clauses. It builds nodes and links recursively from the `ContextTrackingData` structure, using D3 v4’s force simulation to layout the graph. The rendering combines SVG for nodes and links with Canvas 2D text measurement to size labels. WebCola is also loaded, though the primary layout is driven by `d3.forceSimulation`. The example demonstrates hierarchical clause decomposition, including recursive structures for reported speech and causation.

CConnor Trump

77% match

Loading thumbnail…

Fork of WebCola Small Groups!

This fork of WebCola's Small Groups example visualizes sentence structure as a force-directed graph of clauses, predicates, and referents. Nodes are grouped by syntactic role, with colors distinguishing predicates, referents, and peripheries. The implementation uses the WebCola layout engine through its `d3adaptor`, with drag-and-drop interaction for repositioning nodes and double-clicking to release them. Data originates from a static JSON file containing the sentence "The shark bit the surfer savagely at the beach yesterday because it was hungry."

CConnor Trump

75% match

Loading thumbnail…

Fork of 2-13-22 Clean Sheet

This visualization renders a hierarchical knowledge graph from JSON-encoded semantic parses of sentences, showing predicates, arguments, and nested propositional structures. It uses d3.v4 with forceSimulation for layout, rendering nodes and links as SVG elements, while Canvas is used to measure text dimensions for label sizing. Nodes represent nucleus predicates, referents, and modifiers, with links connecting arguments to their cores. The example loads data via d3.json and constructs the graph by iterating through the ContextTrackingData array, handling nested clauses and referent phrases.

CConnor Trump

73% match

Loading thumbnail…

Combination 4

This visualization presents a grouped network graph of entity, attribute, and relation nodes, where colored rectangles represent groups and nodes, with labels attached. It uses the WebCola constraint-based layout library through its `cola.d3adaptor` to arrange nodes, while D3 v4 handles SVG rendering and zoom interactions. Node and group colors are dynamically assigned from a loaded JSON palette, and the graph data originates from a `graph.json` file. The example demonstrates combining D3 with WebCola to create a force-directed diagram with grouped clustering capabilities.

Bbrett@cloudaccelerator.co

71% match

Loading thumbnail…

Cola

This example visualizes the syntactic structure of a sentence as a network of nodes and links grouped into semantic layers, including the core predicate, referents, and peripheral elements. It uses WebCola for constraint-based layout and D3 v4 for rendering, with both SVG and canvas. The graph is built from a JSON file containing screen model data, and the layout organizes nodes into colored groups representing core and clause-level periphery.

CConnor Trump

71% match

Loading thumbnail…

Combination 2

This example shows a hierarchical graph visualization of event trace data, using grouped rectangles to represent nested records and colored nodes to distinguish between entities, attributes, and relations. The visualization is rendered using D3 v4 and the WebCola layout library (accessed through `cola.d3adaptor`) to position and group elements with constraints-based optimization. A zoomable SVG canvas displays the graph, with a color scheme defined in a separate JSON file. The graph data comes from `graph.json`, which specifies group structures and leaf descriptions.

Bbrett@cloudaccelerator.co

70% match

Loading thumbnail…

PAT Refactored Data

This visualization shows the hierarchical structure of PAT-refactored linguistic data, displaying propositions, their logical structures, and the relationships between core arguments like the nucleus, predicator, and referents. It uses d3.forceSimulation with WebCola for layout, rendering nodes and links in a knowledge graph style. The code processes JSON input containing context tracking data, extracting clause operators, core periphery details, and argument relationships to construct the graph. Nodes are styled as groups and labels, with links indicating argument types, while SVG and canvas are used for rendering the final output.

CConnor Trump

70% match