dataviz/index.html at main · trdvangraft/dataviz · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>The otherside of a crisis</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Google fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cardo:400,400i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
    <!-- Lightbox-->
    <link rel="stylesheet" href="vendor/lightbox2/css/lightbox.min.css">
    <!-- Font Awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <!-- Parallax-->
    <link rel="stylesheet" href="vendor/onepage-scroll/onepage-scroll.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <!-- <script src="https://d3js.org/d3-dsv.v1.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> -->

    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

  </head>
  <body>
    <div class="main">
      <section class="bg-cover bg-center hero">
        <div class="dark-overlay"></div>
        <div class="position-relative z-index-1">
          <div class="container text-center text-darkblack">
            <p class="font-italic lead">"The art of disguise is to hide in plain sight"</p>
            <h1 class="text-uppercase my-4">The hidden darkside of an economic crisis</h1>
            <p class="lead">An economic crisis leads to unemployment, bankrupcy and overall decline of quality of life.</p>
            <p class="lead">A humanitarian side is hidden, to be unveiled.</p>
          </div>
        </div>
        <div class="scroll-btn link-scroll"><i class="fas fa-angle-double-down"></i></div>
      </section>
      <section id="1">
        <div class="d-flex h-100 align-items-center">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-lg-12 mb-4 mb-lg-0">
                <header class="text-center">
                  <h2 class="text-uppercase lined">The Great Recession in the Netherlands</h2>
                </header>
                <p class="lead">Can you spot the effect of the Great Recession on the Netherlands?</p>
                <p>The Great Recession was the most severe economic recession in the United States since the Great Depression of the 1930s (COVID-19 excluded). It affected the entire world: the Netherlands included. Can you guess, using the colors in the graph below, when this recession reached the Kingdom of Orange? </p>
                <p style=" font-style: italic">TIP: You can zoom into the graph and try to find out which color represents the recession period and which colors represent the aftermath and the buildup to it! </p>
              </div>
              <div class="col-lg-12">
                <div id="economic_growth"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="bg-gray" id="divorces">
        <div class="d-flex h-100 align-items-center">
          <div class="container">
            <header class="mb-5 text-center">
              <h2 class="text-uppercase lined">Divorces/Marriages/Widowing</h2>
            </header>
            <div class="row">
              <div class="col-lg-12 col-md-6 mb-4">
                <p class="lead">Did the recession cause people to be less romantic?</p>
                <p>Quite a grim title, we know. But can you spot any differences in marriages, per gender, during the Great recession years compared to before and after? How about divorces and widowing?</p>

              </div>
              <div class="row col-lg-12 col-md-6 mb-4">
                <div id="normal_divorces"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="2">
        <div class="d-flex h-100 align-items-center">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-lg-12 mb-4 mb-lg-0">
                <header class="text-center">
                  <h2 class="text-uppercase lined">National GDP Growth on Household in the Netherlands</h2>
                </header>
                <p class="lead">A crisis can also affect marital status.</p>
                <p>It is hypothesized that during a crisis, more divorces occur due to the fact that tensions arise from the financial household situation. Another hypothesis is that when things are good and the economy is booming, people tend to marry more. Is the opposite is also true? Are weddings costly in the Netherlands?  </p>
                <p style=" font-style: italic">TIP: The colors of the first page represent the same thing here. Keep refreshing and follow the animation of the line. It will tell you something about the chronology of events. What can you see?</p>
              </div>
              <div class="row">
                <div id="scatter_plot_gdp" class="col-lg-6"></div>
                <div id="trial_plot_2" class="col-lg-6"></div>
              </div>
              </div>
            </div>
          </div>

      </section>

      <section class="bg-gray">
        <div class="d-flex h-100 align-items-center">
          <div class="container">
            <header class="text-center mb-5">
              <h2 class="text-uppercase lined">Effect on the Provinces in the Netherlands</h2>
            </header>
            <div class="row">
              <div class="col-lg-12">
                <p class="lead">Something is for sure, Rotterdam is not Paris.</p>
                <p>What's common among all provinces? Marriages declining during the recession years. Is there anything else?</p>
              </div>
              <div class="col-lg-12">
                <div id="Dropdown"></div>
                <div id="my_dataviz"></div>
              </div>
            </div>
            <footer class="py-5 mt-5">
              <div class="row">
                <div class="col-lg-6 text-center text-lg-left">
                  <p class="font-italic mb-0 text-gray">&copy; 2021 KRT</p>
                </div>
                <div class="col-lg-6 text-center text-lg-right">
                  <p class="font-italic mb-0 text-gray">&copy; IN4089 <a href="https://brightspace.tudelft.nl/d2l/home/404994" class="text-gray">InfoVis Project</a></p>
                </div>
              </div>
            </footer>
          </div>
        </div>
      </section>

    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/onepage-scroll/jquery.onepage-scroll.min.js"></script>
    <script src="vendor/lightbox2/js/lightbox.min.js"></script>
    <script src="js/front.js"></script>

    <script src="vis_scripts/ecomic_growth.js"></script>
    <script src="vis_scripts/barchart.js"></script>
    <!-- <script src="vis_scripts/scatterplot_divorces_GDP_x.js"></script> -->
    <script src="vis_scripts/scatterplots_GDP_x.js"></script>
    <script src="vis_scripts/trendchart.js"></script>

    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>