年更博主冒个泡，或将开启可视化之旅

很久没更新了呢，要是有人曾望穿秋水、盼星星盼月亮地希望我更文，那我只能对此表示歉意，虽然多半并不存在这样的人。

好吧，并没有，そんな事ないよ。其实是之前实现了几个可视化的图，想着倒是可以记录并分享下，毕竟教练看我实在不是打篮球的料，于是改教我可视化了，我也终于对自己每周都会看的节目进行了可视化。

说起来因为一直对数据可视化感兴趣，对能自己设计/DIY，并用D3.js等实现各种可视化效果而向往与憧憬，因而终于好好学习了下HTML/CSS/JS等前端基础知识以及可视化利器D3.js库。

鉴于谈到数据可视化时，可能每个人所想到的内容不尽相同，这里举个例子来说明下我所指代的可视化究竟是什么样的。

下图是荷兰的著名数据可视化创作者 Nadieh Bremer 对自己小时候接触到并很喜欢的「百变小樱」漫画进行可视化后最终呈现的效果。

大概没有人能抵抗的了这么漂亮的可视化吧。而这就是我所憧憬和想要实现的那类可视化作品。项目链接：http://www.datasketch.es/june/code/nadieh/

在写这篇文章前，我重新看了下这个项目的交互和开源代码，以及原作者详细描述的实现流程和遇上的种种问题，由于这不是本文的重点，因而关于这个总计投入86小时完成的项目的更多实现细节/流程将在后续文章中更新，这里仅一笔带过。

当然广而告之下，之后也会围绕这类可视化进行更多输出，敬请期待；剧透下 Nadieh Bremer 这个名字也会多次出现，可以搜索了解下。

言归正传，自己时不时会看看各种可视化作品，觉得不错的网站会随手放到浏览器书签里吃灰，也会在 behance 和 pinterest 上收藏好看的可视化图片。一直私心认为可视化的创作就像画画，虽然自己并不会画画，但大概都是需要多看看优秀作品，多开开眼，才能创作出真正内涵丰富，具有美感，令人惊艳的作品吧。下图是 pinterest 上自己收藏的一些图。

有着上述所说的习惯，因而某天看到了 poppy field 这个将过去一百多年里发生过的战争中的死亡人数，以罂粟花这一视觉元素进行可视化的非常棒的项目。项目链接： http://poppyfield.org/

下面这段话大概阐释了战争与罂粟花之间的内在联系。

Following the end of the First World War, the poppy became a symbol of commemoration. It was among the first plants to spring to life on Europe's devastated battlefields. Its colour, reminiscent of bloodshed, and its resilient yet delicate nature evoke the human relationship to war.
“第一次世界大战结束后，罂粟花成为纪念的象征。它是在欧洲饱受摧残的战场上重生的第一批植物之一。它的颜色让人联想到流血，其柔韧而细腻的本性唤起了人类与战争的关系。”

罂粟花元素的使用，生长开花的动画效果，都使我很喜欢这个项目，因而在微博分享后的第二天晚上就试着把该项目的n年前老旧源代码翻新跑了下，也借此啃啃代码实现方式，至于数据筛选等交互则是后来才加进来的。

原本也打算开源来着，不过一生之敌的CSS实在是令人畏惧，因而暂待填坑。不过自己确实有想过把很多很酷的可视化项目都统一整理到一起，统一翻新实现下，据我所知，似乎并没有人做过这件事，毕竟没有人比我更喜欢可视化，doge。

下图是自己最终复现的效果，因为实在不想用 jQuery，所以大概算是自己给自己增加了难度。

也正是受这个项目的影响，顺理成章地想着照猫画虎，对每周都会看的乃木坂46的团综「乃木坂工事中」的b站熟肉进行可视化，最初是想看看字幕组每期更新熟肉有多快，毕竟「肝之大者，为国为民」，各家字幕组爆肝、用爱发电的痕迹也可以借此挖掘并记录下。

确定目标后，爬取数据，融合数据，处理数据，进行可视化等都按部就班地推进着，其实也做了不少工作，回过头看，许多甚至没啥必要。

详情在后续新的文章里再介绍，这里就看看最终实现的可视化效果。一开始先基于现成的播放量和弹幕数，不断优化到自己还算满意的效果，并且首次引入d3-annotation进行数据标注，以使画面看上去内容丰富些。

出图后发现播放量最高的一期居然是EP64 赤脚来进行○○大会，污力十足的游戏对决，以压倒性优势占据第一，猜测是出圈吸引了路人，果然都是lsp。视频指路：https://www.bilibili.com/video/av5495147/

上述可视化的代码已在GitHub和码云开源：https://github.com/DesertsX/nogizaka-under-construction-dataviz。演示地址：

http://desertsx.gitee.io/nogizaka-under-construction-dataviz/。

后续也会详细讲讲代码原理，剖析这样的可视化是如何诞生的。虽然就是个折线图。

接着，按照 出熟肉所需时间 = b站更新时间 -（开播时间 + 当期节目时长）的简单假设，暂不考虑其他因素的影响，对时间数据进行处理，一顿操作后，也以同样的方式进行展示。虽然最初的想法是，可以自己画画「肝」的SVG图形，然后计算出某个数值作为爆肝指数，然后参照战争与罂粟花的形式进行展示，但最终先取巧完成。

自 20150420 开播的「乃木坂工事中」，前身是「乃木坂在哪里」(20111002－20150413)，同样是由日本搞笑艺人组合香蕉人「バナナマン」主持，开播至今也近10年。下图为「banana鳗」的本体。

而自己是2019年大概这个时候才渐渐接触并饭上乃团，开始每周都看「工事中」以来印象里周日晚上23点(北京时间)播出后，基本周一就能看到熟肉，上图也佐证了这一点；而再往前追溯，诸多原因导致和现在不一样的情形，但总体而言字幕组还是很给力的。

再后来想走马灯式的展示每期的封面/标题/播放量等数据，于是改成动态可视化版本，配上乃团超棒的曲子「きっかけ/契机」钢琴版作为BGM，回顾至今的所有期，就像弹幕里有人说的真的都是回忆。

视频也上传了b站：「乃木坂工事中」B站熟肉各期(EP01-269)播放量的动态数据可视化|「DataViz EP01」

https://www.bilibili.com/video/BV1np4y1v7Qg

想讲的大概就是这些，也自己给自己挖了些坑，可以慢慢填。

最后留个个人微信号：xiaoaozhj，以前一直没建微信交流群，想着要不趁此机会建个，感兴趣的发「加群」；不想加群，只想加好友的，也欢迎，望备注来源，如「来自公众号」。