Created
May 16, 2019 18:50
-
-
Save sliminality/4b50404e71354c307665a22231718dcd to your computer and use it in GitHub Desktop.
LTv2 Diagrams // source https://jsbin.com/galebud
This file contains hidden or 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
| <style id="jsbin-css"> | |
| :root { | |
| --color-dark: #333030; | |
| --color-dark-grey: #9e9e9e; | |
| --color-grey: #bec6ce; | |
| --color-red: #f7b9b9; | |
| --color-purple: #e0c6f4; | |
| --color-blue: #bae2f4; | |
| --color-yellow: #fcf8a4; | |
| --color-magenta: #fc11b6; | |
| --spacing-chunk: 4px; | |
| --spacing-annotation-distance: 50px; | |
| --spacing-annotation-whisker: 4px; | |
| --spacing-conversion-distance-collapsed: 40px; | |
| --spacing-conversion-distance: 95px; | |
| --spacing-conversion-offset: 10px; | |
| } | |
| html { | |
| background: white; | |
| font-family: Menlo; | |
| font-size: 14px; | |
| line-height: 1.45; | |
| color: var(--color-dark); | |
| } | |
| pre { | |
| margin: 5px; | |
| } | |
| pre, code { | |
| font-family: Menlo; | |
| } | |
| body { | |
| height: 100vh; | |
| width: 100vw; | |
| margin: 0; | |
| } | |
| .bar { | |
| display: inline-flex; | |
| height: 30px; | |
| position: relative; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .chunk { | |
| border-radius: 3px; | |
| margin-left: var(--spacing-chunk); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .chunk:first-child { margin-left: 0; } | |
| .chunk:nth-child(n+1) { background: var(--color-red); } | |
| .chunk:nth-child(n+2) { background: var(--color-purple); } | |
| .chunk:nth-child(n+3) { background: var(--color-blue); } | |
| .chunk-1 { min-width: 150px; } | |
| .chunk-2 { min-width: 300px; } | |
| .chunk-3 { min-width: 180px; } | |
| /********************************************* | |
| * Annotations | |
| *********************************************/ | |
| .annotation { | |
| position: absolute; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 12px; | |
| width: 230px; | |
| top: 100%; | |
| opacity: 0; | |
| transition: opacity 0.2s ease-in; | |
| } | |
| .chunk:nth-child(2) .annotation { | |
| transition-delay: 0.5s; | |
| } | |
| .chunk:nth-child(3) .annotation { | |
| transition-delay: 1s; | |
| } | |
| .start-time { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| color: var(--color-dark-grey); | |
| opacity: 0; | |
| } | |
| .annotation::before | |
| { | |
| content: ""; | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-grey); | |
| position: relative; | |
| z-index: -1; | |
| height: var(--spacing-annotation-distance); | |
| margin: var(--spacing-annotation-whisker) 0; | |
| } | |
| .activity { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| margin-bottom: 2px; | |
| } | |
| .content span::after { | |
| content: " > "; | |
| color: var(--color-dark-grey); | |
| } | |
| .content > div:last-of-type span::after { | |
| content: ""; | |
| } | |
| .annotation .highlight, | |
| .annotation pre .highlighted { | |
| background: var(--color-yellow); | |
| } | |
| /********************************************* | |
| * Conversions | |
| *********************************************/ | |
| .conversions { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| } | |
| .conversion { | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * -1); | |
| bottom: 100%; | |
| /* font-weight: bold; */ | |
| transition: opacity 0.2s ease-in; | |
| /* opacity: 0; */ | |
| } | |
| .conversion-2 { | |
| transition-delay: 0.6s; | |
| } | |
| .conversion-3 { | |
| transition-delay: 1.2s; | |
| } | |
| .conversion-4 { | |
| transition-delay: 1.8s; | |
| } | |
| .conversion pre { | |
| font-weight: normal; | |
| opacity: 1; | |
| height: auto; | |
| transition: opacity 0.2s ease-in, height 0.2s ease-in; | |
| transition-delay: 0.5s; | |
| } | |
| .conversion::after { | |
| content: ""; | |
| margin-left: var(--spacing-conversion-offset); | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-magenta); | |
| height: var(--spacing-conversion-distance); | |
| margin-top: var(--spacing-annotation-whisker); | |
| margin-bottom: var(--spacing-annotation-whisker); | |
| transition: height 0.2s ease-in; | |
| } | |
| .conversion:nth-child(2n) { | |
| left: 47%; | |
| } | |
| .conversion pre { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * 1.5); | |
| } | |
| /* Animations */ | |
| /* .conversion::after { | |
| height: var(--spacing-conversion-distance-collapsed); | |
| transition-delay: 0.5s; | |
| } | |
| .conversion pre { | |
| opacity: 0; | |
| height: 0; | |
| transition-delay: 0; | |
| } */ | |
| </style> | |
| <meta name="description" content="LTv2 Diagrams"> | |
| <div class="bar"> | |
| <div class="chunk chunk-1">3 min | |
| <div class="conversions"> | |
| <div class="conversion conversion-1">pageview_concept | |
| <pre class="highlighted">kind: Topic | |
| domain: x7a488390 | |
| course: xcf876fe7 | |
| unit: xe8002e2d</pre> | |
| </div> | |
| </div> | |
| <div class="annotation"> | |
| <div class="activity">Navigating</div> | |
| <div class="content"> | |
| <div><span class="highlight">Math</span></div> | |
| <div><span class="highlight">Algebra</span></div> | |
| <div><span class="highlight">Functions</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chunk chunk-2">7 min | |
| <div class="conversions"> | |
| <div class="conversion conversion-2">started_problem | |
| <pre><span class="highlighted">kind: Exercise</span> | |
| domain | |
| course | |
| unit | |
| <span class="highlighted">contentId: 3030</span></pre> | |
| </div> | |
| <div class="conversion conversion-3">click_check_answer | |
| <pre>kind | |
| domain | |
| course | |
| unit | |
| contentId</pre> | |
| </div> | |
| </div> | |
| <div class="annotation"> | |
| <div class="activity">PRACTICING</div> | |
| <div class="content"> | |
| <div><span>Math</span></div> | |
| <div><span>Algebra</span></div> | |
| <div><span>Functions</span></div> | |
| <div><span class="highlight">Evaluate functions</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chunk chunk-3">5 min | |
| <div class="conversions"> | |
| <div class="conversion conversion-4">video_log_client | |
| <pre><span class="highlighted">kind: Video</span> | |
| domain | |
| course | |
| unit | |
| <span class="highlighted">contentId: x4edf0df7</span></pre> | |
| </div> | |
| </div> | |
| <div class="annotation"> | |
| <div class="activity">WATCHING</div> | |
| <div class="content"> | |
| <div><span>Math</span></div> | |
| <div><span>Algebra</span></div> | |
| <div><span>Functions </span></div> | |
| <div><span class="highlight">What is a function?</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"><meta name="description" content="LTv2 Diagrams"> | |
| .bar | |
| .chunk.chunk-1 3 min | |
| .conversions | |
| .conversion.conversion-1 pageview_concept | |
| pre.highlighted. | |
| kind: Topic | |
| domain: x7a488390 | |
| course: xcf876fe7 | |
| unit: xe8002e2d | |
| .annotation | |
| .activity Navigating | |
| .content | |
| div | |
| span.highlight Math | |
| div | |
| span.highlight Algebra | |
| div | |
| span.highlight Functions | |
| .chunk.chunk-2 7 min | |
| .conversions | |
| .conversion.conversion-2 started_problem | |
| pre. | |
| #[span(class="highlighted") kind: Exercise] | |
| domain | |
| course | |
| unit | |
| #[span(class="highlighted") contentId: 3030] | |
| .conversion.conversion-3 click_check_answer | |
| pre. | |
| kind | |
| domain | |
| course | |
| unit | |
| contentId | |
| .annotation | |
| .activity PRACTICING | |
| .content | |
| div | |
| span Math | |
| div | |
| span Algebra | |
| div | |
| span Functions | |
| div | |
| span.highlight Evaluate functions | |
| .chunk.chunk-3 5 min | |
| .conversions | |
| .conversion.conversion-4 video_log_client | |
| pre. | |
| #[span(class="highlighted") kind: Video] | |
| domain | |
| course | |
| unit | |
| #[span(class="highlighted") contentId: x4edf0df7] | |
| .annotation | |
| .activity WATCHING | |
| .content | |
| div | |
| span Math | |
| div | |
| span Algebra | |
| div | |
| span Functions | |
| div | |
| span.highlight What is a function?</script> | |
| <script id="jsbin-source-css" type="text/css">:root { | |
| --color-dark: #333030; | |
| --color-dark-grey: #9e9e9e; | |
| --color-grey: #bec6ce; | |
| --color-red: #f7b9b9; | |
| --color-purple: #e0c6f4; | |
| --color-blue: #bae2f4; | |
| --color-yellow: #fcf8a4; | |
| --color-magenta: #fc11b6; | |
| --spacing-chunk: 4px; | |
| --spacing-annotation-distance: 50px; | |
| --spacing-annotation-whisker: 4px; | |
| --spacing-conversion-distance-collapsed: 40px; | |
| --spacing-conversion-distance: 95px; | |
| --spacing-conversion-offset: 10px; | |
| } | |
| html { | |
| background: white; | |
| font-family: Menlo; | |
| font-size: 14px; | |
| line-height: 1.45; | |
| color: var(--color-dark); | |
| } | |
| pre { | |
| margin: 5px; | |
| } | |
| pre, code { | |
| font-family: Menlo; | |
| } | |
| body { | |
| height: 100vh; | |
| width: 100vw; | |
| margin: 0; | |
| } | |
| .bar { | |
| display: inline-flex; | |
| height: 30px; | |
| position: relative; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .chunk { | |
| border-radius: 3px; | |
| margin-left: var(--spacing-chunk); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .chunk:first-child { margin-left: 0; } | |
| .chunk:nth-child(n+1) { background: var(--color-red); } | |
| .chunk:nth-child(n+2) { background: var(--color-purple); } | |
| .chunk:nth-child(n+3) { background: var(--color-blue); } | |
| .chunk-1 { min-width: 150px; } | |
| .chunk-2 { min-width: 300px; } | |
| .chunk-3 { min-width: 180px; } | |
| /********************************************* | |
| * Annotations | |
| *********************************************/ | |
| .annotation { | |
| position: absolute; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 12px; | |
| width: 230px; | |
| top: 100%; | |
| opacity: 0; | |
| transition: opacity 0.2s ease-in; | |
| } | |
| .chunk:nth-child(2) .annotation { | |
| transition-delay: 0.5s; | |
| } | |
| .chunk:nth-child(3) .annotation { | |
| transition-delay: 1s; | |
| } | |
| .start-time { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| color: var(--color-dark-grey); | |
| opacity: 0; | |
| } | |
| .annotation::before | |
| { | |
| content: ""; | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-grey); | |
| position: relative; | |
| z-index: -1; | |
| height: var(--spacing-annotation-distance); | |
| margin: var(--spacing-annotation-whisker) 0; | |
| } | |
| .activity { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| margin-bottom: 2px; | |
| } | |
| .content span::after { | |
| content: " > "; | |
| color: var(--color-dark-grey); | |
| } | |
| .content > div:last-of-type span::after { | |
| content: ""; | |
| } | |
| .annotation .highlight, | |
| .annotation pre .highlighted { | |
| background: var(--color-yellow); | |
| } | |
| /********************************************* | |
| * Conversions | |
| *********************************************/ | |
| .conversions { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| } | |
| .conversion { | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * -1); | |
| bottom: 100%; | |
| /* font-weight: bold; */ | |
| transition: opacity 0.2s ease-in; | |
| /* opacity: 0; */ | |
| } | |
| .conversion-2 { | |
| transition-delay: 0.6s; | |
| } | |
| .conversion-3 { | |
| transition-delay: 1.2s; | |
| } | |
| .conversion-4 { | |
| transition-delay: 1.8s; | |
| } | |
| .conversion pre { | |
| font-weight: normal; | |
| opacity: 1; | |
| height: auto; | |
| transition: opacity 0.2s ease-in, height 0.2s ease-in; | |
| transition-delay: 0.5s; | |
| } | |
| .conversion::after { | |
| content: ""; | |
| margin-left: var(--spacing-conversion-offset); | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-magenta); | |
| height: var(--spacing-conversion-distance); | |
| margin-top: var(--spacing-annotation-whisker); | |
| margin-bottom: var(--spacing-annotation-whisker); | |
| transition: height 0.2s ease-in; | |
| } | |
| .conversion:nth-child(2n) { | |
| left: 47%; | |
| } | |
| .conversion pre { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * 1.5); | |
| } | |
| /* Animations */ | |
| /* .conversion::after { | |
| height: var(--spacing-conversion-distance-collapsed); | |
| transition-delay: 0.5s; | |
| } | |
| .conversion pre { | |
| opacity: 0; | |
| height: 0; | |
| transition-delay: 0; | |
| } */</script> |
This file contains hidden or 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
| :root { | |
| --color-dark: #333030; | |
| --color-dark-grey: #9e9e9e; | |
| --color-grey: #bec6ce; | |
| --color-red: #f7b9b9; | |
| --color-purple: #e0c6f4; | |
| --color-blue: #bae2f4; | |
| --color-yellow: #fcf8a4; | |
| --color-magenta: #fc11b6; | |
| --spacing-chunk: 4px; | |
| --spacing-annotation-distance: 50px; | |
| --spacing-annotation-whisker: 4px; | |
| --spacing-conversion-distance-collapsed: 40px; | |
| --spacing-conversion-distance: 95px; | |
| --spacing-conversion-offset: 10px; | |
| } | |
| html { | |
| background: white; | |
| font-family: Menlo; | |
| font-size: 14px; | |
| line-height: 1.45; | |
| color: var(--color-dark); | |
| } | |
| pre { | |
| margin: 5px; | |
| } | |
| pre, code { | |
| font-family: Menlo; | |
| } | |
| body { | |
| height: 100vh; | |
| width: 100vw; | |
| margin: 0; | |
| } | |
| .bar { | |
| display: inline-flex; | |
| height: 30px; | |
| position: relative; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .chunk { | |
| border-radius: 3px; | |
| margin-left: var(--spacing-chunk); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .chunk:first-child { margin-left: 0; } | |
| .chunk:nth-child(n+1) { background: var(--color-red); } | |
| .chunk:nth-child(n+2) { background: var(--color-purple); } | |
| .chunk:nth-child(n+3) { background: var(--color-blue); } | |
| .chunk-1 { min-width: 150px; } | |
| .chunk-2 { min-width: 300px; } | |
| .chunk-3 { min-width: 180px; } | |
| /********************************************* | |
| * Annotations | |
| *********************************************/ | |
| .annotation { | |
| position: absolute; | |
| left: 0; | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 12px; | |
| width: 230px; | |
| top: 100%; | |
| opacity: 0; | |
| transition: opacity 0.2s ease-in; | |
| } | |
| .chunk:nth-child(2) .annotation { | |
| transition-delay: 0.5s; | |
| } | |
| .chunk:nth-child(3) .annotation { | |
| transition-delay: 1s; | |
| } | |
| .start-time { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 0; | |
| color: var(--color-dark-grey); | |
| opacity: 0; | |
| } | |
| .annotation::before | |
| { | |
| content: ""; | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-grey); | |
| position: relative; | |
| z-index: -1; | |
| height: var(--spacing-annotation-distance); | |
| margin: var(--spacing-annotation-whisker) 0; | |
| } | |
| .activity { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| margin-bottom: 2px; | |
| } | |
| .content span::after { | |
| content: " > "; | |
| color: var(--color-dark-grey); | |
| } | |
| .content > div:last-of-type span::after { | |
| content: ""; | |
| } | |
| .annotation .highlight, | |
| .annotation pre .highlighted { | |
| background: var(--color-yellow); | |
| } | |
| /********************************************* | |
| * Conversions | |
| *********************************************/ | |
| .conversions { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| } | |
| .conversion { | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * -1); | |
| bottom: 100%; | |
| /* font-weight: bold; */ | |
| transition: opacity 0.2s ease-in; | |
| /* opacity: 0; */ | |
| } | |
| .conversion-2 { | |
| transition-delay: 0.6s; | |
| } | |
| .conversion-3 { | |
| transition-delay: 1.2s; | |
| } | |
| .conversion-4 { | |
| transition-delay: 1.8s; | |
| } | |
| .conversion pre { | |
| font-weight: normal; | |
| opacity: 1; | |
| height: auto; | |
| transition: opacity 0.2s ease-in, height 0.2s ease-in; | |
| transition-delay: 0.5s; | |
| } | |
| .conversion::after { | |
| content: ""; | |
| margin-left: var(--spacing-conversion-offset); | |
| display: block; | |
| border: none; | |
| border-left: 1px solid var(--color-magenta); | |
| height: var(--spacing-conversion-distance); | |
| margin-top: var(--spacing-annotation-whisker); | |
| margin-bottom: var(--spacing-annotation-whisker); | |
| transition: height 0.2s ease-in; | |
| } | |
| .conversion:nth-child(2n) { | |
| left: 47%; | |
| } | |
| .conversion pre { | |
| color: var(--color-magenta); | |
| font-size: 12px; | |
| position: absolute; | |
| left: calc(var(--spacing-conversion-offset) * 1.5); | |
| } | |
| /* Animations */ | |
| /* .conversion::after { | |
| height: var(--spacing-conversion-distance-collapsed); | |
| transition-delay: 0.5s; | |
| } | |
| .conversion pre { | |
| opacity: 0; | |
| height: 0; | |
| transition-delay: 0; | |
| } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment