I'm working on a web site that visualizes the relationship between some data. Specifically, it helps map hard drives, partitions, and logical volumes (LVM). I have written the parts that gather and structure the data, resulting in a data model that looks like Picture 1. What I'd like to do is visualize it like Picture 2, where logical volumes rest on top of the logical drives that back them. Logical drives rest atop the physical volumes (drives or partitions) that back them, and of course physical partitions rest upon the physical drives they reside on.

Ideally I wouldn't have to tell the library where to place anything, only the relationships between the data and what sort of visualization I want.

What library would be able to render the visualization as picture 2?

(Picture 1) Logical layout of data

(Picture 2)
Desired visualization of the data


I believe you can achieve what you want using D3.js. It is a Javascript library for creating advanced (beyond charts) visualizations for the web.

The kind of visualization you are looking for is a treemap & here is an example of it in D3.

enter image description here

D3 being an advanced library has a somewhat steep learning curve so you may find this book useful in learning it. You can buy the book or download the ebook for free.

  • The treemap diagram is 95% of the way to what I am searching for. It really encompasses the proportional-size visualization. What it was missing however was the hierarchical aspect. Thankfully, the D3 wiki page for treemaps linked to the Partition Layout, which I think is exactly what I am looking for. * github.com/mbostock/d3/wiki/Partition-Layout – Huckle Dec 31 '14 at 6:07
  • The Partition Layout, however, is a strict hierarchy. Since my layout is a forest instead of a tree I might need to work around that. Maybe I can bend D3 to my will, maybe I can use two trees (one inverted) such that the roots are shared between trees. – Huckle Dec 31 '14 at 6:11

Here are a few JavaScript Libraries that can get the job done:

Springy.js(Free, Simple, Open-source)
Opinion: Great for beginners, makes use of Canvas, WebGl and SVG technology.

Raphael.js(Free, More Advanced, Open-source)

If you are not satisfied with this answer take a look at the link below it talks about both of these libraries in greater detail.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.