数据可视化是在上升。 世界各地的出版商——个人博客和主要在线出版物都意识到图表、地图和组合的两个可以传达一个消息远比普通的数字可以更有效。 从简单的图表的信息图形复杂时间轴动画, 数据可视化是出现在网络上 。 然而,正如在其他地区,一旦每个人都在火车上,区分自己和包变得困难。
请继续阅读,找出一组物理引擎可以分开你的努力。
你不需要去远处寻找数据可视化的例子。 把谷歌分析的实时视图,哪些地方不同大小的泡沫在高级地图说明定量信息:
一个示例泡沫图(图片: 谷歌分析 )( 查看大版本 )
或者采取“ 石油的世界地图 “通过纽约时报(顺便说一下,确实很多 漂亮的数据可视化 )。 映射的工作,但我敢打赌你们大多数人遇到更漂亮的地图,泡沫不会重叠形成的一种扭曲的地图,更大的泡沫推动的较小的地方,下面的地图,还被《纽约时报》:
另一个泡沫地图(图片: 纽约时报 )( 查看大版本 )
地图这样特别好的相对较少的国家分配值时——并不是所有的国家在奥运会上赢得奖牌,毕竟。 如果泡沫直接被放置在各自的国家,他们会重叠,结果不会是视觉上赏心悦目。
有了数据可视化库 amCharts 多年来,我总是寻找方法来帮助用户可视化数据的方式是创意和美观,有效地传达他们的信息。 地图类似于本文中讨论的无疑是很好的传达定量地理信息的手段。 往下读,找出如何让这种事发生。
默认特性的映射库- JavaScript地图让你生成一个标准的泡沫地图很容易:
上面的地图已经很好看和实现很简单,但是重叠的仍然是一个问题。 让我们解决这个问题。
我可以尝试编写自己的脚本检测和解决冲突(不是一件容易的事)。 从我自己的游戏开发经验,我知道所有的物理仿真库内置的碰撞检测。 让我们使用其中之一。
但为什么不呢? 因为我们利用这些库的力量,我们也可以用他们的其他特性。 让我们使我们的图表动画逼真的运动 一个真正令人印象深刻的结果,无疑会捕获用户的注意力。
一群物理学现成的JavaScript库。 我选择最著名Box2D JavaScript港口之一, box2dweb。 这个想法很简单。 我们与泡沫,有地图,我们有一个box2d世界(看不见的用户)相同大小的泡沫相同的复制。
我们将使用(看不见的)box2d世界模拟泡沫运动和交互(如碰撞检测和其他东西),监控气泡的位置和动态地修改这些位置在地图上。 我不会进入技术细节,您可以查看源代码,如果你想要的。 防止泡沫下降,我们简单地设置重力 0。 这是结果:
太好了,不是吗? 现在,我想在运行时改变一些泡沫的大小,让其他泡沫相应移动。 要做到这一点,我们必须规模box2d世界的泡沫和地图一起泡沫,只是观察会发生什么。 经过一些测试,我发现这工作可能通过增加大小的泡沫,而不是通过减少——泡沫取代之前的其他大型泡沫缩小不返回:
我们需要一个更复杂的解决方案。 经过实验,我来到这个:
创建一个静态对象的每个国家,始终保持在适当的位置。
让这个对象“传感器”,这样其他对象不碰撞。
创建一个固定传感器和泡沫之间的联合,并调整这个共同的属性,允许一些运动虽然总是被吸引的位置传感器。
很好地工作:
只是为了显示什么可以用物理引擎,下面是另一个演示我们的地图全球咖啡消费。 在你问之前,我们完全由数据。
这张地图很我们的技术方法与上面过去演示。 唯一的区别是,泡沫最初不加入他们的目的地位置,而是放置在图的中间,就在咖啡壶,咖啡杯是由三个矩形box2d。 如果你取消所有行的“调试”(两个地方在画布元素的JavaScript源和HTML),你可以得到一个box2d debug-draw视图(在做这样的工作时非常有帮助):
一个线框图进行调试物理在我们想象的委员会( 查看大版本 )
太棒了,不是吗? 而且只有500行代码(不包括数据)。
结论
物理引擎不只是为游戏和专门的模拟。 他们使我们能够添加惊人的效果,只有几行代码,解决几何问题,否则我们周——如果不是数月建立了我们自己的。
我们这里关注box2d引擎,这是健壮的和强大的,但是它可能会有点慢慢的设备上。 很多引擎是可用的。 我们鼓励您尝试一些与你或看到点击哪一个最适合于手头的任务。 如果你只是需要解决重叠的问题,例如,然后一个轻量级的选择可能奏效,和一个小得多的足迹和低得多的处理开销。
实际上是没有限制你能做什么与物理数据的可视化。 创建列图表,让他们像多米诺骨牌,或使饼图,反弹和更多。 可以使对象在图表和地图,旋转,跳跃,改变形状,变形的方式将更快地抓住观众的注意力比常规静态甚至互动版本。
你会找到更多的例子和数据可视化的工具 amCharts 网站。文章整理来自网络，转载请注明北京网站建设公司-北京传诚信，翻译不好，请见谅！
