A way to transform DITA maps to a JSON representation suitable for consumption by d3.js was recently announced by Eliot Kimber. You can find the source for it in Eliot’s dita-community project repository on Github.

I downloaded the plugin, installed all the required plugins in a DITA-OT tree and ran it on a simple ditamap that I had worked on for a Getting Started Guide for AppSheet. I successfully generated a .json file that looks something like this:

{
"name": "AppSheet User Guide",
"children": [

{ "name": "Concepts",
"children": [

{ "name": "Who should use AppSheet and what apps can it create?",
"size": 4000

},

{ "name": "Why cloud spreadsheets?",
"size": 4000

},

{ "name": "Structure from a spreadsheet",
"size": 4000

},

Collapsible tree visualization

Following the example posted in the d3.js gallery, I was able to create a collapsible tree visualization as shown below. You can scroll using the scrollbar on the right and bottom but it is not possible to pan.

Zoomable Partition Layout visualization

A slightly different visualization is the Zoomable Partition Layout also available in the d3.js gallery.

The same AppSheet table of contents is visualized in the frame below. You can click any of the sections in the middle to expand the sub-sections below. You can scroll using the scrollbar on the right and bottom but it is not possible to pan. One issue with this visualization is that the order of sections is reversed but that can be fixed by correcting the appropriate calculations in the code.

Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing

I then downloaded the source for the example, D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing to see how it would render. One major issue I have with this particular drag and drop, zoomable example is that the nodes are arranged alphabetically sorted so they don’t reflect the true table of contents.

The resulting visualization is shown below.

Dragging can be performed on any node other than root. Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

Zooming is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. To Zoom out hold shift when double-clicking.

Expanding and collapsing of nodes is achieved by clicking on the desired node.

The tree auto-calculates its sizes both horizontally and vertically so it can adapt between many nodes being present in the view to very few whilst making the view managable and pleasing on the eye.

For a second example, I used the Apache Derby Getting Started Guide, the DITA source for which can be downloaded by following instructions available at this page.

Clearly, d3.js and the d3 visualization plugin open up many possibilities for generating many different kinds of visualizations of information contained within DITA maps and DITA topics.

Many thanks to the creator of d3.js, Michael Bostock, the creator of the drag and drop example, Rob Schmuecker and Eliot Kimber for the d3 transtype plugin.

WordPress Login Protected by Clef