有趣的网站模拟数据可视化设计

2019-09-07 分类：网站建设

数据可视化是在上升。世界各地的出版商——个人博客和主要在线出版物都意识到图表、地图和组合的两个可以传达一个消息远比普通的数字可以更有效。从简单的图表的信息图形复杂时间轴动画,数据可视化是出现在网络上。然而,正如在其他地区,一旦每个人都在火车上,区分自己和包变得困难。

请继续阅读,找出一组物理引擎可以分开你的努力。

你不需要去远处寻找数据可视化的例子。把谷歌分析的实时视图,哪些地方不同大小的泡沫在高级地图说明定量信息:

或者采取“石油的世界地图“通过纽约时报(顺便说一下,确实很多漂亮的数据可视化)。映射的工作,但我敢打赌你们大多数人遇到更漂亮的地图,泡沫不会重叠形成的一种扭曲的地图,更大的泡沫推动的较小的地方,还被《纽约时报》:

地图这样特别好的相对较少的国家分配值时——并不是所有的国家在奥运会上赢得奖牌,毕竟。如果泡沫直接被放置在各自的国家,他们会重叠,结果不会是视觉上赏心悦目。

有了数据可视化库amCharts多年来,我总是寻找方法来帮助用户可视化数据的方式是创意和美观,有效地传达他们的信息。地图类似于本文中讨论的无疑是很好的传达定量地理信息的手段。往下读,找出如何让这种事发生。

默认特性的映射库- JavaScript地图让你生成一个标准的泡沫地图很容易:

上面的地图已经很好看和实现很简单,但是重叠的仍然是一个问题。让我们解决这个问题。

我可以尝试编写自己的脚本检测和解决冲突(不是一件容易的事)。从我自己的游戏开发经验,我知道所有的物理仿真库内置的碰撞检测。让我们使用其中之一。

但为什么不呢? 因为我们利用这些库的力量,我们也可以用他们的其他特性。让我们使我们的图表动画逼真的运动一个真正令人印象深刻的结果,无疑会捕获用户的注意力。

一群物理学现成的JavaScript库。我选择最著名Box2D JavaScript港口之一,box2dweb。这个想法很简单。我们与泡沫,有地图,我们有一个box2d世界(看不见的用户)相同大小的泡沫相同的复制。

我们将使用(看不见的)box2d世界模拟泡沫运动和交互(如碰撞检测和其他东西),监控气泡的位置和动态地修改这些位置在地图上。我不会进入技术细节,您可以查看源代码,如果你想要的。防止泡沫下降,我们简单地设置重力0。这是结果:

太好了,不是吗? 现在,我想在运行时改变一些泡沫的大小,让其他泡沫相应移动。要做到这一点,我们必须规模box2d世界的泡沫和地图一起泡沫,只是观察会发生什么。经过一些测试,我发现这工作可能通过增加大小的泡沫,而不是通过减少——泡沫取代之前的其他大型泡沫缩小不返回:

我们需要一个更复杂的解决方案。经过实验,我来到这个:

创建一个静态对象的每个国家,始终保持在适当的位置。
让这个对象“传感器”,这样其他对象不碰撞。
创建一个固定传感器和泡沫之间的联合,并调整这个共同的属性,允许一些运动虽然总是被吸引的位置传感器。

很好地工作:

只是为了显示什么可以用物理引擎,下面是另一个演示我们的地图全球咖啡消费。在你问之前,我们完全由数据。

这张地图很我们的技术方法与上面过去演示。唯一的区别是,泡沫最初不加入他们的目的地位置,而是放置在图的中间,就在咖啡壶,咖啡杯是由三个矩形box2d。如果你取消所有行的“调试”(两个地方在画布元素的JavaScript源和HTML),你可以得到一个box2d debug-draw视图(在做这样的工作时非常有帮助):

一个线框图进行调试物理在我们想象的委员会(查看大版本)

太棒了,不是吗? 而且只有500行代码(不包括数据)。