Molecule

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 3, 2012

A force-directed layout draws a molecular graph, with atoms as colored, size-scaled circles and bonds as connecting lines. Each node is labeled with its chemical symbol from the data file, and bonds are drawn thick or as double lines based on the bond value. The visualization uses `d3.layout.force` for simulation and SVG for rendering, reading atom and bond data from a JSON file. The code offsets double bonds by overlaying a white separator line on the thicker stroke.

AI-generated description

This is a quick hack to draw two parallel links between nodes. Yes, you can scale it to more than two nodes, but it gets increasingly awkward. The alternative is to compute the paths manually, say by computing the perpendicular vector of the vector between the node centers, and offsetting the links accordingly.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

This example shows a force-directed graph with nodes connected by links of varying weights, representing relationships between chemical elements and compounds. The code uses d3.forceSimulation to position the circular nodes and curved paths for the links, with text labels for each node. The visualization is rendered as an SVG using D3 v5, with node colors and stroke widths determined by the link values in the static JSON dataset.

Yyakupermurat

72% match

Loading thumbnail…

molecules

This visualization shows a field of 1,000 colorful circles that collide and bounce off each other, with a larger fixed circle at the center that can be dragged with the mouse. It uses d3.v3’s force layout and collision detection via d3.geom.quadtree to simulate physical interactions, while rendering the circles as SVG elements. The root node is fixed and follows the mouse pointer, and the force graph continuously updates the circle positions on each tick. The scene is interactive, allowing users to move the central node and watch the surrounding circles respond.

Yyyaaa1

72% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph displays 13 nodes and 18 links, using a physical simulation to position the circles and lines in an organic, interconnected layout. The D3 v3 code constructs an SVG scene with `d3.layout.force`, applying a negative charge to repel nodes and a tick handler to update the `x`, `y`, `cx`, and `cy` attributes of the line and circle elements. The graph’s structure is defined by a hard-coded nodes array and links array, representing an abstract network for the visualization.

Mmbostock

70% match

Loading thumbnail…

Fork of Force Directed Graph

This fork of a force-directed graph visualizes relationships between chemical element symbols and related labels (such as “C,” “Si,” “O,” and “K”) as an undirected network. The code uses D3.js v5 to render nodes as gray circles with black strokes and edges as gray links, with node labels displayed in 10px sans-serif text. Data is hardcoded as an array of link objects, each specifying source, target, and a binary value, but no physical simulation is explicitly invoked in the provided JavaScript. The graph layout appears static, relying on the pre-defined link structure without visible interactive forces.

NNkwachi Abel

69% match

Loading thumbnail…

Force Layout

This example visualizes a graph of DNA sequence nodes and their connections, allowing users to toggle between the original graph and a community-detected version using buttons. The force-directed layout positions nodes using `d3.layout.force` with SVG rendering, drawing circles for nodes and lines for links. The two views load separate JSON files (`graph.json` and `community.json`), where the community file includes additional intra-community connections. Node and link styling relies on D3 v3 selections, with the simulation updating positions on each tick event.

JJverma

69% match

Loading thumbnail…

Organization Graph Diagram

An interactive organization graph rendered in SVG with D3's force-directed layout. The visualization shows four main nodes connected by links, with child nodes and small leaf nodes branching from each main node, all colored using a palette from a generated colors module. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, with node sizes and link distances defined in the data. As the simulation ticks, circles, lines, and text labels update their positions dynamically.

CCurran Kelleher

69% match

Loading thumbnail…

D3 force layout

A force-directed graph layout shows a network of 26 named nodes connected by 11 links, with each node displayed as a GitHub favicon icon and a text label. The visualization uses D3 v3’s `d3.layout.force` to simulate physical forces with zero gravity, a charge of -2, and a link distance of 100, while the simulation updates node positions and link coordinates on each tick event. Data is loaded from a local `graph.json` file containing node groups and link betweenness values, and the SVG rendering includes draggable nodes and grey lines for links.

AAlbert Giménez Morales

68% match

Loading thumbnail…

Organization network graph

This example visualizes a small organizational network with three nodes—Arts Web, Community Visio, and Silicon Valley—connected by two links, rendered as circles and lines in an SVG. It uses D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes dynamically, with the charge strength set to -3000 to repel them. Labels are drawn as SVG text elements, and the simulation’s tick event updates circle positions, line endpoints, and label coordinates. The code imports data from a local `data.js` file and runs in a React-compatible setup with d3.v7.

Nn.koldovsky@gmail.com

68% match