-
Notifications
You must be signed in to change notification settings - Fork 1
/
comparison.html
110 lines (108 loc) · 6.23 KB
/
comparison.html
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
<html>
<head>
<title>Psychology comparison of Coldplay albums | Big Five Psychology</title>
<!-- <link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="https://mcconville.github.io/lyrics/style/main.css">
<meta name="keywords" content="mac miller, big-5, psychology-in-music">
<meta name="description" content="Pshychological Analysis of Bowie's Lyrics">
</head>
<body class="ziggy" onload="initialize('./data/coldplay.json')">
<div class="compare">
<div class="bar">
<a href="../">
<div class="title">
<img class="hamilton" src="./images/SVG/logo.svg">
</div>
</a>
</div>
</div>
<div class='charts'>
<div class="context">
<!-- <div class="chartinfo">
<p>These charts plot the <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/personality-insights.html">big five personality traits</a> from the lyrics of albums related to <a href="https://en.wikipedia.org/wiki/David_Bowie">David Bowie's personas</a> over time. There is one card for each trait, and a picker within each card that allows comparison of contributing factors. You can toggle between viewing the data by persona, or by time.
<p>You can add your own thoughts below.</p>
</div> -->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked="" on
onchange="toggleChart(this)">
<label class="onoffswitch-label" for="onoffswitch1">
<div class="onoffswitch-inner"></div>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class='charts'>
<div class='chart'>
<div class="chartTitle"><img class="chartIcon" src="https://mcconville.github.io/lyrics/images/bigfive/openness.svg">Openness</div>
<div class="explanation">Appreciation for art, emotion, adventure, unusual ideas, curiosity, and variety of
experience. It reflects the degree of intellectual curiosity, creativity and a preference for novelty and
variety a person has. It is also described as the extent
to which a person is imaginative or independent, and depicts a personal preference for a variety of activities
over a strict routine.</div>
<div class="chartContent" id='openness'></div>
<select class="chartSelect" id='openness-select' onchange="opennessTrait()">
<option value="combined">Combined</option>
</select>
</div>
<div class='chart'>
<div class="chartTitle"><img class="chartIcon" src="https://mcconville.github.io/lyrics/images/bigfive/conscientiousness.svg">Conscientiousness</div>
<div class="explanation">A tendency to be organized and dependable, show self-discipline, act dutifully, aim for
achievement, and prefer planned rather than spontaneous behavior. High conscientiousness are often perceived as
stubborn and obsessive. Low conscientiousness
are flexible and spontaneous, but can be perceived as sloppy and unreliable.</div>
<div class="chartContent" id='conscientiousness'>
</div>
<select class="chartSelect" id='conscientiousness-select' onchange="conscientiousnessTrait()">
<option value="combined">Combined</option>
</select>
</div>
<div class='chart'>
<div class="chartTitle"><img class="chartIcon" src="https://mcconville.github.io/lyrics/images/bigfive/agreeableness.svg">Agreeableness</div>
<div class="explanation">A tendency to be compassionate and cooperative rather than suspicious and antagonistic
towards others. It is also a measure of one's trusting and helpful nature, and whether a person is generally
well-tempered or not. High agreeableness is often
seen as naive or submissive. Low agreeableness personalities are often competitive or challenging people, which
can be seen as argumentative or untrustworthy.</div>
<div class="chartContent" id='agreeableness'></div>
<select class="chartSelect" id='agreeableness-select' onchange="agreeablenessTrait()">
<option value="combined">Combined</option>
</select>
</div>
<div class='chart'>
<div class="chartTitle"><img class="chartIcon" src="https://mcconville.github.io/lyrics/images/bigfive/extraversion.svg">Extraversion</div>
<div class="explanation">Energy, positive emotions, surgency, assertiveness, sociability and the tendency to seek
stimulation in the company of others, and talkativeness. High extraversion is often perceived as
attention-seeking, and domineering. Low extraversion causes
a reserved, reflective personality, which can be perceived as aloof or self-absorbed.</div>
<div class="chartContent" id='extraversion'></div>
<select class="chartSelect" id='extraversion-select' onchange="extraversionTrait()">
<option value="combined">Combined</option>
</select>
</div>
<div class='chart'>
<div class="chartTitle "><img class="chartIcon " src="https://mcconville.github.io/lyrics/images/bigfive/neuroticism.svg ">Emotional Range</div>
<div class="explanation">The tendency to experience unpleasant emotions easily, such as anger, anxiety,
depression, and vulnerability. Neuroticism also refers to the degree of emotional stability and impulse control
and is sometimes referred to by its low pole, "emotional
stability". A high need for stability manifests as a stable and calm personality, but can be seen as uninspiring
and unconcerned. A low need for stability causes a reactive and excitable personality, often very dynamic
individuals, but they can
be perceived as unstable or insecure.</div>
<div class="chartContent " id='neuroticism'></div>
<select class="chartSelect " id='neuroticism-select' onchange="neuroticismTrait()">
<option value="combined">Combined</option>
</select>
</div>
</div>
<div class='charts'>
<div class="context">
<div class="chartinfo">
</div>
</div>
</div>
</body>
<script src="https://mcconville.github.io/lyrics/logic/Chart.min.js "></script>
<script src="https://mcconville.github.io/lyrics/logic/comparison.js"></script>
</html>
<html>