Nikalculus

@Nikalculus·5 public vizzes

Untitled

This example shows a hierarchical fault tree for a Mars rover mission, displaying components and their potential failure modes. Operations branch into launch and transit phases, with nested nodes for subsystems like avionics, cameras, and the single-board computer. Each leaf node is labeled with a failure code such as D1, D2, or E1. The visualization uses D3 v4’s `d3.tree` and `d3.stratify` to convert a flat CSV file with dot-separated paths into a structured hierarchy, rendered as an SVG with curved links and styled node circles.

Feb 16, 2020

Loading thumbnail…

Untitled

This example visualizes a hierarchical fault tree for a Mars rover mission, showing components like avionics, cameras, and batteries with their potential failure modes. The radial tree layout, rendered as an SVG using D3 v4, positions failure categories and specific faults around a circular structure. Data comes from a CSV file with hierarchical IDs, processed through `d3.stratify` and `d3.tree` to create the node hierarchy. Curved links connect parent-child nodes, with text labels rotated along the circumference to display component names and failure codes.

Feb 14, 2020

Loading thumbnail…

Untitled

A radial tree visualization displays hierarchical operations data, with each node representing a mission phase or component. The layout arranges nodes around a circular structure, using rotated text labels. The code employs `d3.stratify()` to convert flat CSV data into a hierarchy and `d3.tree()` with a custom `project()` function to map Cartesian coordinates to radial positions. Curved link paths connect parent and child nodes, while rendered SVG elements distinguish internal and leaf nodes. The visualization reads from `operations.csv` and uses D3 v4 within a React-based setup.

Feb 10, 2020

Loading thumbnail…

World Countries Tree

This radial tree visualization displays hierarchical data from the `flare` dataset, with nodes positioned in a circular layout and connected by curved links. D3's `tree` layout and `stratify` function compute node positions and hierarchy, while `project` converts coordinates to a polar system. The SVG rendering includes zoom and pan support via `d3.zoom`, and text labels rotate to follow the circular structure.

Feb 10, 2020

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries organized by continent and region, rendered as a horizontal tree layout. The D3.js code uses `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` to compute node positions and draw curved links from the hierarchical JSON data. Each country name appears as SVG text with font size decreasing by depth, while pan and zoom are enabled through `d3.zoom` on the entire SVG group.

Feb 10, 2020