Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3.js Circle with Dots and Names

Public visualization

Viewing a saved revision (read-only)

c6677757a6f84e02a35536e3984e3f8d

D3.js Circle with Dots and Names

0 stars0🌍 Public
BBoris Gomaz
Last edited May 25, 2023
Created on May 24, 2023
Forked from Edge Bundling

This example visualizes protein contact data by arranging 233 dots in a circular layout around a central point, representing residues from a PDB structure. Each dot is positioned using trigonometric calculations with fixed angle increments, and amino acid names are labeled when the dot index matches the residue number from the JSON input. The visualization uses D3.js v4 with SVG elements, appending circles and text nodes via the `d3.json` callback, `.selectAll()`, and `.enter()` patterns. Data originates from a `data.json` file containing interaction pairs with residue identifiers and symmetry operators.

AI-generated description