Comment générer un graphique / diagramme comme le flux de visiteurs de Google Analytics?

Question

Je suis en train de générer un diagramme semblable à celui présenté par le récent Google Analytics "le Flux de Visiteurs". Ces sont également connus comme Alluviale de diagrammes.

Je peux utiliser un site web ou de la non-solution basée sur le web, tant que je peux courir moi-même.

Les données que je veux visualiser est la suivante:

• au temps t1, j'ai x1 parts, divisé en n1 pièces
• au temps t2, le n1 des pièces de split (ou fusionné) dans n2 pièces, avec x2 unités
  • j'en veux pour preuve où les divisions/fusions ont lieu.

Mes données est actuellement représenté avec un Digraphe dans NetworkX, mais ce peut être sans importance, puisque j'ai sortie mes données dans le format requis.

Answer 1

Je pensais que c'était une question intéressante, alors j'ai fait un exemple alluviale de diagramme à l'aide de d3: http://nickrabinowitz.com/projects/d3/alluvial/alluvial.html

Et, parce que d3 est si bon dans l'animation, et j'ai pensé qu'il aurait l'air cool, j'ai fait une version animée ainsi: http://nickrabinowitz.com/projects/d3/alluvial/alluvial-dynamic.html

Elle ne couvre pas tout ce que vous voudrez, mais j'espère qu'il va servir de base. Le grand bloc de code dans le début est tout simplement faux de données, vous pouvez la remplacer avec des données réelles, ou de le charger à l'aide de d3.json. Le format attendu est semblable à l'arbre DOM de la structure d3 attend pour le réseau des graphiques:

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

J'espère que c'est utile, ce n'est pas une caractéristique SORTE de réponse, et il aurait probablement besoin d'une certaine quantité de travail pour l'adapter à vos besoins, mais j'ai pensé qu'il pourrait être utile.

Answer 2

Considérons le tracé des coordonnées parallèles dans R

! [Tracé de coordonnées parallèles d'une course de chevaux] [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