OllieFord

@OllieFord·3 public vizzes

fresh block

A force-directed network graph visualizes the study relationships between eleven academic or personal topics, such as Engineering, Maths, and AI. Node size encodes the magnitude of the `size` attribute, while link thickness reflects the `bond` strength. Data is loaded from a `graph.json` object. The graph is rendered to an SVG canvas using D3 v3 APIs including `d3.layout.force` and `d3.scale.sqrt`. The force simulation positions nodes with `charge`, `linkDistance`, and drag interactions.

Jun 16, 2016

Loading thumbnail…

fresh block

This example visualizes a weighted network of university course categories and their dependencies. Nodes are styled as circles with widths scaled proportionally to a "size" attribute, while the thickness of connecting lines represents the strength of each bond. The graph is rendered as an SVG using D3.js version 3, with forces simulated via the `d3.layout.force` API to push nodes apart and arrange them dynamically. Data is loaded from an embedded JSON file, and the layout continuously updates node positions and edge coordinates on each tick event, with drag interaction enabled through `force.drag`.

Jun 13, 2016

Loading thumbnail…

Atlas linkages

This example visualizes the connections between a personal interest in atlas domains, such as Engineering, Maths, and Programming, as a force-directed graph. The graph shows nodes representing these topics and links indicating relationships, with node size reflecting a relative weight and color differentiating each domain. It uses the D3.js v3 library, specifically `d3.layout.force()` for the physics simulation and `d3.json()` to load the `graph.json` data. The SVG rendering positions nodes and links, with lines and circles styled via CSS, and interaction is enabled through the force-directed layout's drag behavior.

Jun 2, 2016