csaugust.github.io/about.html at main · csAugust/csaugust.github.io · 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
<!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">
    <title>bilibili 热榜可视化</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <h1>bilibili 热榜可视化</h1>
    </div>

    <div class="main">
        <div class="nav">
            <h3>展示内容选择</h3>
            <ul>
                <li class="nav-item">
                    <a href="index.html">
                        <span class="iconfont icon-zhuye"></span>
                        <span>项目介绍</span>
                    </a>
                </li>
                <li class="nav-item charts">
                    <a href="charts.html">
                        <span class="iconfont icon-tubiao"></span>
                        <span>图表展示</span>
                    </a>
                </li>
                <li class="nav-item active">
                    <a href="about.html">
                        <span class="iconfont icon-tishi"></span>
                        <span>分工流程</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="graph">
                <div class="graph-hd">项目分工及流程介绍</div>
                <div class="graph-caption">
                    <h3>项目分工</h3>
                    <p>数据预处理：方昱晴</p>
                    <p>数据可视化：温晓波、薛嘉辉</p>
                    <p>前端设计和搭建：陈智扬</p>
                    <div style="height: 40px;"></div>
                    <h3>流程介绍</h3>
                    <h5>数据来源及预处理</h5>
                    <p>bilibili2022.9-2023.2半年的热榜视频、弹幕和评论数据，由于时间等关系，爬取的热榜数据只包括了9个小的分区（在excel文件的末尾有cate_id，代表的是分区，比如22代表鬼畜调教区、95代表科技数码区），每个视频最多仅爬取了按热度排行的前1000条评论，弹幕也没有完全请求下来。对于每一个月的每一个分区，都分割成了一个excel文件</p>
                    <p>数据预处理将原始数据转变为按月份、日期划分并清洗后的json数据，保存在'./js/data.js'文件中，主要保留以下信息：</p>
                    <table>
                        <tr>
                            <td>video</td><td>视频总数</td>
                        </tr>
                        <tr>
                            <td>comment</td><td>评论总数</td>
                        </tr>
                        <tr>
                            <td>danmu</td><td>弹幕总数</td>
                        </tr>
                        <tr>
                            <td>hot_words</td><td>评论、弹幕热点词</td>
                        </tr>
                        <tr>
                            <td>province</td><td>省份</td>
                        </tr>
                        <tr>
                            <td>hour</td><td>时刻</td>
                        </tr>
                    </table>


                    <div style="height: 20px;"></div>
                    <h5>可视化绘制</h5>
                    <p>在预处理的基础上，我们按分区、日期或月份绘制了讨论热度折线图、分区热度柱状图、各省份讨论相对热度图以及热点词云图。</p>

                    <div style="height: 20px;"></div>
                    <h5>Web设计与开发</h5>
                    <p>Web设计侧重于可交互性，以展示内容选择、图表区、图表参数选择三栏布局，让用户可以方便直观地选择感兴趣的内容及偏好的表现形式，
                       从而提供更加个性化的可视化图表：
                    </p>
                    <ul>
                        <li>● 展示内容选择区可以选择展示项目介绍或者不同类型的图表，其中图表类型的选择制作为悬浮窗形式，以节约面板空间且更加美观；</li>
                        <li>● 图表区是绘制图表的区域，占据面板的主要部分；</li>
                        <li>● 参数选择区可以选择包括视频分区、视频时间在内的图表相关参数。<li>
                    </ul>
                    <p>Web开发方面，使用css搭建html页面，并引入js实现动态交互效果，实现了例如：</p>
                    <ul>
                        <li>● 图表类型选择窗的展示与隐藏</li>
                        <li>● 获取选取的参数并传递给绘图函数</li>
                        <li>● 根据当前选择绘制的图表类型安排不同的界面布局方式<li>
                    </ul>
                    等功能。
                </div>
            </div>
        </div>
        <div class="toolkit">
        </div>
    </div>
</body>
</html>