Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
129 views
in Technique[技术] by (71.8m points)

python - how to generate a graph/diagram like Google Analytics's Visitor Flow?

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.

Similar to the diagram below

question from:https://stackoverflow.com/questions/8222356/how-to-generate-a-graph-diagram-like-google-analyticss-visitor-flow

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...