Pokemon_Visualisation/HostPage.html at main · MorelElian/Pokemon_Visualisation · 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
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>INF552 - 2022 - PC 03</title>
        <!-- https://vega.github.io/vega-lite/ -->
        <script src="https://d3js.org/d3.v7.min.js"></script>
        <!-- Your code -->
        <script src="js/main_js.js" defer></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main_page.css">
    </head>

    <body onload="createViz();">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

            <a class="navbar-brand" href="#">Who's that Pokemon ?</a>
            <div class=" collapse navbar-collapse">
              <ul class="navbar-nav mr-auto ">
                <li class="nav-item active"><a class ="nav-link" href="HostPage.html">Global Statistics</a></li>
                <li class = "nav-item"><a class = "nav-link" href="Pokedex.html">Pokedex</a></li>
                <li class = "nav-item"><a class = "nav-link" href="Deeper_Analysis.html">Best 6 ever</a></li>
              </ul>
            </div>
        </nav>

        <div class = "jumbotron container" id = "tabulair_caract" ><h2 class ="display-4">A first look on Pokemons ! </h2>
          <hr class="my-4">
            <div class = "container">
              <div class = "row">
                <div class="col col-lg-6">
                  <table class="table ">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Caracteristics</th>
                        <th scope="col">Value</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>Number of Pokemons</td>
                        <td>801</td>
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td>Number of generations</td>
                        <td>7</td>
                      </tr>
                      <tr>
                        <th scope="row">3</th>
                        <td>Lightest Pokemon</td>
                        <td>Sinistea</td>
                      </tr>
                      <tr>
                        <th scope="row">4</th>
                        <td>Heaviest Pokemon</td>
                        <td>Celesteea</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div class="col col-lg-6" id = "global_analysis" style = "padding-top : 10px;">
                  <p  style = "font-size : 20px">
                    In this first table, we gather the main data on pokemons:
                    there are 801 pokemons divided into 7 different generations: but finally,
                    we get quite little information with these tabular data alone: let's try to visualize
                    this dataset to pierce the secrets it hides!</p>
              </div>
            </div>
          </div>
        </div >

        <div class = "jumbotron container bg-dark text-white" id = "pokemon_distrib">
          <h2 class ="display-4">Generation Impact</h2>
          <hr class="my-2">

          <div class ="container">
            <div class ="row">
              <h3 class = "display-5">Number of Pokemons per generations</h3>
              <hr class="my-2">
            </div>
            <div class = "row">
              <div class = "col col-lg-9" id = "container_barplot_generation">

              </div>
              <div class = "col col-lg-3">
                <p id = "text-generation" style = "font-size : 20px; text-align : justify; opacity : 0"> Odd generations have more new pokémon compared to even ones.
                  The average number of pokemons per generations is 100, and generation 5 is the most prolific generation</p>
              </div>
            </div>
            <hr class = "my-2" id = "observer_catch_1">
            <h3 class = "display-5">Which generation have the easiest pokemon to catch ?</h3>
            <div class = "row">
              <div class = "col col-lg-5" style = "text-align : justify; padding-top : 50px"><p class  ="text-boxplot-gen-rate" style  = "opacity : 0">Generation 3 has the easiest pokémon to catch, while generation 4 has the hardest.</p>
              <p class  ="text-boxplot-gen-rate" style  = "opacity : 0">Distributions remains very close throughout the generations</p>
              <p class  ="text-boxplot-gen-rate" style  = "opacity : 0">We have excluded legendary pokemons for this boxplot since they can be considered as outliers, we will study them after</p></div>

              <div class = "col col-lg-7" id = "boxplot_capture_rate_gen"></div>

            </div>
            <span id = "observer_catch_2"></span>
          </div>
        </div>

      <div class = "jumbotron container " id = "pokemon_distrib">
        <div class = "container">
          <h2 class = "display-4">Type Study</h2>
          <hr class="my-2">
          <h3 class = "display-5">Pokémon Primary Types Prevalence</h3>
          <div class = row>
            <div class = col col-lg-12 id = 'treemap_1_type'></div>
          </div>
          <hr class="my-2" id = "observer_catch_233">
          <h3 class = "display-5">What about Secondary Type ? </h3>
          <hr class="my-2">
          <div class = row>
            <div class = col col-lg-12 id = 'treemap_2_type'></div>
          </div>
          <p class = "lead">Secondary types seem to be almost the opposite of primary types: the treemap allows us to visualize this, let's see if we can better see the repartition with a stacked barplot</p>
        </div>
        <hr class="my-1">
        <h3 class = "display-5">Pokemon by Primary and second types</h3>
        <div class = row>
          <div class = "col col-lg-8" id = 'stacked_barplot_types'></div>
          <div class = "col col-lg-4">
            <p>We have created a stacked barchart, sorted by Primary Type. Thanks to this graph, we can detect two insights : </p>
            <p>First, the Primary Type is directly correlated to the global number of Pokemon</p>
            <p>Second, The more a type is a Primary Type, the less is will be a secondary type</p>
          </div>
        </div>
        <span id = "observer_catch_3"></span>
      </div>
      <div class = "jumbotron container bg-dark text-white" id = "mixing both">
        <div class = "container">
          <h2 class = "display-4">Generation and Types</h2>
          <hr class="my-2">
          <h3 class = "display-5">Pokémon Primary Types Prevalence Across generation</h3>
          <div class = row>
            <div class = "col col-lg-8" id = 'heatmap_gen_types'></div>
            <div class = "col col-lg-4" style = "margin-top : 40px">
              <p>A few types don't exist in some generations, like dark, steel and flying in generation 1 and dragon and flying in generation 2.
              </p>
              <p>Flying only exists as primary type in generations 5 and 6.
              </p>
              <p>
              There is an unusually high amount of poison type pokémon in the first generation, steel type in the third, dark and psychic type in the fifth and fairy in the sixth.
              <p>
          </div>
          </div>
        </div>
      </div>
    <div class = "jumbotron container " id = "mixing both">
      <div class = "container">
        <h2 class = "display-4">Overview of base stats</h2>
        <hr class="my-2">
        <h3 class = "display-5">Pokémon Primary Types Prevalence Across generation</h3>
        <div class = row>
          <div class = "col col-lg-8" id = 'boxplot_caracts'> </div>
        </div>
      </div>
    </div>
    </body>

    </html>