GavinDiaper

@GavinDiaper·4 public vizzes

Fork of Fork of D3 Starter

This example demonstrates a network diagram of interconnected devices with distinct roles (main, sub, proxy, and agent nodes) communicating through various protocols like HTTPS, callbacks, and tunnels. The visualization uses D3 v6 to render nodes as Font Awesome icons within an SVG canvas, with curved vertical links and directional arrows indicating data flow. The code implements custom link templates via `d3.linkVertical()` and maps node coordinates from percentages to pixel positions, while also adding interactive tooltips and animated styling to represent the complex network topology.

Apr 24, 2023

Loading thumbnail…

Fork of D3.js collapsibleRRR tree with boxes

A collapsible, boxed tree visualization maps hierarchical JSON data into an interactive SVG diagram using D3.js v3. Nodes appear as colored rectangles, with the root in yellow, intermediate types in blue and green, and leaf nodes in purple. Users can click nodes to expand or collapse their subtrees, with animated transitions applied to the layout. The code employs the `d3.layout.tree` API to compute the tree structure and a custom `breadthFirstTraversal` function to assign colors and manage node spacing, while a zoom and drag behavior is enabled via `d3.behavior.zoom`.

Apr 19, 2023

Loading thumbnail…

Fork of Fork of D3 Stratify tree diagram

This example shows a hierarchical tree diagram built from CSV data using the D3 `tree()` layout and `linkHorizontal` for curved edges. The visualization renders as an SVG within a React component, with nodes and paths styled in a green color scheme. The code loads data from an inline CSV string with parent-child relationships, then applies the D3 `stratify` method to structure the data before passing it to the tree layout. The diagram spans the full width and height of the viewport, with margins applied to position the hierarchical structure.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of ICE - 8: Visualizing Tree MAYUa

This example shows a hierarchical tree of a car company and its subsidiaries, with parent and child nodes connected by colored links. Each node is a circle labeled with the company name; the branching layout reveals the ownership structure, from General Motors down to individual brands. The visualization uses the D3.js library with a tree layout and diagonal projection to position nodes, and CSS styles control the node and link appearance. It is rendered as an SVG with smooth transition animations, and the data is hardcoded in a JavaScript array. The interaction includes a pointer cursor on nodes, indicating clickability, though no click behavior is implemented.

Apr 13, 2023