<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Wine, Beer or Spirits?</title> <meta name="description" content="How much - and which - alcohol is drunk in the world during a week?"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta property="og:site_name" content="Ghost in the Data"> <meta property="fb:app_id" content="173168549704804"> <meta property="og:title" content="Wine, Beer or Spirits?"> <meta property="og:type" content="website"> <meta property="og:image" content="http://ghostinthedata.com/alcoholmap/favicon-196x196.png"> <meta property="og:url" content="http://ghostinthedata.com/alcoholmap/"> <meta property="og:description" content="How much - and which - alcohol is drunk in the world during a week?"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Wine, Beer or Spirits?"> <meta name="twitter:description" content="How much - and which - alcohol is drunk in the world during a week?"> <meta name="twitter:image" content="http://ghostinthedata.com/alcoholmap/favicon-196x196.png"> <link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196"> <link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32"> <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style/style.css"> </head> <body> <div id="map"></div> <div id="countryInfo" class="topBar"> <div class="countryData"> <h2 id="countryName"></h2> <p id="countryInfoDetails"></p> </div> <div class="glassesIconsContainer"> <div id="wineAmount" class="glassesIcons"></div> <div id="beerAmount" class="glassesIcons"></div> <div id="spiritsAmount" class="glassesIcons"></div> </div> </div> <div class="intro-screen"> <div class="intro-text"> <h1>Wine, Beer or Spirits?</h1> <p>How much - and which - alcohol is drunk in the world during a week?</p> <p>Move over countries to learn it, or use the buttons to show the top wine, beer and spirits drinkers or each country's favorite drink.</p> <p><i>(Source: World Health Organization)</i></p> <button>Cheers!</button> </div> </div> <span class="spinner"></span> <div class="navBar"> <button id="btn-wine" class="color-wine">Wine</button> <button id="btn-beer" class="color-beer">Beer</button> <button id="btn-spirits" class="color-spirits">Spirits</button> <button id="btn-favorites">Favorite</button> <div class="gitd-widgets"> <div class="gitd-widget-item gitd-widget-share gitd-widget-icon"> <div class="gitd-widget-container"> <a href="https://www.facebook.com/sharer/sharer.php?u=http://ghostinthedata.com/alcoholmap/" target="_blank" class="share-button share-button-fb gitd-widget-icon"></a> <a href="https://twitter.com/intent/tweet?text=How%20much%20-%20and%20which%20-%20alcohol%20is%20drunk%20in%20the%20world%20during%20a%20week%3F&url=http://ghostinthedata.com/alcoholmap&via=ghostinthedata" target="_blank" class="share-button share-button-twitter gitd-widget-icon"></a> </div> </div> <div class="gitd-widget-item gitd-widget-data gitd-widget-icon"> <div class="gitd-widget-container"> <div class="gitd-widget-panel"> <p>DATA SOURCES</p> <ul> <li><a href="http://apps.who.int/gho/data/node.main.GISAH" target="_blank">World Health Organization</a></li> <li><a href="http://en.wikipedia.org/wiki/Wine_glass" target="_blank">Wikipedia: ISO Wine tasting glass</a></li> <li><a href="http://en.wikipedia.org/wiki/Pint_glass" target="_blank">Wikipedia: Pint glass</a></li> <li><a href="http://en.wikipedia.org/wiki/Shot_glass" target="_blank">Wikipedia: Shot-measuring tools</a></li> </ul> </div> </div> </div> <a href="https://github.com/zenoid/alcoholmap" target="blank" class="gitd-widget-item gitd-widget-github gitd-widget-icon"></a> <a href="http://ghostinthedata.com" target="blank" class="gitd-widget-item gitd-widget-website gitd-widget-icon"></a> </div> </div> <div class="hidden"> <svg xmlns="http://www.w3.org/2000/svg" id="wineGlassIcon" viewBox="25 20 50 80" width="50" height="80"> <path fill="#FFFFFF" d="M59.9 94.7c1.3 0.3 2.3 0.5 3.2 0.7c1.1 0.2 2 0.4 2.6 0.6c-1.2 0.8-5.7 2.1-13.8 2.3c-0.6 0-1.3 0-1.9 0h0 c-0.7 0-1.3 0-1.9 0c-8.1-0.2-12.6-1.5-13.8-2.3c0.6-0.1 1.5-0.3 2.6-0.6c0.8-0.2 1.9-0.4 3.2-0.7c6-1.3 8.6-5.5 8.7-14.6V58.1 c0-2.8-2.4-4.2-3.6-4.5C36 50.9 29.6 41.6 29.6 31.1c0-2.2 0.3-4.5 0.9-6.6c3.1 1.7 12.7 2.4 19.6 2.5c6.8 0 16.5-0.7 19.5-2.5 c0.6 2.1 0.9 4.4 0.9 6.6c0 10.5-6.4 19.8-15.6 22.4c-1.3 0.4-3.7 1.8-3.7 4.5V80C51.3 89.2 53.8 93.4 59.9 94.7z M50 21.4 c11.4 0 18.6 1.5 19.4 2.5c-1.9 1.1-8.9 2.4-19.4 2.4c-10.4 0-17.4-1.3-19.3-2.4C31.6 22.8 38.8 21.4 50 21.4z M72.1 31.1 c0-2.6 0-5.9-1.1-7.6c-2.2-3.4-19-3.8-21-3.8c-2 0-19 0.2-20.9 3.5c-0.1 0.1-0.1 0.2-0.1 0.3c-0.7 2.5-1.1 5-1.1 7.6 c0 11.3 6.9 21.2 16.8 24c0.7 0.2 2.4 1.1 2.4 2.9l0 22.1c-0.2 9.5-3 12-7.4 12.9c-1.3 0.3-2.3 0.5-3.2 0.7 c-3.6 0.7-4 0.8-4.2 1.7c0 4 13.1 4.5 15.7 4.5c0.6 0 1.3 0 2 0c0.7 0 1.3 0 2 0c2.6-0.1 15.7-0.6 15.7-4.3c0-0.1 0-0.2 0-0.3 c-0.2-0.8-0.7-0.9-4.2-1.6c-0.8-0.2-1.9-0.4-3.2-0.7c-4.5-1-7.2-3.5-7.4-13.1V58.1c0-1.8 1.7-2.7 2.4-2.9 C65.2 52.3 72.1 42.4 72.1 31.1z"/><defs><clipPath id="wineGlassIconShape"><path d="M69 31.4c-2.9-1.3-10.2-2.1-18.9-2.2c-8.9 0-16.5 1-19.2 2.3c0.8 11.3 9 20.1 19 20.1 C60 51.6 68.3 42.7 69 31.4z"/></clipPath></defs><rect id="wineGlassLevel" x="28.7" y="27" clip-path="url(#wineGlassIconShape)" fill-rule="evenodd" clip-rule="evenodd" width="42.6" height="26.9" fill="#990000" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="beerGlassIcon" viewBox="20 0 60 100" width="60" height="100"> <path fill="#FFFFFF" d="M71.4 49.6c-1.8 8.6-3.7 17.6-4.5 33.1c-0.2 3.4-0.3 7.2-0.4 11.2c0 1.2-0.5 1.5-1.1 1.7 c-4.2 1.7-9.6 2.6-15.3 2.6h0c-5.7 0-11.2-0.9-15.4-2.7c-0.5-0.2-1.1-0.4-1.1-1.7c-0.1-3.9-0.2-7.7-0.4-11.2 c-0.8-15.5-2.7-24.4-4.5-33.1c-2.3-11-4.5-21.3-4.6-44c0.8 0.4 1.9 0.8 3.5 1.2c5 1.2 13.4 1.9 22.5 1.9c9.1 0 17.5-0.7 22.5-1.9 C74.1 6.4 75.2 6 76 5.6C75.8 28.3 73.7 38.7 71.4 49.6z M27.7 3.5C32.7 2.4 41 1.7 50 1.7c9 0 17.3 0.7 22.2 1.8 c2.4 0.6 3.3 1.1 3.6 1.3c-0.6 0.3-1.6 0.8-3.5 1.2C67.4 7.2 59 7.9 50 7.9c-9 0-17.4-0.7-22.4-1.8c-1.9-0.4-3-0.9-3.5-1.2 C24.4 4.6 25.3 4.1 27.7 3.5z M72.6 1.9C67.6 0.7 59.1 0 50 0c-9.1 0-17.6 0.7-22.6 1.9c-3.9 0.9-4.7 1.8-5 2.5 c0 0.1-0.1 0.3-0.1 0.4l0 0.4C22.4 28.4 24.6 38.9 27 50c1.8 8.6 3.7 17.5 4.5 32.8c0.2 3.5 0.3 7.3 0.4 11.1c0 2.4 1.5 3 2.2 3.3 c4.4 1.8 10 2.8 16 2.8h0c6 0 11.6-1 16-2.8c0.6-0.3 2.1-0.9 2.1-3.2c0.1-4 0.2-7.7 0.4-11.1C69.4 67.4 71.2 58.5 73 50 c2.3-11.1 4.5-21.6 4.7-44.8V4.8c0-0.2 0-0.3-0.1-0.5C77.3 3.7 76.5 2.8 72.6 1.9z"/><defs><clipPath id="beerGlassIconShape"><path d="M50 16.1c-9.1 0-17-0.8-21.7-1.8c-0.6-0.1-1.2-0.3-1.7-0.4c-0.1 0-0.4-0.1-0.4 0.3v0.3 c-0.2 25.7 9.7 43.3 9.8 71.9c0.1 3.2-0.2 4.6 2 5.2c0.6 0.2 6.8 1.8 12 1.8c5.2 0 11.4-1.7 12-1.8c2.2-0.6 1.9-1.9 2-5.2 c0.1-28.6 9.9-46.2 9.8-71.9c0-0.1 0-0.2 0-0.3c0-0.3-0.3-0.3-0.4-0.3c-0.5 0.2-1.1 0.3-1.7 0.4C67 15.4 59 16.1 50 16.1z"/></clipPath></defs><rect id="beerGlassLevel" x="23.9" y="11.5" clip-path="url(#beerGlassIconShape)" fill-rule="evenodd" clip-rule="evenodd" width="52.1" height="84" fill="#CC9900" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" id="spiritsGlassIcon" viewBox="32 58 36 42" width="36" height="42"> <path fill="#FFFFFF" d="M65.2 65l0 0.1c-1.8 1.9-5.1 3.7-15.1 3.7c-10 0-13.3-1.8-15.1-3.7l0-0.1c0 0 0 0 0-0.1l0 0l0-0.1 c0.7-1.7 3.9-3.9 15.1-3.9c11.3 0 14.5 2.3 15.1 4C65.1 64.9 65.2 65 65.2 65C65.2 65.1 65.2 65 65.2 65z M60.5 91.8L60 95.1 c-1.3 0.7-2.6 3.2-10 3.2c-7.3 0-8.7-2.5-10-3.2l-0.5-3.3L35 66.1c2.7 2 6.3 3.4 15 3.4c8.8 0 12.3-1.4 15-3.4L60.5 91.8z M61.8 92.1l4.7-26.9c0-0.1 0-0.1 0-0.1c0 0 0-0.1 0-0.1c0-0.3-0.1-0.6-0.2-0.9c-1.4-3.4-7.7-4.9-16.4-4.9c-8.7 0-15 1.5-16.4 4.9 c-0.1 0.3-0.2 0.6-0.2 0.9c0 0 0 0.1 0 0.1c0 0.1 0 0 0 0.1l4.7 26.9l0.3 2l0.2 1.8c0 0.3 0.2 0.5 0.4 0.6c0.2 0.1 2.1 3.6 11 3.6 c8.9 0 10.7-3.4 10.9-3.6c0.2-0.1 0.3-0.4 0.4-0.6"/><defs><clipPath id="spiritsGlassIconShape"><path d="M50.9 94.3l0.6-0.1l0.6-0.1c0 0 0.5-0.1 0.6-0.1c0.1 0 0.6-0.1 0.6-0.1l0.5-0.1l0.5-0.1l0.2-0.1 l0.3-0.1c0.1 0 0.2-0.1 0.2-0.1l0.2-0.1c0.1 0 0.2-0.1 0.2-0.1l0.2-0.1l0.2-0.1l0.2-0.1c0.1 0 0.1-0.1 0.2-0.1l0.2-0.1 c0.1 0 0.1-0.1 0.2-0.1l0.1-0.1c0.1 0 0.1-0.1 0.2-0.1l0.1-0.1c0.1 0 0.1-0.1 0.2-0.1l0.1-0.1c0.1 0 0.1-0.1 0.2-0.1 c0 0 0.2-0.1 0.2-0.2l0.1 0c0 0 0.1-0.1 0.1-0.1c0 0 0.1-0.1 0.1-0.1L60.6 79c-3.6-1.2-4.9-1.5-10.6-1.5c-5.7 0-7.1 0.3-10.6 1.5 l2.5 12.7c0 0 0.1 0.1 0.1 0.1c0 0 0.1 0.1 0.1 0.1l0.1 0c0 0 0.2 0.2 0.2 0.2c0.1 0 0.3 0.2 0.3 0.2c0.1 0 0.1 0.1 0.2 0.1 l0.1 0.1c0.1 0 0.1 0.1 0.2 0.1l0.2 0.1c0.1 0 0.1 0.1 0.2 0.1l0.2 0.1c0.1 0 0.1 0.1 0.2 0.1L44 93c0.1 0 0.1 0.1 0.2 0.1 l0.2 0.1l0.2 0.1l0.2 0.1c0.1 0 0.2 0.1 0.2 0.1l0.2 0.1l0.3 0.1l0.2 0.1l0.3 0.1l0.3 0.1l0.3 0.1l0.6 0.1c0.1 0 0.6 0.1 0.6 0.1 l0.6 0.1l0.6 0.1"/></clipPath></defs><rect id="spiritsGlassLevel" x="37.5" y="74.9" clip-path="url(#spiritsGlassIconShape)" fill-rule="evenodd" clip-rule="evenodd" width="25" height="22.7" fill="#0099CC" /> </svg> </div> <script src="js/scripts.js"></script> </body> </html>