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

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

可能大家是带着好奇与疑惑点进文章的,想着怎么时隔14个月突然更新了?是啊,为什么呢。那自然是因为愧疚,想念大家啊...

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

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

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341