Card image

为理清垃圾分类规律,我们从上海市垃圾分类查询平台上筛选了2055件物品的垃圾分类信息。看可视化教你如何分类垃圾。

垃圾分类可视化查询手册

时间
2019/6/28

工具
Matter.js、D3.js、P5.js、Adobe Illustrator

数据
上海市绿化和市容管理局,上海垃圾分类查询平台

在前一段时间刚好做了个 个人主页效果 ,你会看到一个小球球掉落下来的,所以在做这个题的时候,我就不妨把垃圾从屏幕上方掉落吧,所以有了这个有小交互的封面效果。

Card image

这里运用了一个 matter.js 的物理效果库,简单的代码就可以写出不错的掉落碰撞效果。在 Shiffman 的 教程帮助下,可以做到基本的物理掉落以及触碰物体可以引起碰撞的效果。在教程和官方文档案例中,一般会用几何形状去掩饰,这里只是把图片只是代替几何部分,等同于几何中的矩形,达到小黄鸭大战小龙虾的场景。

Card image

在内容部分,我们想找出词与词的关系,通过把相同词根的词融合在一起,可以看出《垃圾词汇表》,虽然拥有同一个词根,但每个词根下面可能拥有不同属性的垃圾,干垃圾、湿垃圾、可回收垃圾、有害垃圾。当它这些相同词根的“垃圾”揉成一团,带有“瓶”、“包装“、”金属“等等的词汇会是什么样子呢?

这个部分我很喜欢的一个数据可视化设计师 @NadiehBremer 写了一份关于用 svg 融合的教程 More fun data visualizations with the gooey effect 教程,可以做到让点揉在一起的效果,因为我不太会 svg,所以这个部分的效果都是我的同事承包了。

Card image

点击每个揉杂的垃圾可以看到是什么组成了它以及每个垃圾属性的比例。

Card image