FHIR resource graphs


FHIR resources commonly contain references to other resources, creating a network (graph) of resources. FHIR resource graphs can be visualized to highlight the interconnected nature of FHIR data and help identify patterns and potential errors.

You can play with the demo below to visualize your own FHIR data.


FHIR (Fast Healthcare Interoperability Resources) is a standard for exchanging healthcare information electronically. It's now widely adopted and used by many healthcare systems and organizations around the world.

In FHIR, the real-world entities/concepts/business objects such as patients and medications are represented as FHIR resources. The current version of the specification defines over 150 of these resource types.

References in FHIR resources and FHIR resource graphs

Like their real-world counterparts, FHIR resources are connected to each other, and these connections are stored in resources within Reference-typed fields. For example, a Patient can reference a Practitioner using Patient.generalPractitioner, and a MedicationRequest can reference a Medication using MedicationRequest.medication. Intuitively, these references give rise to a resource graph with the resources as nodes and the references as edges.

I'm a big fan of data visualization and enjoy building interactive visualization/exploration tools. Back when I was first exploring the FHIR standard and getting familiar with the FHIR data model, I already started experimenting with visualizing FHIR resource graphs and exploring potential use cases for such visualizations.

I find visualizing FHIR resource graphs to be incredibly useful first and foremost, for demonstrating the model-driven nature of the FHIR standard.

Building the demo

To make it real, I built an interactive demo (see below) that visualizes an example FHIR resource graph from FSH (FHIR Shorthand) content. You can enter your own FHIR data, and the graph will be updated accordingly.

The FHIR data in FSH format.
FHIR resource graph
Use ⌘ + scroll (ctrl + scroll) to zoom the graph
Use two fingers to move the graph

Technical details

For simplicity, the demo accepts the FHIR data in the FSH (FHIR Shorthand) format. FSH compliation happens on the fly in the browser and the produced instances are then visualized as a graph.

I use the d3-force library to arrange the elements of the graph with a static force-directed layout ("the magic auto-layout algorithm").

Both FSH compilation and force simulation run in web workers to avoid blocking the main thread. This makes the UI smooth and responsive but requires a bit of extra work to implement.

You can pan and zoom the graph using the cooperative mouse or touch gestures.

See also

Made by Anton Vasetenkov.

If you want to say hi, you can reach me on LinkedIn or via email. If you like my work, you can support me by buying me a coffee.