Last active
June 1, 2022 06:47
-
-
Save sitiaish/5a46f5fc260e3ff8a6c8d4ed8575dfb1 to your computer and use it in GitHub Desktop.
Hogwarts house pie charts in Flourish + data story -- using customised pie charts made in Flourish Studio and embedding into a data story section
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 class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Hogwarts houses + Flourish</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="description" content="hogwarts-house-flourish"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| color: #1d1d1d; | |
| } | |
| .text--purple { | |
| color: #5F358C; | |
| } | |
| .text--ravenclaw { | |
| color: #114199; | |
| } | |
| .text--gryffindor { | |
| color: #A6250F; | |
| } | |
| .text--slytherin { | |
| color: #095E49; | |
| } | |
| .text--hufflepuff { | |
| color: #F6AF30; | |
| } | |
| .text-body-1 { | |
| font-size: 24px; | |
| font-weight: 400; | |
| line-height: 36px; | |
| } | |
| .text-body-2 { | |
| font-size: 16px; | |
| font-weight: 400; | |
| line-height: 28px; | |
| } | |
| iframe { | |
| border: unset; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| section#hogwarts { | |
| background-color: #E0E7FF; | |
| padding: 48px 0; | |
| } | |
| section#hogwarts.pie-wrapper { | |
| height: 225px; | |
| } | |
| @media (max-width: 780px) { | |
| .text-body-1 { | |
| font-size: 18px; | |
| line-height: 28px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section id="hogwarts"> | |
| <div class="container"> | |
| <div class="row justify-content-center align-items-center mb-5"> | |
| <div class="col-lg-8 col-11 text-center"> | |
| <img src="https://cdn-statics.kontinentalist.com/external-projects/public-workshop/01-1/img/symbol3.c094ae40.svg" width="72px" class="mb-5" /> | |
| <p class="text-body-1 font-italic font-weight-bold text--purple"> | |
| “It is our choices, Harry, that show what <br> we truly are, far more than our abilities.” | |
| </p> | |
| <p class="text-body-2 font-secondary font-italic text--blue"> | |
| What Hogwarts Houses would the Sorting Hat place us? | |
| </p> | |
| </div> | |
| </div> | |
| <div class="row justify-content-center align-items-center"> | |
| <div class="col-xs-6 col-md-4 col-lg-3 text-center"> | |
| <div class="pie-wrapper mb-4"> | |
| <iframe src="https://flo.uri.sh/visualisation/9973966/embed"></iframe> | |
| </div> | |
| <p class="text-body-1 font-italic font-weight-bold mb-2 text--gryffindor"> | |
| n% | |
| </p> | |
| <p class="text-body-2 font-italic font-weight-bold text--gryffindor"> | |
| Gryffindor | |
| </p> | |
| </div> | |
| <div class="col-xs-6 col-md-4 col-lg-3 text-center"> | |
| <div class="pie-wrapper mb-4"> | |
| <iframe src="https://flo.uri.sh/visualisation/9974035/embed"></iframe> | |
| </div> | |
| <p class="text-body-1 font-italic font-weight-bold mb-2 text--slytherin"> | |
| n% | |
| </p> | |
| <p class="text-body-2 font-italic font-weight-bold text--slytherin"> | |
| Slytherin | |
| </p> | |
| </div> | |
| <div class="col-xs-6 col-md-4 col-lg-3 text-center"> | |
| <div class="pie-wrapper mb-4"> | |
| <iframe src="https://flo.uri.sh/visualisation/9974075/embed"></iframe> | |
| </div> | |
| <p class="text-body-1 font-italic font-weight-bold mb-2 text--ravenclaw"> | |
| n% | |
| </p> | |
| <p class="text-body-2 font-italic font-weight-bold text--ravenclaw"> | |
| Ravenclaw | |
| </p> | |
| </div> | |
| <div class="col-xs-6 col-md-4 col-lg-3 text-center"> | |
| <div class="pie-wrapper mb-4"> | |
| <iframe src="https://flo.uri.sh/visualisation/9974066/embed"></iframe> | |
| </div> | |
| <p class="text-body-1 font-italic font-weight-bold mb-2 text--hufflepuff"> | |
| n% | |
| </p> | |
| <p class="text-body-2 font-italic font-weight-bold text--hufflepuff"> | |
| Hufflepuff | |
| </p> | |
| </div> | |
| </div> | |
| <div class="row justify-content-center align-items-center mt-5 pt-5"> | |
| <div class="col-lg-8 text-center"> | |
| <p class="text-body-2 font-italic text--purple"> | |
| Note: To use this gist, please create your own charts in Flourish Studio and replace the <em>src</em> attribute of Flourish iframes in this code with you own! Remember to style the background of your Flourish viz to match the background of the section in your site. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="https://public.flourish.studio/resources/embed.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment