Visualization/graph.html at main · HHCHU/Visualization · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <link rel="stylesheet" href="css/interface.css" />
    <link rel="stylesheet" href="css/graph.css" />
    <title>K-POP 사랑 노래 속 화자 페르소나 분석</title>
  </head>
  <body>
    <div id="container">
      <div id="visualization">
        <div id="d3graph"></div>
      </div>
      <div id="interface">
        <div id="dataLegend">
          <h3 class="legendTitle">남성/여성 아이돌</h3>
          <div class="legendOptions">
            <div id="legend_fm_m" class="legendOption">
              <div class="legendColor lg-fm-m"></div>
              <div class="txt-fm-m">남성</div>
            </div>
            <div id="legend_fm_f" class="legendOption">
              <div class="legendColor lg-fm-f"></div>
              <div class="txt-fm-f">여성</div>
            </div>
            <div id="legend_fm_fm" class="legendOption">
              <div class="legendColor lg-fm-fm"></div>
              <div class="txt-fm-fm">혼성</div>
            </div>
          </div>
          <h3 class="legendTitle">페르소나</h3>
          <div class="legendOptions">
            <div id="legend_ps_1" class="legendOption">
              <div class="legendColor lg-ps-1"></div>
              <div class="txt-ps-1">순종자</div>
            </div>
            <div id="legend_ps_2" class="legendOption">
              <div class="legendColor lg-ps-2"></div>
              <div class="txt-ps-2">순수파</div>
            </div>
            <div id="legend_ps_3" class="legendOption">
              <div class="legendColor lg-ps-3"></div>
              <div class="txt-ps-3">유혹자</div>
            </div>
            <div id="legend_ps_4" class="legendOption">
              <div class="legendColor lg-ps-4"></div>
              <div class="txt-ps-4">숭배자</div>
            </div>
            <div id="legend_ps_5" class="legendOption">
              <div class="legendColor lg-ps-5"></div>
              <div class="txt-ps-5">순정파</div>
            </div>
            <div id="legend_ps_6" class="legendOption">
              <div class="legendColor lg-ps-6"></div>
              <div class="txt-ps-6">약한 자아</div>
            </div>
            <div id="legend_ps_7" class="legendOption">
              <div class="legendColor lg-ps-7"></div>
              <div class="txt-ps-7">강한 자아</div>
            </div>
            <div id="legend_ps_8" class="legendOption">
              <div class="legendColor lg-ps-8"></div>
              <div class="txt-ps-8">불도저</div>
            </div>
            <div id="legend_ps_9" class="legendOption">
              <div class="legendColor lg-ps-9"></div>
              <div class="txt-ps-9">수호자</div>
            </div>
            <div id="legend_ps_10" class="legendOption">
              <div class="legendColor lg-ps-10"></div>
              <div class="txt-ps-10">지배자</div>
            </div>
          </div>
        </div>
        <div class="interfaceOption">
          <h3 class="interfaceOptionTitle">색상 코딩</h3>
          <div class="radioOptions">
            <div>
              <input
                type="radio"
                id="ccFM"
                name="colorCategory"
                value="FM"
                checked
              />
              <label for="ccFM">남성/여성 아이돌</label>
            </div>
            <div>
              <input
                type="radio"
                id="ccPS"
                name="colorCategory"
                value="Persona"
              />
              <label for="ccPS">페르소나</label>
            </div>
          </div>
        </div>
        <div class="interfaceOption">
          <h3 class="interfaceOptionTitle">년도 별 보기</h3>
          <div class="checkboxes">
            <div>
              <input type="checkbox" id="cb_years" name="cb_years" />
              <label for="cb_years">년도 별 보기</label>
            </div>
          </div>
          <div class="inputRangeli">
            <label id="inputRangeYearLabel" for="rangeYear">년도: 2022</label>
            <input
              type="range"
              id="rangeYear"
              name="rangeYear"
              min="2004"
              max="2022"
              value="2022"
              disabled
            />
          </div>
        </div>
      </div>
      <div id="information">
        <div id="song_info">
          <p>데이터를 선택하세요.</p>
          <br />
          <p>(그래프에서 마우스오버하세요.)</p>
          <!-- <p><b>제목</b>: 불타오르네 (FIRE)</p>
          <br />
          <p><b>가수</b>: 방탄소년단</p>
          <br />
          <p><b>남/여</b>: 남성</p>
          <br />
          <p><b>애플 뮤직 연도</b>: 2016</p>
          <br />
          <p><b>능동</b>: 0.8983050847</p>
          <br />
          <p><b>주체</b>: 0.8333333333</p> -->
        </div>
      </div>
    </div>
    <script src="js/visualization.js"></script>
    <script src="js/interface.js"></script>
  </body>
</html>