Last active
October 23, 2021 00:22
-
-
Save sitiaish/61a7c566ca01ac39e2484abfc7c90308 to your computer and use it in GitHub Desktop.
Proportional circles legend
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' /> | |
| <title>Legend Circles Proportion</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Jost', sans-serif | |
| } | |
| .legend-wrapper { | |
| background-color: #eeeeee; | |
| border-radius: 12px; | |
| padding: 20px; | |
| width: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin: 24px 0; | |
| } | |
| p { | |
| font-size: 16px; | |
| line-height: 24px; | |
| text-align: center; | |
| margin: 0px; | |
| margin-bottom: 20px; | |
| } | |
| .legend-proportion-circles { | |
| position: relative; | |
| height: 100px; | |
| width: 150px; | |
| } | |
| .circle { | |
| border: 2px solid grey; | |
| border-radius: 50%; | |
| background: whitesmoke; | |
| position: absolute; | |
| } | |
| .circle.large { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .legend-proportion-circles .circle.large:after { | |
| content: ''; | |
| position: absolute; | |
| width: calc(50px + 30px); | |
| height: 0.5px; | |
| background: grey; | |
| top: -2px; | |
| left: calc(50px); | |
| } | |
| .circle.small { | |
| width: 20px; | |
| height: 20px; | |
| bottom: -3px; | |
| left: calc(100px / 2 - 20px / 2); | |
| } | |
| .legend-proportion-circles .circle.small:after { | |
| content: ''; | |
| position: absolute; | |
| width: calc(50px + 30px); | |
| height: 0.5px; | |
| background: grey; | |
| bottom: 0px; | |
| left: 5px; | |
| } | |
| .label.large { | |
| position: absolute; | |
| left: calc(100px + 35px); | |
| top: -10px; | |
| } | |
| .label.small { | |
| position: absolute; | |
| left: calc(100px + 30px); | |
| bottom: calc(-10px); | |
| } | |
| .legend-proportion-circles-2 { | |
| position: relative; | |
| height: 80px; | |
| width: 80px; | |
| margin: 12px auto; | |
| display: block; | |
| } | |
| .legend-proportion-circles-2 .circle { | |
| border: 1px solid black; | |
| border-radius: 50%; | |
| background: whitesmoke; | |
| position: absolute; | |
| } | |
| .legend-proportion-circles-2 .circle.large { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .legend-proportion-circles-2 .circle.small { | |
| width: 15px; | |
| height: 15px; | |
| bottom: -2px; | |
| left: calc(50% - 7.5px); | |
| } | |
| .legend-proportion-circles-2 .label.large { | |
| left: calc(50%); | |
| transform: translate(-50%, 0); | |
| top: -24px; | |
| position: absolute; | |
| } | |
| .legend-proportion-circles-2 .label.small { | |
| left: calc(50%); | |
| transform: translate(-50%, 0); | |
| bottom: 12px; | |
| position: absolute; | |
| } | |
| .bar-wrapper { | |
| display: flex; | |
| } | |
| span.band { | |
| width: 60px; | |
| height: 20px; | |
| background-color: red; | |
| } | |
| .band-label { | |
| position: relative; | |
| left: -5px; | |
| width: 60px; | |
| height: 20px; | |
| } | |
| .band-label:last-child { | |
| width: 0px; | |
| } | |
| span.band-gradient { | |
| width: 360px; | |
| height: 20px; | |
| background: linear-gradient(90deg, #FF8691, #D577A0, #A26EA1, #6F6593, #465979,#2F4858); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="legend-wrapper"> | |
| <p>Legend title here</p> | |
| <div class="legend-proportion-circles"> | |
| <div class="circle large"></div> | |
| <div class="circle small"></div> | |
| <div class="label large"> | |
| <span class="text--reference mb-0">4,600</span> | |
| </div> | |
| <div class="label small"> | |
| <span class="text--reference mb-0">694</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="legend-wrapper"> | |
| <p>Legend title here</p> | |
| <div class="legend-proportion-circles-2"> | |
| <div class="circle large"></div> | |
| <div class=" circle small"></div> | |
| <div class="label large"> | |
| <span class="text-nav-anchor mb-0">Max</span> | |
| </div> | |
| <div class="label small"> | |
| <span class="text-nav-anchor mb-0">Min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="legend-wrapper" style="width: 350px;"> | |
| <p>Color legend: Gradient in discrete color band</p> | |
| <div class="bar-wrapper"> | |
| <span class="band" style="background-color: #FF8691;"></span> | |
| <span class="band" style="background-color: #D577A0;"></span> | |
| <span class="band" style="background-color: #A26EA1;"></span> | |
| <span class="band" style="background-color: #6F6593;"></span> | |
| <span class="band" style="background-color: #465979;"></span> | |
| <span class="band" style="background-color: #2F4858;"></span> | |
| </div> | |
| <div class="bar-wrapper"> | |
| <span class="band-label">0</span> | |
| <span class="band-label">10</span> | |
| <span class="band-label">20</span> | |
| <span class="band-label">30</span> | |
| <span class="band-label">40</span> | |
| <span class="band-label">50</span> | |
| <span class="band-label">60</span> | |
| </div> | |
| </div> | |
| <div class="legend-wrapper" style="width: 350px;"> | |
| <p>Color legend: smooth gradient</p> | |
| <div class="bar-wrapper"> | |
| <span class="band-gradient"></span> | |
| </div> | |
| <div class="bar-wrapper"> | |
| <span class="band-label">0</span> | |
| <span class="band-label">10</span> | |
| <span class="band-label">20</span> | |
| <span class="band-label">30</span> | |
| <span class="band-label">40</span> | |
| <span class="band-label">50</span> | |
| <span class="band-label">60</span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment