如何生成图表/图表(如Google Analytics(分析)的访问者流量)? [英] how to generate a graph/diagram like Google Analytics's Visitor Flow?
问题描述
我想要产生与最近的Google Analytics(分析)「访客流程」类似的图表。这些也称为
因为d3在动画上很好,我认为它看起来很酷,我做了一个动画版本: http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html
这不包括一切可能想要,但希望它会提供一些基础。开始的大块代码只是伪造数据 - 你可以用你的真实数据替换,或者使用 d3.json
加载它。预期格式类似于DOM节点结构d3期望的网络图:
{
//时间列表插槽t1到tn
次:[
// t1节点列表
[
{
nodeName:Node 1,
id:
nodeValue:24332
},
//等...
],
//等...
],
/ /所有链接的列表
links:[
{
source:1,//源节点的id
目标:5,//目标节点的id
value :3243
},
// ... etc
]
}
我希望这是有帮助的 - 这不是一个典型的SO响应,它可能需要一定量的工作来定制您的需求,但我认为这可能是有用的。
I am trying to generate a diagram similar to that presented by the recent Google Analytics "Visitor Flow". These are also known as Alluvial diagrams.
I can use a web or non-web based solution, as long as I can run it myself.
The data I want to visualize is the following:
- at time t1, I have x1 units, divided into n1 parts
- at time t2, the n1 parts split (or merged) into n2 parts, with x2 units
- i want to show where the splits/merges are taking place.
My data is currently represented with a DiGraph in NetworkX, but this may be irrelevant, since I can output my data in any format required.
I thought this was an interesting question, so I made an example alluvial diagram using d3: http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html
And, because d3 is so good at animation, and I thought it would look cool, I made an animated version as well: http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html
It doesn't cover everything you might want, but hopefully it will provide some basis. The large block of code in the beginning is just making fake data - you can replace this with your real data, or load it using d3.json
. The expected format is similar to the DOM node structure d3 expects for network graphs:
{
// list of time slots t1 through tn
times: [
// list of t1 nodes
[
{
nodeName: "Node 1",
id: 1,
nodeValue: 24332
},
// etc ...
],
// etc ...
],
// list of all links
links: [
{
source: 1, // id of source node
target: 5, // id of target node
value: 3243
},
// ... etc
]
}
I hope that's helpful - this isn't a typical SO response, and it would likely require a certain amount of work to customize to your needs, but I thought it might be useful.
这篇关于如何生成图表/图表(如Google Analytics(分析)的访问者流量)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!