Pat working file

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

74% match

Trial WebCola with G!

This example demonstrates an interactive graph visualization using WebCola for constraint-based layout and D3 v4 for rendering, with React as the framework. It displays a network of entities, attributes, and relations as rounded rectangles and circles, color-coded by type, with SVG text labels for node names and IDs. The force-directed layout is managed by `cola.d3adaptor`, while `d3.zoom` enables pan and zoom, and `cola.drag` supports node manipulation. Data is loaded from a local JSON file, rendering as an SVG with styling applied through CSS classes.

71% match

Unconstrained WebCola!

This example uses WebCola to perform force-directed graph layout on the Les Misérables character co-occurrence dataset, rendered as SVG circles and lines. The nodes are colored by their group assignment using `d3.scaleOrdinal` with `d3.schemeCategory20`, and link thickness varies with edge weight. Clicking a node fixes it in place while the layout continuously updates, with positions driven by WebCola’s `cola.d3adaptor` and `on("tick")` callback using `d3.json` to load the graph data.

WebCola Small Groups!

This example shows a force-directed network layout of seven nodes and eight links grouped into overlapping rectangular clusters using WebCola, a constraint-based layout library. The nodes and groups are rendered as SVG rectangles with labels and color-coded fills, while links appear as thick lines. Users can drag nodes to rearrange them, with double-clicking releasing a node from its fixed position. The visualization uses WebCola's `d3adaptor` with `avoidOverlaps` and `linkDistance` settings, integrated with D3 v4's zoom and drag behavior on an SVG container.

Fork of Fork of WebCola Small Groups!

This example demonstrates an interactive force-directed graph layout using WebCola, with seven labeled nodes and eight links arranged into small groups. The visualization supports drag-and-drop node manipulation, where dragged nodes become fixed in place and can be released by double-clicking. Built with React and D3 v4, the code renders SVG rectangles for nodes and lines for links, with WebCola's `cola.d3adaptor` handling the layout algorithm, collision avoidance, and link distance constraints. The graph data comes from a JSON file loaded via `d3.json`.

SShivam Singh

Fork of WebCola Small Groups!

A fork of the WebCola small groups example visualizes force-directed graph layout with interactive node dragging. Seven rectangular nodes and eight links are arranged into overlapping, color-coded group rectangles using the cola.d3adaptor for constraint-based layout. Nodes can be dragged to fix their positions, and double-clicking releases them, allowing users to manipulate the network structure. The example uses D3 v4 with SVG rendering, reading node, link, and group data from a JSON file, and leverages cola’s drag and tick events to update positions live.

RRohit Gupta

Fork of WebCola Small Groups!

This example demonstrates a force-directed graph layout with nodes grouped into nested clusters. The visualization uses WebCola's `cola.d3adaptor` to position seven labeled rectangles connected by eight links, while translucent background rectangles represent the hierarchical group structure. Nodes can be dragged to reposition, and double-clicking releases a node, allowing it to move freely again. The data comes from `graph.json`, which specifies node sizes, link connectivity, and a group hierarchy, and the SVG rendering is updated during each simulation tick.

SShivam Singh

69% match

Unconstrained WebCola!

This example uses WebCola’s constraint-based layout to render a graph of entity, attribute, and relation nodes from a JSON dataset, with SVG rectangles and text labels colored by type. The code leverages the `cola.d3adaptor` with `symmetricDiffLinkLengths` and `start` to drive the force-directed simulation, while node dimensions adapt to label bounding boxes via `getBBox()`. Rendering is handled through D3 v4 selections, with zoom and drag interactions enabled.