infovis/index.html at master · kortvarsel/infovis · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>IV</title>
    <!-- CSS -->
    <link href="/lib/d3-geomap/css/d3.geomap.css" rel="stylesheet">
    <link href="/css/bar.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="lib/bootstrap-4/css/bootstrap.min.css">
</head>

<body class="all">
    <div class="container-fluid h-100">
        <div class="row text-center">
            <div id="header" class="col-12">

                <h1 style="color:#F1F1F1; font-family:montserrat"><strong id="indicate">Music &amp; Values<span style="color:#4CFFEA";> - Germany</span></strong>
                     <div class="info" style="display:inline; top:15px; left:15px;">
                    <img src="data/faq.png" class="faq" id="titlefaq"/>
                    <span class="tooltiptextT">This visualization works as a tool to compare the world according to taste in music and a set of six values.</br></br>

                        You will find an explanation of each individual idiom by hovering over the question mark to the top left of each idiom.<br/><br/>

                        By clicking the "Country"-button in the top left corner you will be provided with a list of every country for selection.
                    </span>
                </div></h1>

            </div>
        </div>
        <div class="row h-100">
            <button id="menuButton" onclick="switchIt()" style="color:#F1F1F1;">Country</button>

            <div id="menu" class="nav"><ul id="content"></ul></div>
            <div class="bord col-lg-5" id="chord">
                <div class="info">
                    <img src="data/faq.png" class="faq" id="chordfaq"/>
                    <span class="tooltiptextC">The Chord Diagram displays the artists of the top 10 tracks in the chosen country to the right. The lines drawn from each artist represents their position in the top 10 in other countries of the world; a line from an artist to a country shows that they are present in that countries top list as well. To focus on a specific artist or country, just hover the mouse over your selection.<br/><br/>
                    Clicking on an artist displays their generic audience in the Radar Chart.</span>
                </div>
            </div>
            <div class="col-lg-6" id="map">
                <div class="info">
                    <img src="data/faq.png" class="faq" id="mapfaq"/>
                    <span class="tooltiptextM">The world map provides a means to compare each country with available Spotify data on the accounts of six values. Each individual value is chosen by pressing the corresponding abbrevation to the right of the world map:</br></br>
                        Gross Domestic Product per Capita - GDP</br>
                        Corruption Perception Index - CPI</br>
                        Human Development Index - HDI</br>
                        Gender Inequality Index - GII</br>
                        Unemployment Rate - UER</br>
                        Happiness Score - HS</br></br>

                    By pressing a country on the world map, you will be able to zoom in as well as make the country's information to be displayed on the Bar Chart, Donut Chart and the Chord Diagram. Zoom out by pressing the same country or a black area on the map.</span>
                </div>
            </div>
            <div class="col-lg-1" id="menu">
                <button onclick="update('GDP',colorbrewer.Greens[6]);" type="button" class="btn button_gdp">GDP</button>
                <button onclick="update('Corruption Perception Index',colorbrewer.Blues[6]);" type="button" class="btn button_cpi">CPI</button>
                <button onclick="update('Human Development Index',colorbrewer.RdPu[6]);" type="button" class="btn button_hdi">HDI</button>
                <button onclick="update('Gender Inequality Index',colorbrewer.Reds[6]);" type="button" class="btn button_gii">GII</button>
                <button onclick="update('Unemployment Rate',colorbrewer.Oranges[6]);" type="button" class="btn button_uer">UER</button>
                <button onclick="update('Happiness Score',colorbrewer.Purples[6]);" type="button" class="btn button_hs">HS</button>
            </div>
        </div>
        <div class="row h-100">
            <div class="bord col-lg-4" id="DonutChart">
                  <div class="info">
                    <img src="data/faq.png" class="faq" id="donutfaq"/>
                    <span class="tooltiptextA">The Donut Chart shows the top 10 tracks of the selected country. By hovering over a slice, the circle will show the rank, artist and track. The size of each slice shows the share of streams among the top 10. Clicking on a slice displays their generic audience in the Radar Chart.</span>
                </div>
            </div>
            <div class="bord col-lg-4" class="faq" id="barChart">
                <div class="info">
                     <img src="data/faq.png" class="faq" id="barfaq"/>
                    <span class="tooltiptextB">The Bar Chart displays all six characteristics of a country, with each color matching the colors on the buttons present in the world map. By hovering over each specific bar you will get individual values for the characteristics.</span>
                </div>
            </div>
            <div class="bord col-lg-4" class="faq" id="RadarChart">
               <div class="info">
                     <img src="data/faq.png" class="faq" id="radarfaq"/>
                    <span class="tooltiptextR">The Radar Chart shows the generic audience of your selected artist. By hovering over the blob, you will see which artist is selected at the moment. The abbreviations are the following:<br/><br/>
                        Gross Domestic Product per Capita - GDP</br>
                        Corruption Perception Index - CPI</br>
                        Human Development Index - HDI</br>
                        Gender Inequality Index - GII</br>
                        Unemployment Rate - UER</br>
                        Happiness Score - HS</span>
                </div>
            </div>
        </div>
    </div>
    <!--libraries-->
    <script type="text/javascript" src='lib/d3.js'></script>
    <script type="text/javascript" src='lib/d3.min.js'></script>
    <script type="text/javascript" src='lib/topojson.min.js'></script>
    <script type="text/javascript" src='lib/d3-geo-projection.js'></script>
    <script type="text/javascript" src="lib/d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
    <script type="text/javascript" src="lib/d3-geomap/js/d3.geomap.js"></script>
    <script type="text/javascript" src='lib/jquery-3.3.1.min.js'></script>
    <script type="text/javascript" src='lib/d3.layout.chord.sort.js'></script>
    <script type="text/javascript" src='lib/d3.stretched.chord.js'></script>

    <!--link to main JavaScript file-->
    <script type="text/javascript" src='js/choropleth.js'></script>
    <script type="text/javascript" src='js/bar.js'></script>
    <script type="text/javascript" src='js/donut.js'></script>
    <script type="text/javascript" src='js/chord.js'></script>
    <script type="text/javascript" src='js/radar.js'></script>
    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
    <script src="lib/jquery-3.3.1.min.js"></script>
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script-->
    <script src="lib/bootstrap-4/js/bootstrap.min.js"></script>
    <!-- App, model and views -->
    <!-- Controllers -->
</body>

</html>