HTML5 + JS 极坐标散点图

发布于 2025-01-04 03:30:42 字数 948 浏览 2 评论 0原文

谁能推荐现有的 HTMl5 / JS 数据可视化工具包或 lib 来帮助生成与此类似的极坐标散点图？代码示例会很酷！

不幸的是，我必须在平板电脑上进行这项工作才能查看数据的实时副本。所以没有 flash，我无法每天使用 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 中的值驱动（不是随机的），并绘制类似于以下的气泡:

<一href="http://mbostock.github.com/protovis/ex/bubble.html" rel="nofollow">http://mbostock.github.com/protovis/ex/bubble.html

设置大小、标题和半径根据我的喜好。

这将为您提供类似于 matplotlib 提供的加权极坐标散点图，而普通雷达图仅允许您应用图标而不是加权气泡。

原文

Can anyone recommend existing HTMl5 / JS data visualization toolkits or lib that can help generate polar scatter charts similar to this? Code example would be cool!

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

Unfortunately, I have to make this work on tablets to look at live copy of data. So no flash and I can't pre-generate this every day using matplotlib or others.

Thank you in advance!

UPDATE:

What I end up doing something similar to:

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

In particular the following pieces of code helps a lot:

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)};
  });

Where r is driven by a value in DB (not random), and to draw the bubbles similar to:

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

set the size, title and radius based on my preference.

This will give you the weighted polar scatter chart similar to the one that matplotlib provide, whereas normal radar chart will only let you apply icon instead of weighted bubble.

分享到QQ

分享到微博