Add intervention flowchart part for each step

data is generated as one file for each law in data/TEXTID/viz/interventions.json:

{                                                        
    "02_1\u00e8relecture_assemblee_hemicycle": {
        "first_date": "2012-09-05",
        "last_date": "2012-09-07",
        "groupes": {
            "ECOLO": {
                "color": "rgb(0,230,30)", 
                "link": "http://www.nosdeputes.fr/groupe/ECOLO", 
                "nom": "\u00c9cologiste"
            }, 
            "GDR": {
                "color": "rgb(255,30,30)", 
                "link": "http://www.nosdeputes.fr/groupe/GDR", 
                "nom": "Gauche d\u00e9mocrate et r\u00e9publicaine"
            }, 
            ....
        },
        "orateurs:" {
            "Alain Marsaud": {
                "color": "rgb(30,30,200)", 
                "fonction": "", 
                "groupe": "UMP", 
                "link": "http://www.nosdeputes.fr/alain-marsaud", 
                "nom": "Alain Marsaud", 
                "photo": "http://www.nosdeputes.fr/depute/photo/alain-marsaud"
            }, 
            "Alain Tourret": {
                "color": "rgb(250,195,132)", 
                "fonction": "", 
                "groupe": "RRDP", 
                "link": "http://www.nosdeputes.fr/alain-tourret", 
                "nom": "Alain Tourret", 
                "photo": "http://www.nosdeputes.fr/depute/photo/alain-tourret"
            }, 
            "Alain Vidalies": {
                "color": "#888888", 
                "fonction": "ministre d\u00e9l\u00e9gu\u00e9 charg\u00e9 des relations avec le parlement", 
                "groupe": "", 
                "link": "", 
                "nom": "Alain Vidalies", 
                "photo": ""
            }, 
            ....
        },
        "divisions": {
          "Article 10": {
            "order": 15,
            "link": "http://www.nosdeputes.fr/14/seance/2156#inter_b8d2d2fe0656d8923d0535fd683d6abf",
            "source": "http://www.assemblee-nationale.fr/14/cri/2012-2013-extra/20131031.asp#P19317",
            "total_intervs": 6,
            "total_mots": 84
            "groupes": {
                "SRC": {
                    "nb_intervs": 1,
                    "nb_mots": 18
                },
                "ministre des affaires sociales et de la sant\u00e9": {
                    "nb_intervs": 1,
                    "nb_mots": 32
                },
                "pr\u00e9sidence": {
                    "nb_intervs": 3,
                    "nb_mots": 31
                },
                "rapporteur de la commission des affaires sociales": {
                    "nb_intervs": 1,
                    "nb_mots": 3
                }
            },
            "orateurs": {
                "Denys Robiliard": {
                    "nb_intervs": 1,
                    "nb_mots": 3
                },
                "G\u00e9rard Sebaoun": {
                    "nb_intervs": 1,
                    "nb_mots": 18
                },
                "Marc Le Fur, pr\u00e9sident": {
                    "nb_intervs": 3,
                    "nb_mots": 31
                },
                "Marisol Touraine": {
                    "nb_intervs": 1,
                    "nb_mots": 32
                }
            },
          "Article 11": {
            "order": 16,
            "source": "http://www.assemblee-nationale.fr/14/cri/2012-2013-extra/20131031.asp#P19326",
            "total_intervs": 8,
            "total_mots": 65
            ...
          },
          ...
        }
    },
   "04_1\u00e8relecture_senat_commission": {
        "groupes": {...},
        "orateurs:" {...},
        "divisions": {
           "Audition du pr jean-luc harousseau pr\u00e9sident du coll\u00e8ge de la haute autorit\u00e9 de sant\u00e9 sur le rapport d'activit\u00e9 de la has pour 2012": {
            "order": 1,
            ....
        }
   }
}

updated the schema with https://github.com/regardscitoyens/the-law-factory-parser/commit/f61c234b0f593b6311d2e03c443f3bba1291b4b2 Added info on speakers and groups (link, photo, color, full name, etc)

Schema updated again , see example below. @fenicento, adding there as well notes on the first draft after discussions with @teymour

Looking at the viz, let's drop out on the extra idea of having a flow for each speaker, but instead we should be able when clicking on a flow (unclicking should also be added) to display in the textzone the ordered list of speakers of this group at the clicked step, with picture, link, and function when available and number of interv/words. The corresponding data has been reorganized to allow to do that easily.
I removed from the data sections with less than 3 interventions since they do not really participate to the debate (they're mainly introductions)
The titles on the left should be a little bit bigger and probably included in the side as in the other modules
The distance between two steps is quite big. A smaller one would be nice, and it would be interesting to try and make big debated sections appear bigger by adapting the distance to the total_words field.
Although it's more colorful, the crossing betwen flows to order them at each step makes it a bit harder to read when keeping the same order all the time could be simplier and nice looking as well. (order should be something such as special ones one ppolitical left to political right, like "présidence, rapporteurs, gouvernement, CRC, SRC, RRDP, UDI, UMP, Auditionnés" ; we will try and ad this order to the groupes metadata firther on)
Also, colors are a bit too modified making them hard to distinguish. The grey ones should probably be split in some ways (guvernment, auditions, presidents, rapporters), I'll be happy to hardcode it in the data if you have ideas (some yellow maybe to avoid conflicting with the other existing groups?)

{
   "02_1\u00e8relecture_assemblee_hemicycle": {
        "groupes": {
            "ECOLO": {
                "color": "rgb(0,230,30)",
                "link": "http://www.nosdeputes.fr/groupe/ECOLO",
                "nom": "\u00c9cologiste"
            },
            "GDR": {
                "color": "rgb(255,30,30)",
                "link": "http://www.nosdeputes.fr/groupe/GDR",
                "nom": "Gauche d\u00e9mocrate et r\u00e9publicaine"
            }, ...
        },
        "orateurs": {
            "alain chr\u00e9tien": {
                "color": "rgb(30,30,200)", 
                "fonction": "", 
                "groupe": "UMP", 
                "link": "http://www.nosdeputes.fr/alain-chretien", 
                "nom": "Alain Chr\u00e9tien", 
                "photo": "http://www.nosdeputes.fr/depute/photo/alain-chretien"
            },  
            "alain vidalies": {
                "color": "#888888",
                "fonction": "ministre d\u00e9l\u00e9gu\u00e9 charg\u00e9 des relations avec le Parlement",
                "groupe": "",
                "link": "",
                "nom": "Alain Vidalies",
                "photo": ""
            }, ... 
        },
        "divisions": {
            "Apr\u00e8s l'article 10": {
                "order": 7,
                "first_date": "2013-06-19", 
                "last_date": "2013-06-19",
                "link": "http://www.nosdeputes.fr/14/seance/1553#inter_40bc7963b90226b77b0b69441aa51fa2",
                "source": "http://www.assemblee-nationale.fr/14/cri/2012-2013/20130276.asp#P552_83062",
                "total_intervs": 45,
                "total_mots": 1723
                "groupes": {
                    "SRC": {
                        "nb_intervs": 16, 
                        "nb_mots": 1030, 
                        "orateurs": {
                            "chantal guittet": {
                                "nb_intervs": 1, 
                                "nb_mots": 5
                            }, 
                            "chaynesse khirouni": {
                                "nb_intervs": 2, 
                                "nb_mots": 13
                            }, ...
                    },   
                    "gouvernement": {
                        "nb_intervs": 2, 
                        "nb_mots": 26, 
                        "orateurs": {
                            "alain vidalies": {
                                "nb_intervs": 2, 
                                "nb_mots": 26
                            }
                        }
                    }, ...   
                },       
            },           
            "Article 27": {
            }, ...
        }
    }, 
   "05_1\u00e8relecture_senat_hemicycle": {
        "groupes": { ... },
        "orateurs": { ... },
        "divisions": { ... }
   }, ...
}

Looking at the viz, let's drop out on the extra idea of having a flow for each speaker, but instead we should be able when clicking on a flow (unclicking should also be added) to display in the textzone the ordered list of speakers of this group at the clicked step, with picture, link, and function when available and number of interv/words. The corresponding data has been reorganized to allow to do that easily.

The data about speakers is actually shown when clicking on a specific step of the discussion. When clicking on a stream, only the name of the group is shown in the text box on the right

The titles on the left should be a little bit bigger and probably included in the side as in the other modules

Actually I was thinking about leaving the labels of the steps inside the visualization; this way we can always show the entire string and have a more compact layout. Such fashion should be followed also for the module mod2 (i.e. inserting the labels of the articles above each row of amendements)

The distance between two steps is quite big. A smaller one would be nice, and it would be interesting to try and make big debated sections appear bigger by adapting the distance to the total_words field.

I reduced the distance between each step. As for the dynamic distance, we can keep it as a bonus feature to be added if we have time.

Although it's more colorful, the crossing betwen flows to order them at each step makes it a bit harder to read when keeping the same order all the time could be simplier and nice looking as well. (order should be something such as special ones one ppolitical left to political right, like "présidence, rapporteurs, gouvernement, CRC, SRC, RRDP, UDI, UMP, Auditionnés" ; we will try and ad this order to the groupes metadata firther on)

The actual ordering adds visual information about the groups participation in each step and it's a default behaviour of streamgraphs. I'd like to leave it as is, but if you think that a political orientation would be more useful I just need a field with the specified order.

Also, colors are a bit too modified making them hard to distinguish. The grey ones should probably be split in some ways (guvernment, auditions, presidents, rapporters), I'll be happy to hardcode it in the data if you have ideas (some yellow maybe to avoid conflicting with the other existing groups?)

A suggestion for neutral groups could be a range of pseudo-neutral colors (see this jsfiddle)

The data about speakers is actually shown when clicking on a specific step of the discussion. When clicking on a stream, only the name of the group is shown in the text box on the right

Yes, saw that. A few adjustments are still required :

the speakers should be ordered by the amount of words (bigger to smaller)
I don't remember if I included it in the data or not, but we should have there a link to the first corresponding intervention of each speaker within this section. I'll check and add it to the data if it's missing. The current link to the MP should disappear for this one instead, and be placed on the picture/name instead.
there shouldn't be a picture and a link when the field are not present

Also it is quite confusing to be able to click on the rest of the streams without it displaying anything. So maybe not let them clickable, in which case we should probably make the clickable zone more visible compared to the streams since they are the only relevant and clickable information. Or maybe when on the stream (but not on a section) this could display the same speakers info but aggregated for the group on the whole bill? Open to other ideas... Also

Actually I was thinking about leaving the labels of the steps inside the visualization; this way we can always show the entire string and have a more compact layout. Such fashion should be followed also for the module mod2 (i.e. inserting the labels of the articles above each row of amendements)

All right but indeed in this case we need it to be consistent with the amendments module and their titles should display within the viz as well on the left of the amendements then. This will leave the left space for the align/group buttons we need on both modules 1 and 2.

I reduced the distance between each step. As for the dynamic distance, we can keep it as a bonus feature to be added if we have time.

Sounds good as bonus.

BTW, I did some tryouts using a Math.sqrt on the values, since we have visible areas this would make mathematical sense and this makes the smallest divisions a bit more visible since there's a big discrepancy between the different sections.

The actual ordering adds visual information about the groups participation in each step and it's a default behaviour of streamgraphs. I'd like to leave it as is, but if you think that a political orientation would be more useful I just need a field with the specified order. Yep I know, but here I believe this makes it more confusing. I will add the order info quickly. Before we decide which one to keep, maybe we can have the two switchable for tryouts?

A suggestion for neutral groups could be a range of pseudo-neutral colors (see this jsfiddle)

Yes, let's try!

Well thinking a little more about it, I was thinking for the clickable streams, that we could make the whole stream just divided int he middle of two steps and have it clickable as such, this is probably the most intuitive solution for the users

in the current version (dc2bc55c5298f4398ce1fc682f9382ac7dc36511) the flows are not clickable, while the steps are highlighted and clickable. Speakers order on the text zone is driven by the number of words.

regardscitoyens / the-law-factory

Add intervention flowchart part for each step #34