WHR_data_visualization/index.html at master · mrkchoi/WHR_data_visualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" type="image/png" href="./dist/assets/images/favicon-heart-whr.png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link
  href="https://fonts.googleapis.com/css?family=Darker+Grotesque:400,700,900|Lora:400,700|Work+Sans:400,700&display=swap"
  rel="stylesheet">

  <link rel="stylesheet" href="./dist/stylesheets/style.css">

  <title>World Happiness Report | Data Visualization</title>
</head>
<body>
  <div class="modal-bg">
    <div class="modal">
      <div class="modal-close__btn"><i class="modal-close__btn-single fa fa-times"></i></div>
      <h1 class="main__header">World <br />Happiness <br />Report <span><img src="./dist/assets/images/whr-heart.png"
            alt="whr logo heart" class="header__img"></span>
      </h1>
      <div class="text">
        <p class="main__description">
          The <strong>World Happiness Report</strong> is a landmark survey of the state of global happiness that ranks <strong>156 countries</strong> by how happy their citizens perceive themselves to be.
        </p>
        <p class="main__description">
          This year’s World Happiness Report focuses on <strong>happiness and the community</strong>: how happiness has evolved over the past
          dozen years, with a focus on the technologies, social norms, conflicts and government policies that have driven
          those changes.
        </p>
        <p class="main__description">
          This tool allows you to explore the study, customize the statistics, and share the facts.
        </p>
      </div>
      <br>
      <div class="sources">
        <p class="source__content">
          Data provided by <a href="https://worldhappiness.report/ed/2019/" target="_blank" class="source__link">World
            Happiness Report</a> and <a href="http://worldpopulationreview.com/" target="_blank" class="source__link">World
            Population Review</a><br />Visualization created by <a href="https://www.kchoi.io" target="_blank" class="source__link">Kenneth Choi</a>
        </p>
        <br />
      </div>
    </div>

  </div>
  <div class="main__container--full">
    <div class="header__container">
      <div class="header__content">
        <h1 class="main__header">World <br />Happiness <br />Report <span><img src="./dist/assets/images/whr-heart.png" alt="whr logo heart" class="header__img"></span></h1>
      </div>
      <div class="header">
        <div class="header__btn-group btn-group">
          <a href="#" data-text="GDP per capita" class="btn-graphGdp header-graph__btn active">GDP per capita
            <p class="nav__dropdown"><strong>Happiness</strong> x<br /><strong>GDP Per Capita</strong></p>
          </a>
          &nbsp;&nbsp;
          <a href="#" data-text="Social Support" class="btn-graphSocialSupport header-graph__btn">Social Support
            <p class="nav__dropdown"><strong>Happiness</strong> x<br /><strong>Social Support</strong></p>
          </a>
          &nbsp;&nbsp;
          <a href="#" data-text="Freedom" class="btn-graphFreedom header-graph__btn">Freedom
            <p class="nav__dropdown"><strong>Happiness</strong> x<br /><strong>Freedom</strong></p>
          </a>
          &nbsp;&nbsp;
          <a href="#" data-text="Generosity" class="btn-graphGenerosity header-graph__btn">Generosity
            <p class="nav__dropdown"><strong>Happiness</strong> x<br /><strong>Generosity</strong></p>
          </a>
          &nbsp;&nbsp;
          <a href="#" data-text="Life Expectancy" class="btn-graphLifeExpectancy header-graph__btn">Life Expectancy
            <p class="nav__dropdown"><strong>Happiness</strong> x<br /><strong>Life Expectancy</strong></p>
          </a>

          &nbsp;&nbsp;
        </div>
        <div class="header__link-wrapper">
          <a href="https://www.linkedin.com/in/kenneth-choi-42502a35/" class="header__link" target="_blank">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="https://github.com/mrkchoi/city_visualizer" target="_blank" class="header__link">
            <i class="fab fa-github-square"></i>
          </a>
          <a href="https://angel.co/kenneth-choi-1?public_profile=1" target="_blank" class="header__link">
            <i class="fab fa-angellist"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="graph__container">
      <svg class="graph"></svg>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
  <script src="https://d3js.org/d3-format.v1.min.js"></script>
  <script src="./dist/main.js"></script>
</body>
</html>