用D3做了一个B站弹幕可视化

于 2017-02-24 13:29:25 发布 185 收藏 2
文章标签： python
原文链接：https://segmentfault.com/a/1190000008476302
版权

和朋友合作用d3可视化b站弹幕，一方面学习巩固，另外也是通过可视化大致了解下视频是否精彩，再决定看不看[捂脸]

使用方式

通过bookmarklet使用，有点像chrome插件但更方面一点~。
地址：bilibili可视化
没用过的进去还有视频演示哦~

效果

来看个暴漫可视化结果的一部分

clipboard.png

github

地址：bilibili-Visualization

代码都在上面了，欢迎issue、star、fork，因为优化还没做完……

以下还有一些介绍

代码介绍、心得先等等……

clipboard.png

需要从以上红色3个位置读取数据，请保证其加载完成，另外由于xpath稍有不同，因此请保证为HTML5播放器

点击书签一次后，10s内完成可视化的图表，主要包括2个时间相关的图表，一些定类变量和数据详表。

clipboard.png

clipboard.png

clipboard.png

提问
weixin_33701251
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据可视化-使用SVG和D3可视化浏览指标
03-02
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交媒体站点（比如Twitter、Facebook和YouTube）提供了全面的Web服务接口来公开它们的功能。例如，YouTubeDataAPI支持应用程序将视频上传到YouTube，或播放一个网站上现有的YouTube视频。现在这些站点也在开发分析API。举例而言，YouTubeAnalyticsAPI向编程客户端提供了查看次数和喜欢次数（numberoflikes）等统计数
[源码和文档分享]基于python的B站弹幕数据分析（爬虫+可视化）
qq_38474647的博客
01-02 2440
python—B站弹幕数据分析 1 背景 在视频网站上，一边看视频一边发弹幕已经是网友的习惯。B站就是其中一个比较出名的弹幕网站，许多年轻人都喜欢逛B站,看喜欢的动漫亦或某些UP主做的一些剪辑。本项目，就是对B站弹幕数据进行分析。选取分析的对象是B站上一部国漫《全职高手》。 2 环境的安装 本项目实在pycharm中实现...
【Python可视化】 将 bilibili 弹幕进行可视化（词云图）
zhouwhui 的博客
08-10 1201
获取到bilibili视频弹幕后存储到txt文件中，本篇博文将txt文件中的博文做一个可视化的展示，可视化的方式采用了词云图的方式
[数据分析笔记] 网易云歌单分析系列03—pyecharts折线图
wong_faye的博客
07-17 774
0.导入数据 import numpy as np import pandas as pd import pymysql from pyecharts import options as opts from pyecharts.charts import Bar, Line, Grid from pyecharts.commons.utils import JsCode from pyecharts.globals import ThemeType conn = pymysql.connect(
B站UP主指法芬芳张大仙弹幕爬取及可视化
weixin_46778443的博客
08-14 982
文章目录前言一、爬取视频弹幕相关信息1.B站弹幕接口2.获取视频的cid3.获取视频弹幕信息二、弹幕数据分析1.弹幕内容分析 -- 词云图2.弹幕发送者分析 -- 水平条形图3.弹幕颜色分析 -- 饼图4.弹幕发送时间分析 -- 弹幕密度图三、整体代码 前言         在此之前，爬取了大仙投稿的全部视频的详细信息。=>传送门=<提取出2020年度的视频数据，通过观察可以发现下图所示视频的弹幕数最多，本文以此视
数据可视化之动态柱状图图表
初一的博客
07-23 6996
数据可视化之动态柱状图图表 这几天在B站看到了一个宝藏UP主Jannchie见齐，在网上找到了框架源码并学习。以下是可视化过程。 框架鸣谢B站UP主：Jannchie见齐 框架GItHub：https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js 第一部分：目标 第二部分：数据抓取 第三部分：处...
数据可视化，使用D3组件进行布局
03-02
在这个由两部分组成的文章系列中，将学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据具有很大帮助。本文将演示使用D3的和您自己的计算结果...
DockerSwarm的一个可视化工具使用DockerRemoteAPINodeJS和D3实现
08-10
Docker Swarm的一个可视化工具 使用 Docker Remote API, Node.JS, 和D3实现
数据可视化实战使用D3设计交互式图表.pdf+源码
03-16
数据可视化实战：使用D3设计交互式图表.pdf+源码。
d3可视化实战
04-03
是文字版本，数据可视化是展示数据的重要手段，广泛适用于数据分析、计量统计、演讲展示和各种网 站应用。而通过浏览器来呈现数据不受平台限制，任何计算机只要能上网就可以看到漂亮的交 互式图表。本书将带领读者...
D3_d3公司网页_可视化网页设计_
09-30
网页设计，包含很多功能，选择对各种常见高级程序设计语言都较为通用的语法结构作为分析对象
d3-soccer:一个D3插件，用于可视化事件流足球数据
04-29
d3足球一个D3插件，用于可视化事件流足球数据。正在安装如果使用NPM，则npm install d3-soccer 。 否则，请下载。 支持AMD，CommonJS和香草环境。 在香草中，将导出d3全局变量： < script src =" ...
D3js初探及数据可视化案例设计实战南
02-24
使用D3js绘制图形D3js是应用在web开发上的开源JS组件库，是一个数据可视化工具。D3的全称是Data-DrivenDocuments(数据驱动文档)，在github上关注数量超过了2万人，是非常受欢迎的开源工具。使用d3的有开发者，有设计...
D3.js数据可视化实战手册.pdf
08-09
D3.js数据可视化实战手册.pdf
一个JavaScript库预渲染D3可视化到内联SVG元素
08-10
一个JavaScript库，预渲染D3可视化到内联SVG元素，以减少感知页面加载时间并减少无用的绘制闪烁。
数据可视化 D3 图表的绘制（三）添加坐标轴
一只菜鸡
10-30 1600
坐标轴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
精通D3.js：交互式数据可视化高级编程
08-10
本书是一个比较完整的D3.js教程，讲解了D3的所有重要的知识点，既有基础入门知识，又有相对深入的内容。有易到难，循序渐进，图文并茂，清晰易懂。
d3.js第七次人口普查可视化分析（含数据和源代码）
06-28
d3.js，将获取到的数据进行处理，将不同数据可视化成各种图形，折线图，饼状图，条形等，将各个年份的数据与图形对应起来分别是受教育情况、年龄组成、性别比例和户籍比例，并且将数据与图形相结合进行交互。
网络可视化：使用D3进行网络可视化
02-05
使用和简单网络（图形）可视化。 表中的内容 屏幕截图 载入资料 套用筛选器 暗模式静态/动态图 其他 用法 遵循指示：:backhand_index_pointing_down_medium-light_skin_tone: // Step 1: clone the repository. git...
写一个利用D3. js实现数据可视化的代码
最新发布
03-23
非常感谢您的提问。以下是一个使用 D3.js 实现数据可视化的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3.js 数据可视化示例</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 定义数据 var data = [10, 20, 30, 40, 50]; // 创建 SVG 元素 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 300); // 创建矩形元素 svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return i * 70; }) .attr("y", function(d) { return 300 - d * 5; }) .attr("width", 50) .attr("height", function(d) { return d * 5; }) .attr("fill", "steelblue"); </script> </body> </html> ``` 这段代码将创建一个 SVG 元素，并在其中绘制了一组矩形，每个矩形的高度对应数据中的一个数值。您可以根据需要修改代码中的数据和样式来实现不同的数据可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值