-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomparison.html
106 lines (104 loc) · 5.67 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
<html>
<head>
<title>Psychology comparison of Hamilton characters | 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 Mac Miller's Lyrics">
</head>
<body class="ziggy" onload="initialize('./data/mac.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="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>