Monday, 19 February 2007

Periodic table of Visualization Methods has published this great Periodic Table of methods of visualisation. This displays around 100 diagram types, with examples and a multi-faceted classification by:
  • simple to complex
  • data/information/concept/strategy/metaphor/compound
  • process/structure
  • detail/overview
  • divergence/convergence
The web page uses a Javascript library to display an example of a diagram type when you mouse-over its box. A neat trick but perhaps not very accessible, so I took the liberty of massaging this table to create a full listing of all the diagram types in alphabetical order. This format is more convenient for my purpose when teaching, and is a nice example of XML-scraping using XQuery.

These listings are made by:
  1. taking the HTML source of the Periodic table
  2. loading it into the eXist database. The source is accepted by eXist even though it is not well formed XML - missing quotes, bare <>
  3. writing a query on XQuery to generate the page.
    1. Find the html document with 'Periodic' in the title
    2. Find all the A tags,
    3. Get the onmouseover attribute
    4. use some string functions to get the name and the source of the image from this string
    5. sort by name
    6. generate a div per tag
Here is the basic XQuery script for the plain listing:

List of methods

for $item in data(/HTML[contains(.//TITLE,'Periodic')]//A/@onmouseover)
let $name := lower-case(substring-before(substring-after($item,"window.status='"),"';"))
let $pix := substring-before(substring-after($item,'src="'),'">')
where string-length($pix) >0
order by $name
<div><a href="'{$pix}'">{$name}</a>

In fact, instead of running a query against the raw HTML, I wrote a slightly different query to generate a simple XML file in which the basic data was stored in alphabetical order. Using an intermediate file also allow me to correct a couple of typos in the method names, and of course it is faster to generate the page. In addition, I've added the facility for a user to group methods and tag the group. Some links to Google images and Wikipedia have been added too. There's a lot more could be done with this.

Now what would be nice would be to get the raw data including the class names as XML so it could be re-organised and extended, without having to descend to scraping.


Ralph said...

Hi Chris,

your implementation put a big smile on my face.

Even though I still think that just showing the visualization methods in alphabetical order is (visually) less effective, I see great merit in your "show/hide images" method. As this allows you to print out a selection of examplary pictures.

thanx for the add-on.

mike said...

Hi Chris,
Great stuff, thanks for your work. I'm a free-lance consultant looking for the right program/shareware that allows me to pick the method of visualization, enter my stuff and move on. Can't afford to spend hours constructing the wheel each time. I realize that to 'mind map' I have to purchase/use proprietary program. Please advise.

LWDiener said...

To Mike:

There are (at least) two excellent mind map applications that are free.

Check out CmapTools and FreeMind

Both are excellent mapping tools.


chris wallace said...

I missed these posts going up - thanks for the interest. They suggest to me that it would be useful to add links to programs which support each visualisation. I'll do that when I've some time.

alf said...


I have used the "List with show/hide images" link successfully a few days ago
and kept the address to print and use the page later,
but it doesn't seem to work now, with none of my 3 navigators (FireFox, IE, Opera).
FireFox says that this file does not seem to have style informations associated to it.
Is there something to fix, or did I miss something ?...

chris wallace said...


I'm sorry I missed your comment - an update to the demo server version changed the mime type default to text/xml which is why it now fails - I'll move it to a different server as soon as I can.

chris wallace said...

Scripts now fixed - still running on eXists demo server.

Anonymous said...

Hi Chris
I would really like to be able to print out the mouse over images but when i try to access your page I get the message" HTTP ERROR: 404
Document //db/chriswallace/pt/showAll.xql not found
RequestURI=/rest//db/chriswallace/pt/showAll.xql "
Can you help me?

chris wallace said...


Links now moved to point to my own server. Hope that works for you now.


Anonymous said...


Thank you for your post. Just a question: Have you noticed that your list of pictures has missed one of them -Learning Map? It would be interesting to get such a figure in order to complete the periodic table.


chris wallace said...

Well spotted Manuel! Fixed.

Gretchen said...

Hey, Chris, Happy New Year!

I am getting server errors trying to use the links to your wonderful work. They say the site is either down for service or that the traffic volume is too high. Please help, I am crazy for the info! Thanks, so much.

K Stoneman said...

Chris -

Thanks for doing this. Is there an easy way to print alll of the methods? I'm looking to put them in a notebook for easy reference.

K Stoneman