See it running at http://bl.ocks.org/3531350
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <style> | |
| body { text-align: center; margin: auto; } | |
| p.source { font-style: italic; } | |
| a { color: blue; } | |
| svg { | |
| display: block; | |
| margin: auto; | |
| } | |
| rect { | |
| fill: none; | |
| stroke: #fff; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .bucket { | |
| float:left; | |
| } | |
| #bucket1, #bucket2, #bucket3 { | |
| width: 240px; | |
| height: 400px; | |
| margin: 30px; | |
| background: #bbb; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bucket"> | |
| <h3> | |
| In Progress | |
| </h3> | |
| <div height="500px" width="240px" id="bucket1"> | |
| <svg> | |
| <g> | |
| <g transform="translate(115,0)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="71" width="56"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5"> | |
| T-024 | |
| </text> | |
| </g> | |
| <g transform="translate(172,0)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="67"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="34"> | |
| T-015 | |
| </text> | |
| </g> | |
| <g transform="translate(0,21)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="34" width="57"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="17.5" x="29"> | |
| T-025 | |
| </text> | |
| </g> | |
| <g transform="translate(0,0)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="20" width="57"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="10.5" x="29"> | |
| T-052 | |
| </text> | |
| </g> | |
| <g transform="translate(0,98)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="41" width="57"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29"> | |
| T-060 | |
| </text> | |
| </g> | |
| <g transform="translate(58,127)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="69" width="103"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="35" x="52"> | |
| T-062 | |
| </text> | |
| </g> | |
| <g transform="translate(162,72)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="124" width="77"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="62.5" x="39"> | |
| T-067 | |
| </text> | |
| </g> | |
| <g transform="translate(0,140)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="56" width="57"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="28.5" x="29"> | |
| T-068 | |
| </text> | |
| </g> | |
| <g transform="translate(58,0)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="56"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5"> | |
| T-095 | |
| </text> | |
| </g> | |
| <g transform="translate(58,72)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="54" width="103"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="27.5" x="52"> | |
| T-0103 | |
| </text> | |
| </g> | |
| <g transform="translate(0,56)" class="cell"> | |
| <rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="41" width="57"> | |
| </rect> | |
| <text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29"> | |
| T-0145 | |
| </text> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment