Linux Process Tree

100%

Linux Process Tree

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Mar 21, 2014

A hierarchical tree visualizes Linux processes as collapsible nodes, with each circle representing a process and links showing parent-child relationships based on PID/PPID data. The tree uses d3.layout.tree and d3.svg.diagonal for layout and connection paths, while d3.csv loads the process data from a CSV file. Interactive features include click-to-collapse and mouseover tooltips displaying PID, command, user, CPU, and memory values. Nodes animate positions over 750 milliseconds via d3 transitions, with styling defined through SVG circles, text labels, and path links.

AI-generated description

This is a chart as used as an example to demonstrate the relationships between Linux processes as a tree using d3.js.

The nodes can be collapsed (since they tend to get crowded) by clicking on them and they include a tool tip feature to provide additional information about each process. It is used as an example and described in the book D3 Tips and Tricks.

The csv file used here was taken by running the command...

ps -eo pid,ppid,pcpu,size,comm,ruser,s

...and converting the resultant output to a csv file. I manually added the 'start' line (0, ,0,0,start,nul,u) to include the root node and removed the '%' sign from the '%CPU' label to reduce chance of errors. In theory this process of formatting the data file could be automated (indeed, there may be a much better way to gather and include it!).

While I have included a tool tip feature for displaying more data from each node, ultimately, I would have grand visions of this being more useful by encoding the node/link colour according to CPU usage or memory use.

mit Licensed

Similar vizzes

Loading thumbnail…

Linux Process Tree

This interactive visualization presents the Linux process hierarchy as an expandable tree diagram, built with D3.js v3. Each node represents a running process, with links showing parent-child relationships derived from a CSV file generated from the `ps` command. The tree layout organizes processes by depth, with nodes spaced horizontally and vertically to reveal the process hierarchy. Users can click on any node to collapse or expand its subtree, helping to manage the visual density of the many processes. Hovering over a node triggers a tooltip that displays additional process details such as PID, command name, user, CPU usage, and memory size. The visualization uses smooth transitions when nodes expand or collapse, and all interactions are implemented with SVG elements.

663anp3ca

93% match

Loading thumbnail…

computer tree

This interactive tree diagram visualizes a hierarchical dataset of computer components and software modules. Users can click nodes to expand or collapse their children, revealing nested categories like hardware, data converters, and query methods. The visualization uses D3.js v6, rendering as an animated SVG with smooth transitions between states. The tree layout positions nodes horizontally, with links drawn as diagonal paths connecting parent and child elements. The code employs fundamental D3 methods including `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and `d3.zoom` to handle layout, interaction, and viewport control.

Jjody-otbi

71% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays a hierarchical dataset with a single root node and two levels of children. Clicking any parent node collapses its subtree, and clicking again expands it. The visualization is built with D3.js version 3.5.17, using `d3.layout.tree` and `d3.svg.diagonal` to compute and draw the layout as SVG elements. Animated transitions, controlled by `node.transition` and a 750-millisecond duration, smoothly move nodes and links between states. The example is adapted from Mike Bostock’s collapsible tree and uses hardcoded JavaScript data.

Dd3noob

71% match

Loading thumbnail…

Tree Example

This example shows an interactive tree diagram with collapsible nodes, where clicking a node expands or collapses its children, and hovering reveals a temporary “More info” label. The visualization uses the D3.js v3 layout `d3.layout.tree` to position nodes and `d3.svg.diagonal` to draw curved link paths, rendered as SVG. Animated transitions update node positions via `transition().duration()`, while the dataset is a small hardcoded hierarchy with a single top parent and nested descendants. Mouseover events trigger text appending and removal directly on SVG groups.

PPandaRider

70% match

Loading thumbnail…

Tree Example

This tree diagram shows a hierarchical dataset with collapsible nodes, where clicking a parent node hides or reveals its children with animated transitions. The visualization uses D3.js v3’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` for curved links, rendered as SVG elements. Node and link styling are defined via CSS classes, and the `update` function handles enter, update, and exit transitions with a 750ms duration. The static sample data includes a top-level node with two second-level branches, demonstrating the interactive expand/collapse behavior.

663anp3ca

70% match

Loading thumbnail…

computer tree

This interactive tree diagram illustrates the hierarchical structure of computer systems, covering components like the CPU, memory, networks, and hardware/software divisions. The visualization uses D3.js (v3) with a collapsible node layout, where users can click nodes to expand or collapse branches. The SVG rendering includes animated transitions for nodes and links, displaying Arabic text labels alongside English terms, while the population data from data.csv remains unused in this specific visualization.

Jjody-otbi

70% match

Loading thumbnail…

Fork of computer tree

This example shows an interactive, animated tree diagram of computer-related terms, including hardware, software, CPU components, and Arabic-labeled network concepts. The visualization uses D3.js version 3.5 to create and update hierarchical nodes, with click handlers to expand or collapse branches. SVG circles and text represent each node, while diagonal links connect parent and child elements. The layout uses `d3.layout.tree` and fixed-depth spacing, with transitions animating nodes from their parent’s previous position over 750 milliseconds. The data is embedded directly in the code as a JavaScript array.

UUmarani Vemula

70% match

Loading thumbnail…

Tree Example

This example shows a collapsible hierarchical tree diagram using D3 v3. Nodes representing a small family dataset appear as white circles with steelblue outlines, connected by curved gray links, and labeled with names. Clicking a node toggles its children, animating the tree’s layout transitions over 750 milliseconds. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and SVG-based rendering, with enter, update, and exit selections to handle dynamic node and link changes.

PPandaRider

70% match