Visualization of hierarchies 

Published

When working with complex data structures with a lot of nesting, visualizations can help you get an overview of the data hierarchy. Here, I'll show how I created a tree, graph, and sunburst chart to explore the XML-structure of eForms. You don't need prior knowledge of eForms or XML to understand the process of creating the visualizations.

eForms are standardized digital forms used by public bodies in the EU/EEA for publishing procurement notices on Tenders Electronic Daily (TED). The notices are available on TED as XML documents. The metadata in fields.json (from OP-TED's eForms-SDK) contains the array xmlStructure describing each of the XML elements in these documents. In the two notebooks below, this array is used to create the visualizations.

More about eForms

When the public sector in the EU/EEA buys goods or services for a value above a certain threshold, they must publish information about the procurement (buying) process on Tenders Electronic Daily (TED), which is a website (online journal) for public procurement notices. To publish procurement notices on TED, public bodies fills out standardized digital forms made by the EU, called eForms. Notices (completed eForms) are stored in XML-format and are publicly available on TED.

Read more about eForms at the European Commission's site about eForms.

Graph and tree with d3blocks

Here, I use d3blocks to create a graph and tree chart:

Show notebook
  • 💡 Click and drag to navigate the graph
  • 💡 Hover over and scroll to zoom
  • 💡 Click and drag to navigate the tree
  • 💡 Hover over and scroll to zoom
  • 💡 Click on a node to collapse its sub-branches

Sunburst Chart with Plotly

An alternative approach to visualizing hierarchies is by creating a sunburst chart. Here, I have done just that using Plotly's sunburst chart.

Show notebook
  • 💡 Click on an element, and the chart will update - showing only the selected element and its children.
  • 💡 Click on the central element to navigate back one level.