The visualisation below is created with D3.js and ES6. It visualizes the phases that are found in a simple program (see the source code below).

By clicking on a lower grey block the subphases will be shown. If a block is white it means it doesn’t contain any subphases. To go up to the parent the user can click on the smaller block above a phase. Zooming can be done by scrolling with 2 fingers. Dragging is done by click on the visualisation and hold, then drag left or right to move the visualisation.

package io.github.kajdreef;

public class AppSimpleThreads {

	private static final int NUM_THREADS = 5;

	public static void main(String[] args){
		Thread[] t = new Thread[NUM_THREADS];
		for(int i = 0; i < t.length; i++){
			t[i] = new Thread(new ClassThread());
			t[i].start();
		}
	}
}

package io.github.kajdreef;


public class ClassThread implements Runnable{

    @Override
    public void run() {
        for(int i = 0; i < 3; i++){
            System.out.println(i);
        }
    }
}