Hamiltonian Graph Builder

100%

Hamiltonian Graph Builder

✓ Published0🌍 Public

Last edited Oct 7, 2016

Created on Oct 7, 2016

This interactive tool visualizes the construction of cubic Hamiltonian graphs from LCF notation, a compact representation for such graphs. Users can input or edit an LCF code, and the visualization animates the step-by-step building of the graph through a force-directed layout. The interface uses the Ember.js framework for routing and state management, while the rendering relies on D3.js, specifically `d3.layout.Force` for the physics simulation and SVG shapes for vertices and edges. The code also incorporates jQuery for input handling and URL parameter parsing to share specific graph configurations.

AI-generated description

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/1703449'>Hamiltonian Graph Builder</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Directed Graph Editor

This interactive graph editor displays a directed node-link diagram built with D3 v3 and rendered as SVG. Users can add nodes by clicking empty space and create edges by dragging between nodes, with keyboard shortcuts for selecting, moving, and modifying edge direction or reflexivity. The force layout, initialized via `d3.layout.force`, continuously updates node positions and draws arrow markers for directed edges. The code uses D3's data joins (`path.data`, `circle.data`) to handle dynamic updates and applies CSS classes for visual states like selected edges.

TThanaporn-sk

66% match

Loading thumbnail…

Force Editor

An interactive force-directed graph editor demonstrates node-link diagram manipulation. Users drag from existing nodes to create new nodes or links, click to select elements, and use the DELETE key to remove them. The visualization supports panning and zooming through D3’s zoom behavior. The code uses d3.layout.force for physics simulation and d3.scale.category20 for node coloring. The graph redraws incrementally during simulation ticks, with elastic transitions on node creation.

SSohojoe

66% match

Loading thumbnail…

Start Project Cayley

Start Project Cayley visualizes a live graph traversal through a force-directed network. The code uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position nodes, while `transition.attrTween` animates edge paths as the traversal steps. The graph data comes from a Cayley database, accessed via the `cayley` command-line HTTP client, which loads a gist-sourced dataset. The visualization renders nodes as circles and edges as curved links, with the current traversal path highlighted. It shows an interactive exploration of a linked-data graph, where each step updates the displayed nodes and edges.

CCliffordAnderson

65% match

Loading thumbnail…

3D Force-Directed Graph (ThreeJS)

This example shows an interactive 3D force-directed graph rendered with Three.js WebGL, using ngraph.forcelayout3d for physics simulation and trackball controls for rotation, zoom, and panning. It cycles through three topological data sets—Les Misérables character co-occurrences, a blocks.json citation network, and D3 source-code dependencies—with node size, color, and name mapped per dataset using Three.js spheres, line geometry, and raycaster-based tooltips.

TThanaporn-sk

64% match

Loading thumbnail…

MIT-License

This visualization uses a physics-based simulation to cluster and connect nodes in a network. It shows a dynamic system of points that repel each other while links pull them together, creating an organic, ever-shifting layout. The code leverages d3.forceSimulation to model the forces and d3.geoPath for rendering the curved edges. Built on a gist of public data, the example demonstrates real-time interaction with the simulation, offering a clear view of how force-directed algorithms explore spatial arrangements.

11wheel

64% match

Loading thumbnail…

Directed Graph Editor

This interactive editor demonstrates graph creation and manipulation, showing nodes connected by directed edges with arrowheads indicating direction. Users can add nodes by clicking empty space, add edges by dragging between nodes, and select or modify elements via keyboard shortcuts. The code uses d3.forceSimulation for layout and d3.drag for node repositioning, with SVG paths and circles as the primary rendering elements. The example implements various interaction states, including reflexive edges, directional toggles, and visual feedback for selected components.

FFrissAnalytics

64% match

Loading thumbnail…

Graph Editor

This interactive graph editor visualizes small directed graphs using SVG rectangles, text labels, and arrow-tipped lines. Users can drag nodes to fix their positions, and click fixed nodes to release them, allowing free exploration of graph connectivity. The implementation uses D3 v4’s force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) and drag behavior (`d3.drag`) to manage node physics. Node and link data are bound to SVG groups and lines, with arrowheads defined via SVG markers. The graph structure is defined in-memory, and the rendering updates dynamically as users interact.

CCurran Kelleher

64% match

Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel

64% match