前几天看了一篇讲可视化数据的文章,便想着自己试试做做,于是打算用ATSiege在Youtube产生的大量数据做做看。于是下载了相关软件,花了不少时间调取了Youtube的视频数据,进行了一些处理,但是准备开始做图表分析的时候遇到了一些困难。这个时候突然想起来B站之前很流行做数据可视化视频,手上又有这么多现成的数据,那就来做做看吧!

Ps.文章结尾有好东西别错过哟~

最终效果

先直接来看看成品的效果吧!

Bilibili

Tips:B站外部播放器非常狗屎,建议直接点击这里观看。

Youtube

前期准备

在制作数据可视化前,你需要准备这些东西。

  1. 数据预处理工具 Tableau Prep
    官网:https://www.tableau.com/zh-cn
    学生授权以及公共研究用的授权是免费的,不过这个软件可以使用Excel代替,功能大体相同。

  2. 数据可视化视频生成工具
    Github项目地址:https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js
    Zip地址:https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js/archive/master.zip

数据收集

数据的收集是整个过程的第一步,也是非常麻烦的一步,对于大部分网站都需要使用脚本爬虫来批量抓取数据,不过因为我们今天调取数据的Youtube平台自身支持数据导出,所以脚本爬虫什么的我们之后再讲,如果不想了解油管怎么导出的可以跳过下面的这一小节。

Youtube数据导出

首先打开Youtube创作者工作室,注意这里打开的不是Youtube Studio,Studio提供的导出数据功能并不如传统的创作者工作室好用,如果打开了Studio的话可以在左下角进行切换。

接下来打开数据分析板块,如果我们需要调取观看时长与观看次数的话,可以打开观看时长子版块。

接下来,我们需要调取这个视频从上传日开始至今每一天的数据,我们需要把右上角的时间跨度修改为存在期间

顺便一提,经过我的测试,这里只能导出500天的数据,如果时间跨度超过了500天的话可以考虑使用自定义时间跨度对数据进行拆分。

点击右上角的小齿轮,将导出模式修改为所有维度,所有指标,并保存。

接下来就可以导出数据了,点击右上角的导出报告,接着选择第二项Microsoft Excel (.xls),因为含有多张表格,这里不建议选择.csv格式进行导出,后期处理稍稍有些麻烦。

打开表格,进入日期工作表,就可以查看精确到每天的详细数据了。

但是!这是整个频道的数据,并不是拆分成单个视频的数据,所以这个数据并没有什么卵用,需要分多个视频重新调取。

因为不会写脚本,我采用了一个笨办法。在左上角的搜索内容选项一个一个视频地查看数据,并进行导出,缺点是工作量实在是有点大。

导出后记得把所有文件放在一个单独目录中,并给文件改个名,比如说可以改成视频名称,之后可以用作柱状图上的名称,这一步就算是完成了。

数据整理与清洗

本段介绍的Tebleau Prep是整理数据的众多方法之一,操作可以全部使用Excel完成,本段主要是提供一个思路。

打开 Tableau Prep ,左侧选择连接,并选择Microsoft Excel,全选所有视频的数据文件,并打开。


第一步,我们需要批量选择所有文件中的这个字段。

进行这一步,我们需要进行一些设置:

  1. 选择左侧任意文件,将数据所在的工作表拖至右侧空白面板。例如我们现在需要的数据在日期工作表中,我们需要把日期拖到右侧。
  2. 在右下面板中选择通配符并集
  3. 将搜索范围限定到存放数据文件的文件夹中。
  4. 文件匹配方式为包括,匹配内容为*,表示我们需要搜索这个文件夹下的所有文件。
  5. 工作表匹配方式为包括,匹配内容为日期,表示我们需要搜索并提取所有名称中包括日期的工作表。
  6. 等待搜索完成后点击应用,等待进度条处理完毕。

第二步,我们需要初步确认一下我们需要表中的哪几个字段。

接下来我们需要看一下,右下角出现的表格中的那么多字段,我们需要哪些。
比如说我们需要观看时长随日期的增长趋势,那么我们就只需要勾选日期以及观看时长(分钟)两个字段。
另外,我们还需要根据文件名来确定视频名称字段,我们还需要勾选一下位于表格底部的File Paths字段

第三步,对数据进行格式整理。

在后续的可视化视频中,我们使用的工具严格限制了原始数据的格式,例如日期必须是YYYY-MM-DD,而Youtube导出的日期格式还包括了几时几分,这些数据都是不符合要求的,我们需要对他们进行整理。

  1. 选择流程图中原始数据旁的加号,选择+ 添加步骤

  2. 将日期字段的数据类型修改为字符串

  3. 使用拆分功能,点击右上角三个点,选择拆分值 -> 自定义拆分

  4. 我们注意到,我们只需要第一个空格之前的内容,所以在使用分隔符处中填入一个空格,并选择拆分第1个字段。

  5. 这样我们就得到了我们想要的日期格式,相同方法处理File Paths字段,得到不含文件名后缀的视频名称。

  6. 右键删除不需要的两个字段,并把剩下的三个字段进行重命名,视频名称修改为name,观看时长修改为value,日期修改为date

到此为止我们回顾一下我们这一步所进行的处理。

第四步,导出我们需要的数据。

接下来,我么就需要把这些数据进行导出为.csv格式表格了。

  1. 在流程图中添加输出

  2. 选择保存到文件,并保存为逗号分隔值(.csv)格式文件。记得再次核对一下右侧表格是否分为了name,data,value三个字段,如果这里出了问题的话可能会导致后续操作无法进行。

  3. 点击运行流程,即可运行流程并对数据进行导出。

  4. 打开导出的文件核对一下,发现value字段是每天新增的观看时长,而非总观看时长。因为我还没完全弄懂Tableau的公式处理,我这里使用了Excel函数进行了汇总计算,将value字段替换成了播放量的总和。

可视化视频制作

首先解压我们之前下载的生成工具,打开\src目录,可以看到里面有一个config.js文件,使用编辑器修改这个配置文件即可控制生成视频的最终效果,里面有详细注释我就不再多解释,都可以自己改改试试看,我贴一下我生成这个视频使用的配置。

const config = {
  // 数据源的编码方式。
  // 默认为UTF-8。
  // 如果是国内用户,且使用旧版Execl处理数据,保存的编码很可能是GBK的,如果出现乱码则将这里改成GBK。
  // 不建议修改这里。而是建议将自己制作完毕的csv文件的内容复制到example.csv中。因为example.csv的编码格式是所有语言都支持的。
  // Encoding is not recommended to be modified.
  // Instead, it is recommended to copy the contents of the CSV file produced by yourself to example.csv.
  // The encoding format of example.csv is supported by all languages.
  encoding: "UTF-8",

  // 每个时间节点最多显示的条目数。
  max_number: 18,

  // 控制是否显示顶部附加信息文字。
  showMessage: true,

  // 时间自动排序。
  // !!!请确保打开此项时,使用的是标准日期格式!(即:YYYY-MM-DD HH:MM)
  // 如果关闭,排序顺序为csv表格的时间字段自上而下的出现顺序。
  // 如果你的日期格式为标准的日期格式,则可以无视数据排序,达到自动按照日期顺序排序的效果。
  // 开启auto_sort可以实现时间的自动补间。
  // Auto Sort by Time
  // Please ensure using standard datetime format (YYYY-MM-DD HH:MM) when this term is enabled!!!
  auto_sort: false,

  // 时间格式化
  timeFormat: "%Y-%m-%d",

  // 倒序,使得最短的条位于最上方
  reverse: false,

  // 类型根据什么字段区分?如果是name,则关闭类型显示
  divide_by: 'name',

  // 颜色根据什么字段区分?
  divide_color_by: 'name',

  // 字段的值与其对应的颜色值
  color: {
    "Chinese": "#1177CC",
    "Japanese": "#667788"
  },

  // 颜色渐变:颜色绑定增长率
  changeable_color: false,

  // 添加功能:不同类型的增长率所用渐变色不同(暗→亮)
  // 如果该项为false,那么所有条目全部按照color_range变色
  // 如果该项为true,那么按照src/color_ranges.js中的color_ranges变色,默认色板为color_range
  // 一个具体的设置模板见src/_color_ranges.js,将其更名为color_ranges.js再设置即可
  divide_changeable_color_by_type: false,
  color_range: ['#ff7e5f', '#feb47b'],


  // 附加信息内容。
  // left label
  itemLabel: "",

  // right label
  typeLabel: "ATSiegeChannel 中文",


  // 榜首项目信息的水平位置 。
  // Top item information horizontal location
  item_x: 0,

  // 时间点间隔时间。
  interval_time: 0.5,

  // 上方文字水平高度。
  text_y: -50,

  // 右侧文字横坐标
  text_x: 1000,
  // 偏移量
  offset: 350,

  // 长度小于display_barInfo的bar将不显示barInfo。
  // Hide barInfo if bar is shorter than barInfo
  display_barInfo: 0,

  // 使用计数器
  // 注意!使用计时器和使用类型目前不能兼容,即不能同时开启!
  // 计数器会出现在右上角,记录着当前榜首的持续时间。
  use_counter: false,
  // 每个时间节点对于计数器的步长。
  // 比如时间节点日期的间隔可能为1周(七天),那么step的值就应该为7。
  step: 1,

  //////////////////////////////////////////////////////////////////////////////
  // 格式化数值
  // 这里控制着数值的显示位数。主要靠修改中间的数字完成,如果为1则为保留一位小数。
  // 逗号表示每隔三位数用","分割
  // '.2f' means keeping two decimals.
  format: ",.0f",

  // 后缀
  postfix: " 分钟",

  // 如果看不懂这是在干什么的话,建议不要修改这里。
  // 反格式化函数:
  // 格式化操作可能会导致NaN问题。此函数将格式化后的数值反格式化为JS可以识别的数字。
  deformat: function (val, postfix) {
    return Number(val.replace(postfix, "").replace(/\,/g, ""));
  },
  //////////////////////////////////////////////////////////////////////////////

  // 图表左右上下间距。
  // 注意,left_margin不包括左侧的label,修改数值较小会导致左侧label不显示
  left_margin: 250,
  right_margin: 180,
  top_margin: 180,
  bottom_margin: 0,

  // 是否开启时间标签。
  dateLabel_switch: true,
  // 时间标签坐标。建议x:1000 y:-50开始尝试,默认位置为x:null,y:null
  dateLabel_x: null,
  dateLabel_y: null,

  // 允许大于平均值的条消失时上浮。
  allow_up: false,

  // 所有条目上浮 - 用于反向排行榜等情况
  always_up: false,

  // 设置动画效果,如果为true,则新进入的条目从0开始。
  enter_from_0: true,

  // 如果所有数字都很大,导致拉不开差距则开启此项使得坐标原点变换为(最小值)*2-(最大值)
  big_value: true,

  // 如果要使用半对数坐标,则开启此项
  use_semilogarithmic_coordinate: false,

  // barinfo太长?也许可以试试这个
  long: false,

  // 延迟多少个时间节点开始
  wait: 15,

  // 单独控制交换动画速度倍率
  update_rate: 0.5,

  // 开启匀速动画效果
  // animation:'linear',
  showLabel: true,

  // label x轴位置
  labelx: -46,

  use_img: true,

  // 图片路径,本地图片或者网上图片。
  // 也可在imgs.js中配置。
  imgs: {
    "条目": "http://i1.hdslb.com/bfs/face/983034448f81f45f05956d0455a86fe0639d6a36.jpg",
    "任意名称": "path/to/img"
  },

  // 全局背景颜色
  background_color: "#FFFFFF",

  // 矩形柱是否为圆角矩形
  rounded_rectangle: true,

  // 是否显示x轴轴线
  show_x_tick: true,

  // 限制bar info 展示的长度
  // limit bar info display length
  bar_name_max: 30
};

最后就只需要打开文件夹中的bargraph.html,选择文件,数据可视化视频就显示在屏幕上辣(建议按F11开启浏览器全屏)!如果想要分享给他人或者上传的话,可以使用录制工具录下来,再加点BGM之类的,效果超棒~

好东西?

最后把制作这个视频的工具(配置文件已经修改好打开就能用),还有ATSiege观看次数的数据库打包分享给大家吧,下载之后打开\src目录中的bargraph.html文件后,选择打开ATSiege观看数数据.csv文件,就可以观看ATSiege在Youtube平台视频观看数的增长趋势(这个并不是开头视频里的播放时长数据哟)~

下载地址(524 KiB):https://github.com/Ruikoto/Historical-ranking-data-visualization-based-on-d3.js/releases/download/1.0/ATSiege.7z

解压密码:ruikoto.pub

结语

最近看了几个和数据有关的TED演讲,对这方面有些感兴趣,本来装 Tableau 的时候并没打算做数据可视化的视频,不过突然想起来就正好做了,导致这个系列的第一篇文章有些偏题,甚至完全没有用到 Tableau 软件的本体,那么剩下想和大家分享的内容就留到下篇文章吧~

还有就是,看了不评论我这个云酒吧真的好冷清的,各位好哥哥不管有没有看完留个评论好mua?


どうして俺が中心の女子高生美少女ハーレムサークルがないんだよ!