如何生成像谷歌分析访客流这样的图形/图表？

Posted 2023-02-21

【中文标题】如何生成像谷歌分析访客流这样的图形/图表？

【英文标题】：how to generate a graph/diagram like Google Analytics's Visitor Flow?

【发布时间】：2012-01-03 13:47:03

【问题描述】：

我正在尝试生成与最近的 Google Analytics（分析）“访客流”所呈现的图表类似的图表。这些也称为Alluvial diagrams。

我可以使用基于 Web 或非基于 Web 的解决方案，只要我可以自己运行。

我想可视化的数据如下：

在时间 t1，我有 x1 个单位，分为 n1 个部分 在时间 t2，n1 个部分拆分（或合并）为 n2 个部分，具有 x2 个单位 我想显示拆分/合并发生的位置。

我的数据目前在NetworkX 中用有向图表示，但这可能无关紧要，因为我可以以任何所需的格式输出我的数据。

【参考方案1】：

考虑 R 中的平行坐标图

![赛马平行坐标图][1]

df <- structure(list(Horse = structure(c(11L, 16L, 13L, 15L, 3L, 18L, 10L, 17L, 19L, 8L, 5L, 9L, 1L, 4L, 12L, 2L, 14L, 7L, 6L), 
.Label = c("Advice", "Atomic Rain", "Chocolate Candy", "Desert Party", "Dunkirk", "Flying Private"
, "Friesan Fire", "General Quarters", "Hold Me Back", "Join in the Dance", "Mine That Bird", "Mr. Hot Stuff", "Musket Man"
, "Nowhere to Hide", "Papa Clem", "Pioneer of the Nile", "Regal Ransom", "Summer Bird", "West Side Bernie")
, class = "factor")
, X1.4 = c(19L, 3L, 8L, 5L, 17L, 16L, 1L, 2L, 13L, 12L, 9L, 14L, 15L, 4L, 18L, 10L, 11L, 6L, 7L)
, X1.2 = c(19L, 3L, 8L, 4L, 12L, 16L, 1L, 2L, 17L, 13L, 10L, 5L, 15L, 6L, 18L, 9L, 14L, 7L, 11L)
, X3.4 = c(19L, 4L, 7L, 3L, 15L, 16L, 1L, 2L, 14L, 11L, 9L, 6L, 17L, 5L, 18L, 10L, 12L, 8L, 13L)
, X1m = c(12L, 2L, 7L, 4L, 8L, 15L, 1L, 3L, 17L, 10L, 11L, 5L, 13L, 6L, 16L, 9L, 18L, 14L, 19L)
, Str = c(1L, 2L, 4L, 3L, 7L, 9L, 5L, 6L, 13L, 10L, 12L, 8L, 14L, 11L, 16L, 15L, 18L, 17L, 19L)
, Finish = 1:19), .Names = c("Horse", "X1.4", "X1.2", "X3.4", "X1m", "Str", "Finish")
, class = "data.frame", row.names = c(NA, -19L))

library(ggplot2)

df$Horse <- with(df, reorder(Horse, Finish))
dfm <- melt(df)

#add a volume metric
dfm$volume <- ifelse(dfm$variable == "X1.4" & dfm$value <= 6,6,
                ifelse(dfm$variable == "X1.4" & dfm$value > 6 & dfm$value <= 12,6,
            ifelse(dfm$variable == "X1.4" & dfm$value > 12,7,1)))
dfm$volume <- ifelse(dfm$variable == "X1.2" & dfm$value <= 9,9,
                ifelse(dfm$variable == "X1.2" & dfm$value > 9 & dfm$value<= 14,5,
            ifelse(dfm$variable == "X1.2" & dfm$value > 14,5,dfm$volume)))
dfm$volume <- ifelse(dfm$variable == "X3.4" & dfm$value <= 3,3,
                  ifelse(dfm$variable == "X3.4" & dfm$value > 3 & dfm$value <= 19,1,dfm$volume))

#Alter the race for some neck to neck action
dfm$value <- ifelse(dfm$variable == "X1.4" & dfm$value <= 6,4,
              ifelse(dfm$variable == "X1.4" & dfm$value > 6 & dfm$value <= 12,8,dfm$value))
dfm$value <- ifelse(dfm$variable == "X1.2" & dfm$value <= 9,5,
              ifelse(dfm$variable == "X1.2" & dfm$value > 9 & dfm$value <= 14,11,dfm$value))
dfm$value <- ifelse(dfm$variable == "X3.4" & dfm$value <= 3,2,
              ifelse(dfm$variable == "X3.4" & dfm$value > 3 & dfm$value <= 19,11,dfm$value))


p <- ggplot(dfm, aes(factor(variable), value, group = Horse, colour = Horse, label = Horse))
p1 <- p + geom_line(aes(size = volume), labels = labels) + geom_text(data = subset(dfm,variable == "Finish"), 
aes(x = factor(variable + 0.5)), size = 3.5, hjust = 0.8)

labels <- c(expression(1/4), expression(1/2),expression(3/4), "1m", "Str", "Finish","")

p1 + theme_bw() + opts(legend.position = "none",
     panel.border = theme_blank(), axis.ticks = theme_blank()) +
     scale_x_discrete(breaks = c(levels(dfm$variable),
         ""), labels = labels) + scale_y_continuous(breaks = NA,
     trans = "reverse") + xlab(NULL) + ylab(NULL)


# Credit and other notes:
# http://learnr.wordpress.com/2009/05/06/ggplot2-bump-chart/
# ![enter image description here][1]http://had.co.nz/ggplot/plot-templates.html Parallel coordinates plot

【讨论】：

已弃用函数（opts、theme_blank..）和此示例中的其他错误。

【参考方案2】：

我认为这是一个有趣的问题，所以我使用 d3 制作了一个冲积图示例：http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html

而且，因为d3非常擅长动画，而且我觉得它看起来很酷，所以我也做了一个动画版本：http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html

它没有涵盖您可能想要的所有内容，但希望它能提供一些基础。一开始的大块代码只是制作假数据——你可以用你的真实数据替换它，或者使用d3.json加载它。预期的格式类似于 d3 对网络图预期的 DOM 节点结构：

    // 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
    ]

我希望这会有所帮助 - 这不是典型的 SO 响应，可能需要进行一定量的工作才能根据您的需求进行定制，但我认为它可能有用。

【讨论】：

这太棒了！我现在就试一试。

最后一个链接是一个巧妙的整合 Mr Cheese

显然最后一条评论中的链接不再有效，但我在这里找到了它：images.theage.com.au/file/2012/07/02/3421190/marc2B%25202/…

@nrabinowitz 非常感谢。我能够基于它创建一个很好的可视化。代码上有许可证吗？