Shivam Singh

@shivamk1998·5 public vizzes

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.

Aug 2, 2022

Loading thumbnail…

Fork of WebCola Small Groups!

This example visualizes a small graph of seven nodes and eight links using WebCola’s constraint-based layout, with nodes grouped into translucent, colored rectangles. The graph data comes from `graph.json`, and the visualization renders as SVG via D3 v4, where nodes are draggable and zoomable. WebCola’s `d3adaptor` handles the layout, enforcing link distances and avoiding overlaps, while D3’s `tick` handler updates node, link, and group positions. Double-clicking a node releases it from its fixed position, letting the layout re-optimize around the user’s manual placement.

Aug 1, 2022

Loading thumbnail…

Fork of WebCola Small Groups!

A small network of seven labeled nodes and eight links is laid out as a force-directed graph. Nodes are rendered as fixed-size rectangles, with edges as thick lines, and are positioned by the WebCola library, which adapts the cola.js constraint-based layout engine. The example uses D3.js v4 for SVG rendering and event handling, including drag-to-fix and double-click-to-release interactions. The code loads node and link data from a JSON file, and the graph’s layout responds dynamically to user input.

Aug 1, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered on the screen using CSS styling. The page consists of a single `div` element with a class that applies a large font size and text alignment through an embedded `<style>` block. It uses no JavaScript libraries or external frameworks, relying solely on native HTML and CSS to render the static message, making it a bare-bones starter template for web development.

Aug 1, 2022

Loading thumbnail…

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

Aug 1, 2022