Skip to main content
SimilarExport ZIP
100%

Fork of HTML Star

✓ Published0🌍 Public
Yyuvraj khanna
Last edited Feb 15, 2024
Created on Feb 15, 2024
Forked from HTML Starter

This example shows a simple network diagram with nodes and links, using click and double-click interactions to log node labels and zoom into specific points. The nodes are positioned with fixed x and y coordinates from an array, while links connect them through source and target IDs. The visualization uses D3 v7 to create SVG circles and lines, and applies a d3.zoom behavior with a scale extent to enable pan and zoom. A transition with zoom.transform handles the double-click zoom animation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starterdfsakj

This example demonstrates a node-and-link network visualization using D3.js v6. It renders nodes as steelblue circles and links as gray lines within an SVG container. The code includes a force-directed layout with `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements. The nodes and links are sample data, and the interaction includes drag-and-drop functionality via `d3.drag`, with positions updated on each simulation tick. Links connect nodes by id, and the rendering approach uses SVG.

Yyuvraj khanna
82% match
Loading thumbnail…

Fork of HTML Starter

This example shows a force-directed network graph with 20 nodes arranged in a circle and connected sequentially by links. Using D3 v7, it employs `d3.forceSimulation` with link, charge, and center forces to animate the layout. Nodes are rendered as SVG circles with labels, and drag behavior is implemented via `d3.drag` to reposition nodes interactively. The data consists of synthetic nodes and links generated with `d3.range`, and the visualization updates positions on each simulation tick.

Yyuvraj khanna
81% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays a node-link diagram of a dataset containing chapters and submissions, rendered as an SVG. The code uses d3.select, d3.scalePoint, d3.scaleOrdinal, and d3.schemeCategory10 to position nodes vertically and color them by chapter. User interaction highlights primary and secondary links and labels on mouseover, using CSS classes to adjust stroke and fill. The example is built with React and relies on d3 for arc path generation and layout.

Ssmeiyin
80% match
Loading thumbnail…

Fork of Mouse Follower & Path Drawer

This example demonstrates a React application that uses D3.js to render an interactive node-link diagram. Users click on circles (nodes) to select them; clicking a second node creates a black line (link) between the two, allowing for the construction of a custom graph. The SVG rendering approach uses React state to manage the lists of nodes and links, with individual circle elements responding to `onClick` events. The code also tracks a currently selected node, highlighting it in green, and uses a UUID generator for unique node identifiers.

Mmohamed el haddadi
78% match
Loading thumbnail…

Fork of Network Graph

This visualization uses D3’s force simulation to position a network of labeled nodes connected by curved, arrow-tipped edges. The graph is rendered as SVG circles and text, with a semi-transparent node fill and a green background. A d3.zoom behavior allows pan and zoom, while the simulation applies charge, collision, and link forces to lay out the nodes. The code imports node and link data from a dummyData module, and updates the graph on each simulation tick.

Ssrividyamadas@gmail.com
78% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example shows a network of draggable nodes connected by links, rendered with SVG inside a React component that uses d3.forceSimulation to compute positions. Clicking a node enables an attack button that injects a new red node and link into the graph. The code builds the visualization with d3.forceLink, d3.forceManyBody, and d3.forceCenter, and handles dragging through d3.drag. Static data defines three initial nodes and two links, with no external data source.

Zzarioualid@gmail.com
78% match
Loading thumbnail…

Fork of HTML Starter

This example shows a small network of five fictional actors linked in a chain, using a force-directed layout to position the nodes. The graph uses SVG elements for rendering, with circles for nodes and lines for links, and includes interactive drag-and-drop functionality. The code builds the visualization with the D3.js library and its force simulation API, specifically using `d3.forceSimulation` for the physics, `d3.forceLink` for the link constraints, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the graph centered. Labels are added as SVG text elements, and the simulation updates node positions on each tick.

Pprasaad.lakshme901@gmail.com
78% match
Loading thumbnail…

Fork of React & D3 Starter for 2.1 network

This interactive network visualization maps a conceptual space-exploration dataset, showing seven category nodes (like Planets and Missions) connected to seven object nodes (like Mars and Apollo 11). The SVG rendering uses d3.v7 to simulate a force-directed layout with d3.forceSimulation, combining link, many-body charge, center, and collision forces, while a drag interaction lets viewers reposition nodes.

RRuthvik Bairaboina
77% match