- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
对于 Protovis 新手来说,这是一个相当艰巨的项目,但也许你可以帮我把它分成易于消化的 block ?
我想要构建的是一个“交互式面积图”,如下所示:
首先是数据...我在 Excel 中有各省的数据:
Province Year 10 100 1000 10000 A 1970 2 4 6 3 A 1971 3 6 8 5 B 1970 6 9 12 6 B 1971 4 8 11 8 .... ... . . . .
For each province and year, I would like to be able to draw an area chart:
vis.add(pv.Area)
.data(data.ProvinceA[1970])
.bottom(1)
.interpolate("basis")
.left(function(d) x(d.x))
.height(function(d) y(d.y))
.fillStyle("rgb(21,173,210)")
.anchor("top").add(pv.Line)
.lineWidth(3);
然后我想添加两种类型的交互:
选择复选框和时间 slider 共同决定在任何给定时间哪些区域可见。例如,如果选择省 A 且年份为 1984 年,则仅显示该地区。如果现在拖动时间 slider ,则现在会显示省 A 的相应年份。如果选中另一个省,则会覆盖这些区域,并在时间 slider 移动时重新绘制两个区域。
Protovis 问题:
最佳答案
格式化数据:第一步是使用一些外部工具将其转化为 JSON(我真的很喜欢 Google Refine,尽管它是一个非常大的工具,如果这就是您所需要的 - 试试 Mr. Data Converter一个快速而肮脏的选择)。这些工具可能会将数据作为 JSON 对象提供给您,如下所示:
`[{"Province":"A", "Year":"1970", "10":2, "100":4, "1000":6, "10000":3}, ...]`
一旦您获得了 JSON 格式的数据,您就会希望将其调整为您的可视化。您将要向每个 pv.Area 传递一个值数组 - 从您的描述来看,您似乎想要 [10, 100, 1000, 10000] 值。 Protovis 有很多用于操作数据的工具 - 请参阅 pv.Nest operator .有很多方法可以解决这个问题 - 我可能会这样做:
data = pv.nest(data)
.key(function(x) {return x.Province})
.key(function(x) {return x.Year})
.rollup(function(v) {
return [v[0]['10'], v[0]['100'], v[0]['1000'], v[0]['10000']];
});
它给你一个像这样的对象:
{
A: {
1970: [2,4,6,3]
// ...
},
// ...
}
这将为您设置界面元素。将选中的省份数组和当前年份保存在全局变量中:
var currentProvinces = ['A', 'B', ...];
var currentYear = 1970;
并设置您的区域以引用这些变量:
// a containing panel to help with layout and data
var panel = vis.add(pv.Panel)
.data(function() currentProvinces); // making this a function allows it to
// be re-evaluated later
// the area itself
var area = panel.add(pv.Area)
.data(function(province) data[province][currentYear]);
// plus more area settings as needed
现在使用一些其他库——我偏爱 jQuery, slider 使用 jQuery UI——来创建你的界面元素。每个元素的 onchange 函数只需要设置相应的全局变量并调用 vis.render()
(假设您的根面板名为 vis
)。这应该很简单 - 请参阅 here对于使用 jQuery UI 制作与您的想法非常相似的时间 slider 的 Protovis 示例。
关于javascript - 使用 Protovis 的交互式面积图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4773393/
我正在使用 Protovis Arc 布局,我想根据数据集中定义的“值”属性为节点之间的链接着色。我怎样才能访问它? 数据集定义如下:节点:...{nodeName:"书籍"}... 链接:...{源
我正在关注规模交互示例@http://mbostock.github.com/protovis/docs/invert.html我正在尝试绘制 2 条线系列图表。 我的JSON文件如下: var ps
根据提交历史,protovis 似乎自 2010 年 8 月以来就没有被触及过。该项目是否已被放弃? http://gitorious.org/protovis/protovis/commits/ma
我喜欢 http://vis.stanford.edu/protovis 的 protovis 库.我正在尝试使用它来创建树状图。 Protovis 的树形图布局中是否有一种方法可以指示要显示的最大级
我构建了一个类似于以下内容的图表:http://vis.stanford.edu/protovis/ex/antibiotics-burtin.html使用 svgweb 使其在 IE8 中运行。质量
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Lambda function syntax in JavaScript without curly bra
有人知道在哪里可以找到使用 Protovis 的基本帮助函数吗?我正在考虑用于绘制函数、xy 点、箱线图等的函数。我不需要大量的自定义,只需要绘制这些类型的图表的基本功能。 如果存在辅助函数,这将是一
我想在我的 Web 应用程序中使用 Jquery 工具提示显示数据。 我按照这个网站上的例子http://flowplayer.org/tools/demos/tooltip/index.html并成
我的目标 我正在尝试向 protovis 中的图表添加任意数量的垂直线。给定一个 x 截距值数组,我想遍历这个数组并为每个截距值画一条垂直线。现在,我可以画出固定数量的线条,但无法概括。 我做了什么
var vis = new pv.Panel().canvas('grphLangSpeakers').height(langCount*(barWidth+barGap)).width(canvas
有没有办法在缩放时获取面板的可见区域。我有一个力导向图,我有兴趣获得所有缩放事件后可见区域中的元素。有什么建议么?谢谢 最佳答案 您可以通过transform 参数访问面板的当前变换矩阵。所以,在下面
对于最简单的用例,一个值范围从 -10 到 10 的条形图,如何使用 Protovis JavaScript 图表库对此进行清晰的编码? 干净的意思是使轴居中,显示 x 和 y 轴标签,并表示图表的列
我无法弄清楚如何为 protovis 流图制作动画。我认为最好的方法是简单地将 i, j 索引数组传递给 .layers() 并让 .x() 和.y() 函数查找实际的更新值。有没有更简单的方法? 最
对于 Protovis 新手来说,这是一个相当艰巨的项目,但也许你可以帮我把它分成易于消化的 block ? 我想要构建的是一个“交互式面积图”,如下所示: 首先是数据...我在 Excel 中有各省
我使用 protovis 进行一些数据可视化,我非常喜欢它的 pv.Scale.linear(...).range(...) 功能,该功能可用于创建颜色将数值映射到颜色的比例。 Python 是否有类
我在我的图表上工作得很好。 mouseover 事件工作正常,但是当我添加一个 click 事件时,它没有按我的意愿执行 click 事件。 下面是我的代码: var vis = new pv.Pan
我正在评估 Protovis 和 Jqplot javascript 可视化工具包。我发现两者都很好。但我想知道他们在绘制大量数据点时的表现,比如 1,00,000 到 10,00,000。请分享您的
我正在尝试使用 protovis 可视化 flickr 数据集。我确实了解可视化部分,但是我对访问数据有疑问。我获得了一个可视化示例,它按以下方式访问数据: var data = pv.range(2
我正在考虑切换到 protovis 进行可视化。然而,有一件事让我持怀疑态度——因为 protovis 在浏览器中将其输出创建为一个 div,我想知道是否有任何至少半自动的方式让我一次创建一堆图像而不
TLDR:有没有人同时使用过 protovis 和 D3.js 来说明两者之间的区别? 过去 2 周我一直在使用 protovis,到目前为止效果非常好。除了现在我似乎在动画方面遇到了一些障碍。 原型
我是一名优秀的程序员,十分优秀!