Forked from markcaron/figure-donut-chart-with-key.html
Created
April 6, 2018 01:13
-
-
Save aftaug/13c76ac552d9876d6c56516d46f67c6f to your computer and use it in GitHub Desktop.
Final Donut Chart as Figure w/ Key
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> | |
| @import url(https://fonts.googleapis.com/css?family=Montserrat:400); | |
| body { | |
| font: 16px/1.4em "Montserrat", Arial, sans-serif; | |
| } | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .chart-text { | |
| /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/ | |
| fill: #000; | |
| -moz-transform: translateY(0.25em); | |
| -ms-transform: translateY(0.25em); | |
| -webkit-transform: translateY(0.25em); | |
| transform: translateY(0.25em); | |
| } | |
| .chart-number { | |
| font-size: 0.6em; | |
| line-height: 1; | |
| text-anchor: middle; | |
| -moz-transform: translateY(-0.25em); | |
| -ms-transform: translateY(-0.25em); | |
| -webkit-transform: translateY(-0.25em); | |
| transform: translateY(-0.25em); | |
| } | |
| .chart-label { | |
| font-size: 0.2em; | |
| text-transform: uppercase; | |
| text-anchor: middle; | |
| -moz-transform: translateY(0.7em); | |
| -ms-transform: translateY(0.7em); | |
| -webkit-transform: translateY(0.7em); | |
| transform: translateY(0.7em); | |
| } | |
| figure { | |
| display: flex; | |
| justify-content: space-around; | |
| flex-direction: column; | |
| margin-left: -15px; | |
| margin-right: -15px; | |
| } | |
| @media (min-width: 768px) { | |
| figure { | |
| flex-direction: row; | |
| } | |
| } | |
| .figure-content, | |
| .figure-key { | |
| flex: 1; | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| align-self: center; | |
| } | |
| .figure-content svg { | |
| height: auto; | |
| } | |
| .figure-key { | |
| min-width: calc(8 / 12); | |
| } | |
| .figure-key [class*="shape-"] { | |
| margin-right: 6px; | |
| } | |
| .figure-key-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .figure-key-list li { | |
| margin: 0 0 8px; | |
| padding: 0; | |
| } | |
| .shape-circle { | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: 32px; | |
| height: 32px; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| } | |
| .shape-fuschia { | |
| background-color: #ce4b99; | |
| } | |
| .shape-lemon-lime { | |
| background-color: #b1c94e; | |
| } | |
| .shape-blue { | |
| background-color: #377bbc; | |
| } | |
| .sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| margin: -1px; | |
| padding: 0; | |
| overflow: hidden; | |
| clip: rect(0,0,0,0); | |
| border: 0; | |
| } | |
| </style> | |
| <figure> | |
| <div class="figure-content"> | |
| <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut" aria-labelledby="beers-title beers-desc" role="img"> | |
| <title id="beers-title">Beers in My Cellar</title> | |
| <desc id="beers-desc">Donut chart showing 10 total beers. Two beers are Imperial India Pale Ales, four beers are Belgian Quadrupels, and three are Russian Imperial Stouts. The last remaining beer is unlabeled.</desc> | |
| <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff" role="presentation"></circle> | |
| <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" role="presentation"></circle> | |
| <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25" aria-labelledby="donut-segment-1-title donut-segment-1-desc"> | |
| <title id="donut-segment-1-title">Belgian Quadrupels</title> | |
| <desc id="donut-segment-1-desc">Pink chart segment spanning 40% of the whole, which is 4 Belgian Quadrupels out of 10 total.</desc> | |
| </circle> | |
| <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b1c94e" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="85"> | |
| <title id="donut-segment-2-title">Imperial India Pale Ales</title> | |
| <desc id="donut-segment-2-desc">Green chart segment spanning 20% of the whole, which is 2 Imperial India Pale Ales out of 10 total.</desc> | |
| </circle> | |
| <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#377bbc" stroke-width="3" stroke-dasharray="30 70" stroke-dashoffset="65"> | |
| <title id="donut-segment-3-title">Russian Imperial Stouts</title> | |
| <desc id="donut-segment-3-desc">Blue chart segment spanning 3% of the whole, which is 3 Russian Imperial Stouts out of 10 total.</desc> | |
| </circle> | |
| <!-- unused 10% --> | |
| <g class="chart-text"> | |
| <text x="50%" y="50%" class="chart-number"> | |
| 10 | |
| </text> | |
| <text x="50%" y="50%" class="chart-label"> | |
| Beers | |
| </text> | |
| </g> | |
| </svg> | |
| </div> | |
| <figcaption class="figure-key"> | |
| <p class="sr-only">Donut chart showing 10 total beers. Two beers are Imperial India Pale Ales, four beers are Belgian Quadrupels, and three are Russian Imperial Stouts. The last remaining beer is unlabeled.</p> | |
| <ul class="figure-key-list" aria-hidden="true" role="presentation"> | |
| <li> | |
| <span class="shape-circle shape-fuschia"></span> Belgian Quadrupels (4) | |
| </li> | |
| <li> | |
| <span class="shape-circle shape-lemon-lime"></span> Imperial India Pale Ales (2) | |
| </li> | |
| <li> | |
| <span class="shape-circle shape-blue"></span> Russian Imperial Stouts (3) | |
| </li> | |
| </ul> | |
| </figcaption> | |
| </figure> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment