2014-11-16   web   svg 

自分の作業をざっくり把握するための工夫(JSON + SVG)

背景

問題

解法

[
  // (省略)
  {
    "pwd": "/Users/hyuki/girl",
    "date": "2014-11-14"
  },
  {
    "pwd": "/Users/hyuki/private",
    "date": "2014-11-12"
  },
  {
    "pwd": "/Users/hyuki/girl/note",
    "date": "2014-11-14"
  },
  // (省略)
]
<!DOCTYPE html>
<html>
<body>
<svg width="1000" height="500">
(省略)
<rect x="0" y="0" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="0" width="16" height="16" fill="#6666ff"/>
<rect x="36" y="0" width="16" height="16" fill="#f0f0f0"/>
<rect x="54" y="0" width="16" height="16" fill="#6666ff"/>
<rect x="72" y="0" width="16" height="16" fill="#6666ff"/>
<text x="92" y="14" fill="black" font-family="Verdana" font-size="16" stroke="black">girl</text>
<rect x="0" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="36" y="18" width="16" height="16" fill="#f0f0f0"/>
<rect x="54" y="18" width="16" height="16" fill="#6666ff"/>
<rect x="72" y="18" width="16" height="16" fill="#f0f0f0"/>
<text x="92" y="32" fill="black" font-family="Verdana" font-size="16" stroke="black">girl/note</text>
<rect x="0" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="18" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="36" y="36" width="16" height="16" fill="#6666ff"/>
<rect x="54" y="36" width="16" height="16" fill="#f0f0f0"/>
<rect x="72" y="36" width="16" height="16" fill="#f0f0f0"/>
<text x="92" y="50" fill="black" font-family="Verdana" font-size="16" stroke="black">private</text>
(省略)
</svg>
</body>
</html>

結果

参照

work_hereを作る。

もう少し考えを進める。

work_mapを作る。

追記(2014-11-20)

 2014-11-16   web   svg