HTML5 + JS Polar Scatter Charts

时间:2012-02-08 21:25:22

标签: javascript html5 charts data-visualization scatter-plot

任何人都可以推荐现有的HTMl5 / JS数据可视化工具包或lib,它们可以帮助生成类似于此的极坐标散点图吗?代码示例很酷!

http://matplotlib.sourceforge.net/examples/pylab_examples/polar_scatter.html

不幸的是,我必须在平板电脑上进行这项工作才能查看数据的实时副本。所以没有闪光,我不能每天使用matplotlib或其他人预生成。

提前谢谢!

更新

我最终做了类似的事情:

http://mbostock.github.com/protovis/ex/transform.html

特别是以下几段代码有很多帮助:

var x = pv.Scale.linear(-kx, kx).range(0, w),
    y = pv.Scale.linear(-ky, ky).range(0, h);

var data = pv.range(100).map(function(i) {
    var r = .5 + .2 * Math.random(), a = Math.PI * i / 50;
    return {x: r * Math.cos(a), y: r * Math.sin(a)};
  });

其中r由DB中的值驱动(非随机),并绘制类似于:

的气泡

http://mbostock.github.com/protovis/ex/bubble.html

根据我的偏好设置大小,标题和半径。

这将为您提供类似于matplotlib提供的加权极坐标散点图,而普通雷达图只会让您应用图标而不是加权气泡。

2 个答案:

答案 0 :(得分:0)

Sencha.com的EXT.js可以做到这一点。它也会自动渲染到Canvas和SVG。

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/Radar.html

答案 1 :(得分:0)

您可以查看广告D3。他们有很多可视化示例,包括散点图。