Last active
July 10, 2018 10:13
-
-
Save bholloway/c0d38de2f7bbfb4953b6a74345e6da05 to your computer and use it in GitHub Desktop.
Sankey Labels: JS Bin// source https://jsbin.com/kehucuy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| font-size: 2rem; | |
| } | |
| .labels { | |
| width: 30%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-content: stretch; | |
| } | |
| .labels > div { | |
| border: solid 1px #aaa; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .labels > div + div { | |
| margin-top: 0.2em; | |
| } | |
| .left > div { | |
| flex-direction: row; | |
| } | |
| .right > div { | |
| flex-direction: row-reverse; | |
| } | |
| span.size { | |
| width: 0.4em; | |
| background-color: #888; | |
| } | |
| .a span.size { | |
| height: 3em; | |
| } | |
| .b span.size, | |
| .e span.size { | |
| height: 2em; | |
| } | |
| .c span.size { | |
| height: 1em; | |
| } | |
| .d span.size { | |
| height: 0.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="labels left"> | |
| <div class="a"> | |
| <span>A</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="b"> | |
| <span>B<br/>B</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="c"> | |
| <span>C<br/>C<br/>C</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="d"> | |
| <span>D<br/>D</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="e"> | |
| <span>other</span> | |
| <span class="size"/> | |
| </div> | |
| </div> | |
| <div class="labels right"> | |
| <div class="a"> | |
| <span>A<br/>A<br/>A</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="b"> | |
| <span>B</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="c"> | |
| <span>C<br/>C</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="d"> | |
| <span>D<br/>D</span> | |
| <span class="size"/> | |
| </div> | |
| <div class="e"> | |
| <span>other</span> | |
| <span class="size"/> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">.container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| font-size: 2rem; | |
| } | |
| .labels { | |
| width: 30%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-content: stretch; | |
| } | |
| .labels > div { | |
| border: solid 1px #aaa; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .labels > div + div { | |
| margin-top: 0.2em; | |
| } | |
| .left > div { | |
| flex-direction: row; | |
| } | |
| .right > div { | |
| flex-direction: row-reverse; | |
| } | |
| span.size { | |
| width: 0.4em; | |
| background-color: #888; | |
| } | |
| .a span.size { | |
| height: 3em; | |
| } | |
| .b span.size, | |
| .e span.size { | |
| height: 2em; | |
| } | |
| .c span.size { | |
| height: 1em; | |
| } | |
| .d span.size { | |
| height: 0.5em; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| font-size: 2rem; | |
| } | |
| .labels { | |
| width: 30%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-content: stretch; | |
| } | |
| .labels > div { | |
| border: solid 1px #aaa; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .labels > div + div { | |
| margin-top: 0.2em; | |
| } | |
| .left > div { | |
| flex-direction: row; | |
| } | |
| .right > div { | |
| flex-direction: row-reverse; | |
| } | |
| span.size { | |
| width: 0.4em; | |
| background-color: #888; | |
| } | |
| .a span.size { | |
| height: 3em; | |
| } | |
| .b span.size, | |
| .e span.size { | |
| height: 2em; | |
| } | |
| .c span.size { | |
| height: 1em; | |
| } | |
| .d span.size { | |
| height: 0.5em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment