Diagramming XML

Introduction

• Visualizations of some XML constraints using D3.js
• HTML: What loss? What gain?
• Things that are special, things that are precious...

Lachraphagy

When a butterfly drinks from the tears
of a turtle
it is known as

lachraphagy.

A deep sense of loss

• What is an XML document?
• Visualizations and Diagrams
• [Side trip the First: inkscape character-codes.svg and discuss layers starting at lowest]

Trees

• At a higher level we think of an XML file as representing an XML document, and forming a tree.
• Only an element tree: e.g. entities, ID/IDREF, attributes, all have non-tree-like aspects.
• All this is shared with HTML.

Special to XML

• Schemas and Potential Documents
• Optionality of a schema not really shared with SGML.
• Domain-specific schemas not shared with e.g. HTML or JSON.

Nearer my Tag to Thee

Near and D3

Rect version

Village Diagram

Village Diagram With Text

D3 Village

Live version

3D Egg Village

Glossa Ord3naire

D3 Chord

Live version

How are they made?

• XQuery generates JSON
• HTML page creates an SVG diagram and connects it to the JSON data

Thoughts

• It's easy to draw simple diagrams in a Web browser;
• XML schemas (including DTDs) give us lots of ways to present constraints and lots of ways for people to explore structure
• Diagrams can be more fun than useful, but...

From the Scholar Gypsy

From the Scholar Gypsy

That single elm-tree bright
Against the west – I miss it! is it gone?
We prized it dearly; while it stood, we said,
Our friend, the Scholar Gipsy, was not dead;
While the tree lived, he in these fields lived on.

Now is the Winter of my javaScript

A Glimmer of Things To Come

XML is not dead,
but it is time to emerge from the Winter
and be seen in a wider world.