graph tree | Python Fiddle

# coding: utf-8
# 四角の縦幅
recth = 30
# 四角の横幅
rectw = 150
# 四角の縦間隔
rectvm = 5
# 四角の横間隔
recthm = 100
# 各要素のコードと表示ラベルのマッピング
elements = {
            1: u'マグロ',
            2: u'イカ',
            3: u'たこ',
            4: u'こはだ',
            5: u'はまち',
            6: u'サーモン',
            7: u'かつお',
            8: u'たい',
            9: u'えんがわ',
            10: u'あじ',
            11: u'〆さば',
            12: u'いくら',
            13: u'うに',
            14: u'あわび',
            15: u'たまご'
            }
# 各要素のコードとパーセンタイル（25%未満、25%以上、75%以上）のマッピング
percentiles = {
               1: 'gte25',
               2: 'gte75',
               3: 'gte25',
          	   4: 'gte25',
               5: 'gte25',
               6: 'gte25',
               7: 'gte75',
               8: 'gte25',
               9: 'lt25',
               10: 'gte25',
               11: 'gte25',
               12: 'gte25',
               13: 'lt25',
               14: 'gte25',
               15: 'gte25'
               }
# 各要素のコードとそのグリッド位置（配列そのまんま）
grid_positions = [
                  [1, 2],
                  [None, 3],
                  [None, 4],
                  [5, 6, 7],
                  [None, 8, 9],
                  [None, 10, 11],
                  [None, 12, 13],
                  [None, 14, 15]
                  ]
# 各要素間の接続（コード（リスト）のタプル（start, end））
connections = [
               (1, [2, 3, 4]),
               (5, [6, 8, 10, 12, 14]),
               ([6, 8], 7),
               (12, [9, 11, 13]),
               (14, 15)
               ]
# ここから下は共通コード（になるはず）
cordinates = {}

html = """
<style>
  .lt25 {
    fill: blue;
  }
  .gte25 {
    fill: yellow;
  }
  .gte75 {
    fill: red;
  }
  .pn {
    fill: lightgrey;
  }
  .rt {
    text-anchor: middle;
  }
  .l {
    stroke: lightgrey;
    stroke-width: 2;
    stroke-linecap: round;
  }
</style>
"""

rects_html = ""
for i in range(len(grid_positions)):
  for j in range(len(grid_positions[i])):
    ecd = grid_positions[i][j]
    if ecd:
      rects_html += "<g>"
      rects_html += "<rect y='{0}' x='{1}' height='{2}' width='{3}' class='{4}' />".format(i * (recth + rectvm), j * (rectw + recthm), recth, rectw, percentiles.get(ecd, 'pn'))
      rects_html += "<text y='{0}' x='{1}' class='rt' dy='0.3em' ecd='{3}'>{2}</text>".format(i * (recth + rectvm) + recth / 2, j * (rectw + recthm) + rectw / 2, elements.get(ecd, ''), ecd)
      rects_html += "</g>"
      cordinates[ecd] = (i * (recth + rectvm), j * (rectw + recthm))

lines_html = ""
for connection in connections:
  for start in [connection[0]] if isinstance(connection[0], int) else connection[0]:
    for end in [connection[1]] if isinstance(connection[1], int) else connection[1]:
      if start in cordinates and end in cordinates:
        lines_html += "<line y1='{0}' x1='{1}' y2='{2}' x2='{3}' class='l' />".format(
            cordinates[start][0] + recth / 2,
            cordinates[start][1] + rectw,
            cordinates[end][0] + recth / 2,
            cordinates[end][1])

html += "<svg height='600' width='1000'>"
html += rects_html
html += lines_html
html += u"""
</svg>
<script>
  // http://pythonfiddle.com/さんが、jquery1.6を使ってるようなので、それを使わせてもらう。
  $('.rt').click(function() {
    window.alert($(this).attr('ecd') + ':' + $(this).text() +  'がクリックされました。');
  });
</script>

"""
print(html)

Python Fiddle

Python Cloud IDE