The World's Top Consumers of Electricity

In this example below you will see how to do a The World's Top Consumers of Electricity with some HTML / CSS and Javascript

Here's a fun little demo put together with Jade and Sass. I wanted to see if speed is a good medium to use for data visualisations. In reality it turns out it's difficult for the human brain to tell exactly how much faster one dial is spinning compared to another, so it's probably not an ideal use. However, I do find looking at the whole thing engaging, so it definitely succeeds on that front. This is my first ever time using Jade in conjunction with Sass so hit me up if you think I could have done something in a better way!

Thumbnail
This awesome code was written by edball, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright edball ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>The World's Top Consumers of Electricity</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Kite+One'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
h1, .amount, p {
  text-align: center;
  font-family: 'Kite One', sans-serif;
}

.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.intro {
  margin-bottom: 20px;
}

.intro p {
  text-align: left;
  padding: 0 25px;
}

.dial, .pointer, .amount {
  width: 100px;
}

.amount {
  position: absolute;
  top: 0;
  left: 0;
  height: 75px;
  opacity: 0;
  color: yellow;
  padding-top: 25px;
  background: rgba(56, 56, 56, 0.75);
  transition: opacity 0.25s;
  border-radius: 50px;
  text-shadow: 0px 0px 5px #fff;
}

.amount:hover {
  opacity: 1;
}

.country {
  width: 150px;
  float: left;
  margin-bottom: 40px;
  text-align: center;
}

.dial {
  position: relative;
  margin-left: 25px;
  background: url(data:image/png;base64,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) no-repeat;
}

.pointer {
  height: 100px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM5JREFUeNrs2cEJgzAYgNFQHKAjdAQ3sCN0M0dyJHEC9RCph6YH0RjlPfhB0It8mCiGAAAAXMQ7zuU9BBEEQQRBEEE4QHWT+2g8IQgiCIIIgiAIIgiCCIIggsAWfRwKMcaxZCGIIAgiCIIgiCAIIgiCCFKyV+JYEEEEsWQhiCD2ELZ4ztOF79/CZbp4jsx+xVhHIaP6T4xlantIPp+drhEESxY2da+9XnsL0q5itL7UzzckjgVBEEEQRBAAAAAAAAAAAAAAAAAAAABImAQYAIYVNqjCb76MAAAAAElFTkSuQmCC);
  animation-duration: 0.67s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.china p:before {
  content: "China";
}

.china .pointer {
  animation-duration: 0.671979544s;
}

.china .amount:before {
  content: "4.7 billion";
}

.united-states p:before {
  content: "United States";
}

.united-states .pointer {
  animation-duration: 0.8114450391s;
}

.united-states .amount:before {
  content: "3.9 billion";
}

.russia p:before {
  content: "Russia";
}

.russia .pointer {
  animation-duration: 3.1024102312s;
}

.russia .amount:before {
  content: "1.0 billion";
}

.india p:before {
  content: "India";
}

.india .pointer {
  animation-duration: 3.2881854296s;
}

.india .amount:before {
  content: "960 million";
}

.japan p:before {
  content: "Japan";
}

.japan .pointer {
  animation-duration: 3.6682563685s;
}

.japan .amount:before {
  content: "860 million";
}

.germany p:before {
  content: "Germany";
}

.germany .pointer {
  animation-duration: 5.1953871499s;
}

.germany .amount:before {
  content: "607 million";
}

.canada p:before {
  content: "Canada";
}

.canada .pointer {
  animation-duration: 5.7390354868s;
}

.canada .amount:before {
  content: "550 million";
}

.france p:before {
  content: "France";
}

.france .pointer {
  animation-duration: 6.8422651334s;
}

.france .amount:before {
  content: "461 million";
}

.brazil p:before {
  content: "Brazil";
}

.brazil .pointer {
  animation-duration: 6.9203423305s;
}

.brazil .amount:before {
  content: "456 million";
}

.south-korea p:before {
  content: "South Korea";
}

.south-korea .pointer {
  animation-duration: 6.9294660514s;
}

.south-korea .amount:before {
  content: "455 million";
}

.united-kingdom p:before {
  content: "United Kingdom";
}

.united-kingdom .pointer {
  animation-duration: 9.1488250653s;
}

.united-kingdom .amount:before {
  content: "345 million";
}

.italy p:before {
  content: "Italy";
}

.italy .pointer {
  animation-duration: 10.1761858664s;
}

.italy .amount:before {
  content: "310 million";
}

.spain p:before {
  content: "Spain";
}

.spain .pointer {
  animation-duration: 11.7891588785s;
}

.spain .amount:before {
  content: "268 million";
}

.turkey p:before {
  content: "Turkey";
}

.turkey .pointer {
  animation-duration: 13.0314049587s;
}

.turkey .amount:before {
  content: "242 million";
}

.australia p:before {
  content: "Australia";
}

.australia .pointer {
  animation-duration: 13.9911268855s;
}

.australia .amount:before {
  content: "225 million";
}

.taiwan p:before {
  content: "Taiwan";
}

.taiwan .pointer {
  animation-duration: 14.2826086957s;
}

.taiwan .amount:before {
  content: "221 million";
}

.south-africa p:before {
  content: "South Africa";
}

.south-africa .pointer {
  animation-duration: 14.8614514609s;
}

.south-africa .amount:before {
  content: "212 million";
}

.iran p:before {
  content: "Iran";
}

.iran .pointer {
  animation-duration: 15.2568940493s;
}

.iran .amount:before {
  content: "207 million";
}

.ukraine p:before {
  content: "Ukraine";
}

.ukraine .pointer {
  animation-duration: 17.3752066116s;
}

.ukraine .amount:before {
  content: "182 million";
}

.saudi-arabia p:before {
  content: "Saudi Arabia";
}

.saudi-arabia .pointer {
  animation-duration: 18.0722063037s;
}

.saudi-arabia .amount:before {
  content: "175 million";
}

.mexico p:before {
  content: "Mexico";
}

.mexico .pointer {
  animation-duration: 23.4294205052s;
}

.mexico .amount:before {
  content: "135 million";
}

.poland p:before {
  content: "Poland";
}

.poland .pointer {
  animation-duration: 23.8547655068s;
}

.poland .amount:before {
  content: "132 million";
}

.sweden p:before {
  content: "Sweden";
}

.sweden .pointer {
  animation-duration: 23.8728236185s;
}

.sweden .amount:before {
  content: "132 million";
}

.thailand p:before {
  content: "Thailand";
}

.thailand .pointer {
  animation-duration: 23.9635258359s;
}

.thailand .amount:before {
  content: "132 million";
}

.indonesia p:before {
  content: "Indonesia";
}

.indonesia .pointer {
  animation-duration: 25.0087232355s;
}

.indonesia .amount:before {
  content: "126 million";
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  
<div class="wrapper">
  <div class="intro">
    <h1>The World's Top Consumers of Electricity</h1>
    <p>Each full turn of a dial represents the real-time consumption of 100 Megawatt Hours by that country. Hover over a dial to see the country's total annual consumption of electricity. (One Megawatt Hour would power your standard 750 Watt microwave oven* continuously for 42 days without stopping ...please don't try this.)</p>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <div class="country #{val}">
    <p> </p>
    <div class="dial">
      <div class="pointer"></div>
      <div class="amount"><br />MWh</div>
    </div>
  </div>
  <p>The raw data for this visualisation was obtained from this <a href="http://en.wikipedia.org/wiki/List_of_countries_by_electricity_consumption">list on wikipedia.</a></p>
  <p>*Based on an approximate power consumption of 1000 Watts and an operating efficiency of 75%. </p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/edball/the-worldandaposs-top-consumers-of-electricity-LjACt */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
h1, .amount, p {
  text-align: center;
  font-family: 'Kite One', sans-serif;
}

.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.intro {
  margin-bottom: 20px;
}

.intro p {
  text-align: left;
  padding: 0 25px;
}

.dial, .pointer, .amount {
  width: 100px;
}

.amount {
  position: absolute;
  top: 0;
  left: 0;
  height: 75px;
  opacity: 0;
  color: yellow;
  padding-top: 25px;
  background: rgba(56, 56, 56, 0.75);
  transition: opacity 0.25s;
  border-radius: 50px;
  text-shadow: 0px 0px 5px #fff;
}

.amount:hover {
  opacity: 1;
}

.country {
  width: 150px;
  float: left;
  margin-bottom: 40px;
  text-align: center;
}

.dial {
  position: relative;
  margin-left: 25px;
  background: url(data:image/png;base64,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) no-repeat;
}

.pointer {
  height: 100px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM5JREFUeNrs2cEJgzAYgNFQHKAjdAQ3sCN0M0dyJHEC9RCph6YH0RjlPfhB0It8mCiGAAAAXMQ7zuU9BBEEQQRBEEE4QHWT+2g8IQgiCIIIgiAIIgiCCIIggsAWfRwKMcaxZCGIIAgiCIIgiCAIIgiCCFKyV+JYEEEEsWQhiCD2ELZ4ztOF79/CZbp4jsx+xVhHIaP6T4xlantIPp+drhEESxY2da+9XnsL0q5itL7UzzckjgVBEEEQRBAAAAAAAAAAAAAAAAAAAABImAQYAIYVNqjCb76MAAAAAElFTkSuQmCC);
  animation-duration: 0.67s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.china p:before {
  content: "China";
}

.china .pointer {
  animation-duration: 0.671979544s;
}

.china .amount:before {
  content: "4.7 billion";
}

.united-states p:before {
  content: "United States";
}

.united-states .pointer {
  animation-duration: 0.8114450391s;
}

.united-states .amount:before {
  content: "3.9 billion";
}

.russia p:before {
  content: "Russia";
}

.russia .pointer {
  animation-duration: 3.1024102312s;
}

.russia .amount:before {
  content: "1.0 billion";
}

.india p:before {
  content: "India";
}

.india .pointer {
  animation-duration: 3.2881854296s;
}

.india .amount:before {
  content: "960 million";
}

.japan p:before {
  content: "Japan";
}

.japan .pointer {
  animation-duration: 3.6682563685s;
}

.japan .amount:before {
  content: "860 million";
}

.germany p:before {
  content: "Germany";
}

.germany .pointer {
  animation-duration: 5.1953871499s;
}

.germany .amount:before {
  content: "607 million";
}

.canada p:before {
  content: "Canada";
}

.canada .pointer {
  animation-duration: 5.7390354868s;
}

.canada .amount:before {
  content: "550 million";
}

.france p:before {
  content: "France";
}

.france .pointer {
  animation-duration: 6.8422651334s;
}

.france .amount:before {
  content: "461 million";
}

.brazil p:before {
  content: "Brazil";
}

.brazil .pointer {
  animation-duration: 6.9203423305s;
}

.brazil .amount:before {
  content: "456 million";
}

.south-korea p:before {
  content: "South Korea";
}

.south-korea .pointer {
  animation-duration: 6.9294660514s;
}

.south-korea .amount:before {
  content: "455 million";
}

.united-kingdom p:before {
  content: "United Kingdom";
}

.united-kingdom .pointer {
  animation-duration: 9.1488250653s;
}

.united-kingdom .amount:before {
  content: "345 million";
}

.italy p:before {
  content: "Italy";
}

.italy .pointer {
  animation-duration: 10.1761858664s;
}

.italy .amount:before {
  content: "310 million";
}

.spain p:before {
  content: "Spain";
}

.spain .pointer {
  animation-duration: 11.7891588785s;
}

.spain .amount:before {
  content: "268 million";
}

.turkey p:before {
  content: "Turkey";
}

.turkey .pointer {
  animation-duration: 13.0314049587s;
}

.turkey .amount:before {
  content: "242 million";
}

.australia p:before {
  content: "Australia";
}

.australia .pointer {
  animation-duration: 13.9911268855s;
}

.australia .amount:before {
  content: "225 million";
}

.taiwan p:before {
  content: "Taiwan";
}

.taiwan .pointer {
  animation-duration: 14.2826086957s;
}

.taiwan .amount:before {
  content: "221 million";
}

.south-africa p:before {
  content: "South Africa";
}

.south-africa .pointer {
  animation-duration: 14.8614514609s;
}

.south-africa .amount:before {
  content: "212 million";
}

.iran p:before {
  content: "Iran";
}

.iran .pointer {
  animation-duration: 15.2568940493s;
}

.iran .amount:before {
  content: "207 million";
}

.ukraine p:before {
  content: "Ukraine";
}

.ukraine .pointer {
  animation-duration: 17.3752066116s;
}

.ukraine .amount:before {
  content: "182 million";
}

.saudi-arabia p:before {
  content: "Saudi Arabia";
}

.saudi-arabia .pointer {
  animation-duration: 18.0722063037s;
}

.saudi-arabia .amount:before {
  content: "175 million";
}

.mexico p:before {
  content: "Mexico";
}

.mexico .pointer {
  animation-duration: 23.4294205052s;
}

.mexico .amount:before {
  content: "135 million";
}

.poland p:before {
  content: "Poland";
}

.poland .pointer {
  animation-duration: 23.8547655068s;
}

.poland .amount:before {
  content: "132 million";
}

.sweden p:before {
  content: "Sweden";
}

.sweden .pointer {
  animation-duration: 23.8728236185s;
}

.sweden .amount:before {
  content: "132 million";
}

.thailand p:before {
  content: "Thailand";
}

.thailand .pointer {
  animation-duration: 23.9635258359s;
}

.thailand .amount:before {
  content: "132 million";
}

.indonesia p:before {
  content: "Indonesia";
}

.indonesia .pointer {
  animation-duration: 25.0087232355s;
}

.indonesia .amount:before {
  content: "126 million";
}

Comments