AppMap as a D3 Force-Directed Graph

The AppMap framework specifies a simple-to-work-with data format that can be readily visualized in popular OSS libraries such as the D3. This example demonstrates how to programmatically parse an event stream in a recorded AppMap JSON file and how to visualize the dynamic dependencies between classes in a D3 force-directed graph.

Check out the D3 graph »

Components used

This example demonstrates use of AppMaps generated by appmap-ruby and appmap-java trace recorders.


The example loads AppMaps that were recorded for the OSS gallery. The source code lists a few additional AppMap URLs for Java and Ruby OSS applications that can be quickly displayed in place of the default map. The graph is rendered with the D3 library and offers endless customization opportunities.

Data sources

The example uses AppMap data recorded from the open source application Discourse, which is a “100% open source discussion platform built for the next decade of the Internet.” The data used in this example was recorded from a Discourse test case using the appmap-ruby client, and uploaded to the AppLand sandbox. The recorded scenario data is freely downloadable.

To obtain the download URL for any scenario in the AppLand sandbox, click Properties and then find the Raw data link:

The Auto-generated component diagram shows how to visualize AppMaps with an open source javascript diagram library.

The Querying data in AppMaps example demonstrates how to process AppMap files with an open source javascrip data model library.

« Back to the code gallery