草庐IT

基于python+flask实现视频数据可视化

张 PD 2023-08-06 原文

项目概要

对视频的标题,播放量,弹幕量以及收藏量,视频分类等数据进行分析。通过flask项目中的python代码进行数据库连接进行前后端交互功能的实现,通过layui框架进行系统前端页面的功能实现,通过knn分类算法以及k均值聚类算法对爬取的数据进行分析,最后通过前端页面对数据进行可视化展示。

项目设计

flask整体框架

使用工具pycharm创建flask项目,文件目录整体如下:

static: 存放静态文件,例如js,css,image等文件。

templates文件夹:用于放置html模板文件。

app.py: 工程主文件,用于存放配置项目,项⽬管理⽂件,通过它管理项⽬。

app.py主程序代码为

@app.route('/')

def hello_world():

    return 'Hello World!'

运行app.py程序运行项目,程序访问默认路径” http://127.0.0.1:5000/”,返回函数运行结果。

数据库设计

包括视频标题、视频播放量、投币量、收藏量、综合得分等基本信息,爬虫代码主要基于beautifulsoup技术编写实现。

类型

长度

小数点

不是null

标题

Varchar

255

0

播放量

Varchar

34

0

弹幕量

Varchar

34

0

收藏量

Varchar

34

0

综合得分

Bigint

20

0

视频地址

Varchar

73

0

分类

Varchar

34

0

 模块设计

首页设计

首页index.html使用layui框架实现前端页面的设置,使用flask框架语法将每个模块页面路径导入,运行程序时点击页面会直接跳转到对应的html页面,欢迎界面部分代码如下:

<li class="layui-col-xs3">

                      <a href="https://www.bilibili.com/v/popular/all?spm_id_from=333.851.b_7072696d61727950616765546162.3" target="_blank">

                        <cite class="c1">综合热门</cite>

                        <p><span>各个领域中新奇好玩的优质内容都在这里~</span></p>

                      </a>

                    </li>

 数据搜索模块

在flask的py文件中连接数据库并读取数据库中college_score数据表返回json数据文件,在热榜视频.html页面送使用ajax读取json文件中json数据,并返回到前端,使用bootstrap table中的表格元素将数据以表格形式返回在前端中,同时设置添加查询功能,对视频进行查询。

读取数据表中每个字段的值,使用json.dumps方法将获取的数据转换为json数据格式,写入json文件中,主函数代码如下:

if __name__ == '__main__':

    # 调用函数

    jsonData = TableToJson()

    print(u'转换为json格式的数据:', jsonData)

    # 以读写方式w+打开文件,路径前加r,防止字符转义

    f = open(r'D:/Bdatas/data01.json', 'w+',encoding="utf-8") 

    f.write(jsonData)    # 写数据

    f.close()    # 关闭文件

在html页面中读取json数据展示到前端页面中,其中使用bootstrap table表格元素使数据以表格形式展示,需要引用js文件,引用代码如下:

<link rel="stylesheet" href="../static/layui/css/layui.css"/>

<link rel="stylesheet" href="../static/css/admin.css"/>

    <link rel="stylesheet" href="../static/layui/css/bootstrap.css">

    <link rel="stylesheet" href="../static/layui/css/bootstrap-table.min.css">

    <script type="text/javascript" src="../static/layui/jquery-3.5.1.js"></script>

对于ajax的实现需要引入jquery.js文件,jQuery是一个JavaScript库,有助于简化和标准化JavaScript代码和HTML元素之间的交互。

ajax实现页面与web服务器之间的数据传输,代码如下:

<script>

            $('#mytab03').bootstrapTable({

                method: 'get',

                url: "../static/json/data01.json", // 请求路径

                striped: true, // 是否显示行间隔色

                search: true, //是否显示表格搜索

                pageNumber: 1, // 初始化加载第一页

                pagination: true, // 是否分页

                sidePagination: 'client', // server:服务器端分页|client:前端分页

                pageSize: 20, // 单页记录数

                pageList: [5, 10, 20, 30],

                columns: [{

                        title: '标题',

                        field: 'title',

                    }]

            })

    </script>

 数据可视化模块

数据可视化模块中基于echarts设计饼图、折线图、条形图、散点图以及绘制词云来实现数据的可视化展示。在数据清理阶段将干净的数据直接存储在csv文件中,编写Python代码读取csv数据集,创建DataFrame,首先创建SparkSession对象,代码如下:

#创建SparkSession对象

sc = SparkContext('local', 'spark_project')

sc.setLogLevel('WARN')

spark = SparkSession.builder.getOrCreate()

#创建DataFrame

df = spark.read.format('com.databricks.spark.csv')

.options(header='true', inferschema='true').load(

    'D:/SPARKFiles/listdata0012.csv')

之后可以进行函数模块定义进行数据提取。同时DataFrame数据也可以通过show()、drop()、withColumn()等方法实现数据展示、删除或转换数据类型等操作达到数据清理的目的,代码如下:

#删除不需要的字段

df = df.drop('types', 'bv', 'date', 'url', 'title', 'danmu', 'favorite', 'likes', 'replay', 'share', 'view')

#将字符串字段转换为整型

df = df.withColumn("coins", df["coins"].cast(IntegerType()))

#去除选择字段为空值记录

df = df.dropna(subset = ["author","mid","coins"])

#打印默认的字段类型信息

df.printSchema()

#打印前20条数据

df.show()

#打印总行数

print(df.count())

最后将清理后的数据存储在本地文件中,代码如下:

df.coalesce(1).write.option("header", "true").csv("D:/Bdatas/technology04")

该代码将数据存储到本地文件夹中,数据太多自动在文件夹中存储到分区文件中,coalesce(1)将分区合并为一个分区。

使用SQL语句根据指定字段对需要获取的数据信息进行整合,示例如下:

#播放量最高的10个视频

def maxplay():

    maxplayDF = spark.sql("SELECT title,MAX(replay) AS maxreplay FROM data GROUP BY title ORDER BY maxreplay DESC LIMIT 10")

    return maxplayDF.collect()

定义主函数,将各函数块提取出的数据存储到json文件中,部分代码如下:  

  def save(path, data):

        with open(path, 'w') as f:

            f.write(data)

if __name__ == "__main__":

    base = "static/json/"

    if not os.path.exists(base):

        os.mkdir(base)

    m = {

        "typeCount": {

            "method": typeCount,

            "path": "typeCount.json"

        } }

    for k in m:

        p = m[k]

        f = p["method"]

        save(base + m[k]["path"],

json.dumps(f(),ensure_ascii=False))

        print ("done -> " + k + " , save to -> " + base + m[k]["path"])

绘制词云图,读取json文件,基于base64绘制词云图片并嵌入html页面中,部分代码如下:

<script>

    var base64image = "data:image/png;base64,iVBORw0KGgo……Jggg=="

    var myChart = echarts.init(document.getElementById('chart'));

    myChart.showLoading();

    var maskImage = new Image();

    maskImage.src = base64image

    maskImage.onload = function () {

        $.getJSON("../static/json/authorCount.json", data => {

            var wc = [];

            data = data.map(v => ({

                author: v[0],

                count: parseInt(v[1]),

            }))

            for (var i = 0; i < 300; i++) {

                wc.push({

                    "name": data[i].author,

                    "value": data[i].count,

                });

            }

            myChart.setOption({

                backgroundColor: '#fff',

                title:{

                text: '视频热词'

                },

                tooltip: {

                    show: true

                },

                series: [{

                    type: 'wordCloud',

                    gridSize: 1,

                    sizeRange: [12, 55],

                    rotationRange: [-45, 0, 45, 90],

                    maskImage: maskImage,

                    textStyle: {

                        normal: {

                            color: function () {

                                return 'rgb(' +

                                    Math.round(Math.random() * 255) +

                                    ', ' + Math.round(Math.random() * 255) +

                                    ', ' + Math.round(Math.random() * 255) + ')'

                            }

                        }

                    },

                    left: 'center',

                    top: 'center',

                    right: null,

                    bottom: null,

                    data: wc

                }]

            });

            myChart.hideLoading();

        })

    }

</script>

绘制散点图

为了更方便的可视化,选择两个维度分别是分享量和投币量,基于matplotlib画图,代码如下:

plt.figure(figsize=(10,8))     #画布大小

#绘制训练集数据

plt.scatter(x=t0["share"][:300],y=t0["coins"][:300],color="r",label="types")

plt.scatter(x=t1["share"][:300],y=t1["coins"][:300],color="g",label="types")

#绘制测试集数据

right = test_X[result == test_y]

wrong = test_X[result != test_y]

plt.scatter(x = right["share"],y=right["coins"],color="c",marker="x",label="right")

plt.scatter(x = wrong["share"],y=wrong["coins"],color="m",marker=">",label="wrong")

plt.xlabel("分享数")

plt.ylabel("投币数")

plt.title("KNN分类结果显示")

plt.legend(loc="best")

将绘制图形嵌入HTML页面,有方法:

html可以以base64代码的形式内嵌图片。具体形式为 <img src="data:image/png; base64, iVBORw...。后面的 iVBORw…即为图像的 Base64 编码信息。故而只需将图像转为 base64 代码即可将图像嵌入 HTML 代码字符串中。

matplotlib 的 pyplot.savefig() 函数可以将绘图窗口保存为二进制文件格式。

lxml 库的 etree 模块可以实现解析 HTML 代码并写入 html 文件

# figure 保存为二进制文件

buffer = BytesIO()

plt.savefig(buffer)

plot_data = buffer.getvalue()

#plt.show()  # 显示绘制出的图

# 图像数据转化为 HTML 格式

imb = base64.b64encode(plot_data)

ims = imb.decode()

imd = "data:image/png;base64,"+ims

test_im = """<h1>Demo Figure</h1>  """ + """<img src="%s">""" % imd

# lxml 库的 etree 解析字符串为 html 代码,并写入文件

html = etree.HTML(test_im)

tree = etree.ElementTree(html)

tree.write('demo.html')

项目地址:https://download.csdn.net/download/weixin_44355584/86733256

有关基于python+flask实现视频数据可视化的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  4. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  5. ruby - Ruby 中的波形可视化 - 2

    我即将开始一个将录制和编辑音频文件的项目,我正在寻找一个好的库(最好是Ruby,但会考虑Java或.NET以外的任何库)以进行实时可视化波形。有人知道我应该从哪里开始搜索吗? 最佳答案 要流入浏览器的数据量很大。Flash或Flex图表可能是唯一能提高内存效率的解决方案。Javascript图表往往会因大型数据集而崩溃。 关于ruby-Ruby中的波形可视化,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.c

  6. Python 相当于 Perl/Ruby ||= - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Pythonconditionalassignmentoperator对于这样一个简单的问题表示歉意,但是谷歌搜索||=并不是很有帮助;)Python中是否有与Ruby和Perl中的||=语句等效的语句?例如:foo="hey"foo||="what"#assignfooifit'sundefined#fooisstill"hey"bar||="yeah"#baris"yeah"另外,类似这样的东西的通用术语是什么?条件分配是我的第一个猜测,但Wikipediapage跟我想的不太一样。

  7. java - 什么相当于 ruby​​ 的 rack 或 python 的 Java wsgi? - 2

    什么是ruby​​的rack或python的Java的wsgi?还有一个路由库。 最佳答案 来自Python标准PEP333:Bycontrast,althoughJavahasjustasmanywebapplicationframeworksavailable,Java's"servlet"APImakesitpossibleforapplicationswrittenwithanyJavawebapplicationframeworktoruninanywebserverthatsupportstheservletAPI.ht

  8. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  9. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  10. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读:随着叮咚买菜业务的发展,不同的业务场景对数据分析提出了不同的需求,他们希望引入一款实时OLAP数据库,构建一个灵活的多维实时查询和分析的平台,统一数据的接入和查询方案,解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型,最终引入ApacheDoris作为最终的OLAP分析引擎,Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图,在叮咚买菜数十个业务场景中广泛应用。作者|叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月,是一家专注美好食物的创业公司。叮咚买菜专注吃的事业,为满足更多人“想吃什么”而努力,通过美好食材的供应、美好滋味的开发以及美食品牌的孵

随机推荐