Commit f0ae1217 authored by Malik Koné's avatar Malik Koné

Updating the Readme files

parent 332b080f
__pycache__*
.*
\ No newline at end of file
* Pour le tableau de bord hangout
* Pour les cycles(SNA)
- installer graph_tool
Folder with code and dataset to produce the visualisations seen in the paper.
Ce dossier contient le code, les données d'entrée et le fichiers de sortie relatifs à la génération d'un sociogramme qui représente les interactions des utilisateurs dans un forum d'un MOOC coursera.
This folder contains code and raw datasets and wrangled dataset related to the sociogram representing the interactions between users in a Coursera forum
Prérequis:
prerequisites:
For cycle.ipynb
- python 2.7
- graph_tool
For webscrapping see file
For webscrapping see in file, but will need
- python '3.6.4 (default, Sep 20 2018, 19:07:50) \n[GCC 5.4.0 20160609]'
- selenium Version: 3.141.0
- geckodriver 0.24.0 ( 2019-01-28)
- Mozilla Firefox 66.0.5
1. Télécharger les données de coursera dans dossier Data
2. Utiliser cycle.ipynb pour créer les sociogrammes
1. dowload (scrap) the data from a Coursera course in the folder Data using `scraping_to_graph.ipynb`
2. use the `cycle` ipython notebook to create sociograms
* Debug
- for scraping_to_graphe.ipynb check that you have the recent geckodriver and firefox version
- or cycle.ipynb the difficulty is the graph_tool installation. I had to compile it from source and it was difficult to have it working within a virtual env. That's the reason is using python2.7
- for `scraping_to_graphe.ipynb` check that you have the recent geckodriver and firefox version
- In cycle.ipynb, the difficulty is having the graph_tool running correctly. I had to compile it from source and it was difficult to have it working within a virtual env. That's why I'm using python2.7 in cycle.ipynb
This folder contains dataset and code to handle google hangout conversation.
- data_ano.ipynb is to anonymise you dataset
- hangout_functions.py is a library of wrangling functions, transforming the raw json export from Google to something that's usefull for charting.
- hg_session_analysis.ipynb use hangout_functions.py to do some analysis of the hangout conversations
- hg_improved.js use d3 to draw the chart.
Some moodle datasets
# Table of Contents
1. [CSEDU-2019](#org5968523)
1. [Images](#org789fb42)
2. [Code](#orgc54c525)
1. [Hangout chats:](#org4f380ad)
2. [Moodle visualization:](#orgaac2801)
3. [Coursera](#orgc546d66)
1. [CSEDU-2019](#org68218db)
1. [Images](#orge7d0f93)
2. [Code](#org1ef1600)
1. [Hangout chats:](#org294a3b5)
2. [Moodle visualization:](#orgf07fe1a)
3. [Coursera](#org958bdec)
<a id="org5968523"></a>
<a id="org68218db"></a>
# CSEDU-2019
Resources and annexes to the paper **"[Towards Visual Explorations of Forums' Collective Dynamics in Learning Management Systems](tex_draft.pdf)"** (This paper received the [best student paper award](./images/best_paper_award2.jpg))
Resources and annexes to the paper **"[Towards Visual Explorations of Forums' Collective Dynamics in Learning Management Systems](tex_draft.pdf)"** (This paper received the [best student paper award](best_paper_award2.jpg))
Checkout the [presentation](mkone_CSEDU2019_diapo.pdf)
<a id="org789fb42"></a>
<a id="orge7d0f93"></a>
## Images
The images in the paper are sometime small. We offer high enough resolution images to see the details.
The images in the paper are sometime small. We offer high resolution images to see the more details.
1. Figure 1
1. 1st figure: Strength the ties
![img](images/discussion.png)
*Illustration of how the strength of actors' ties (or links) varies as a function of time and topic overlap. Thread 1 corresponds to actor-topic dynamic (\ref{eq:1a}) where B's late post after A's 1st publication does not correlate strongly enough to create the link from A to B. But A's 2nd post is timely enough, although not exactly on the same topic as B's message, to create the tie A &#x2013;> B drawn as a dashed arrow. In thread 2, in addition to the tie B &#x2013;> A, we have a topic overlap and time proximity between C and A. This makes a the strong tie A &rarr; C.*
Illustration of how the strength of actors' ties (or links) varies as a function of time and topic overlap. Thread 1 corresponds to actor-topic dynamic (\ref{eq:1a}) where B's late post after A's 1st publication does not correlate strongly enough to create the link from A to B. But A's 2nd post is timely enough, although not exactly on the same topic as B's message, to create the tie A &#x2013;> B drawn as a dashed arrow. In thread 2, in addition to the tie B &#x2013;> A, we have a topic overlap and time proximity between C and A. This makes a the strong tie A &rarr; C.
![img](images/discussion.png)
2. Figure 2
2. 2nd figure: iForum's Dashboard
![img](images/fu2.png)
*\*iForum's Dashboard \citep{Fu2017} showing (a) overall changes of post in the forum, (b) a thread representation, (c) discussions in packed forms, (d) the social network and (e) the details of a discussion.*
iForum's Dashboard \citep{Fu2017} showing (a) overall changes of post in the forum, (b) a thread representation, (c) discussions in packed forms, (d) the social network and (e) the details of a discussion.
![img](images/fu2.png)
3. Figure 3
3. 3rd figure: Convis Dashboard
![img](images/convis2.png)
*Convis Dashboard \citep{Hoque2016} helps explore conversations. On the left, the topics found in the forum using \gls{lda} and organized hierarchically. In the middle, the colored rectangles show a sentiment analysis for each message. Each message is linked to his author place on a semi-circle and thus creating a social network. Finally, on the right, Convis display the detail of the conversation.*
Convis Dashboard \citep{Hoque2016} helps explore conversations. On the left, the topics found in the forum using \gls{lda} and organized hierarchically. In the middle, the colored rectangles show a sentiment analysis for each message. Each message is linked to his author place on a semi-circle and thus creating a social network. Finally, on the right, Convis display the detail of the conversation.
![img](images/convis2.png)
4. Figure 4
4. 4th figure: graphical model of the interaction's strenght
*Graphical proposition for the function I(s,r) of the messages' interaction strength. s is the ``internal'' strength of two messages based on content, time and social network structure. r is ``external'' requirement, it is a parameter set by the observer.*
![img](images/func.png)
Graphical proposition for the function I(s,r) of the messages' interaction strength. s is the \`\`internal'' strength of two messages based on content, time and social network structure. r is \`\`external'' requirement, it is a parameter set by the observer.
5. Figure 5
5. 5th figure: interaction's cycles
![img](images/cycles.png)
*Interactions cycles built from a bi-party actor-topic graph Thread 3 and 4 are transformed to an actor-actor graph. Dotted arrows denotes weaker links.*
Interactions cycles built from a bi-party actor-topic graph Thread 3 and 4 are transformed to an actor-actor graph. Dotted arrows denotes weaker links.
![img](images/cycles.png)
6. Figure 6
6. 6th figure: Data Analysis cycle
![img](images/pipeline.png)
Data Analysis cycle.
7. Figure 7
7. 7th figure: visualizations from the FFL dataset
![img](images/dynco_portrait.png)
Visualizations from the FFL dataset.
8. Figure 8
8. 8th figure: conversation from the VUCI
*Detail of \gls{vuci} conversation taking place in 2 hours. Each circle is a message, and hovering over them brings up its content. The circle's size is proportional to their content's length. Message are layered vertically by actors. On the left is an indication of the actors total messages count.*
![img](images/uvci_portrait.png)
There is also [this link](https://idev.kone.ci/visu/uvci/conv7) to the onlined and live version.
Detail of \gls{vuci} conversation taking place in 2 hours. Each circle is a message, and hovering over them brings up its content. The circle's size is proportional to their content's length. Message are layered vertically by actors. On the left is an indication of the actors total messages count.
Check [this link](https://idev.kone.ci/visu/uvci/conv7) to an on line and live version of the chart. Select your data set and conversation in the top menu.
9. Figure 9
9. 9th figure: temporal actor-actor network
*At the top (a) is half of compound yearly actor-actor network. The three bottom images (b), (c) and (d) are closeup around actor 642 during the quarters of the year.*
![img](images/evolution.png)
At the top (a) is half of compound yearly actor-actor network. The three bottom images (b), (c) and (d) are closeup around actor 642 during the quarters of the year.
<a id="orgc54c525"></a>
<a id="org1ef1600"></a>
## Code
The images above have been generated using code from the Code folder <Code/>
It is mainly code to preprocess the data files that will then be processed in d3.js.
The exemples of visualisations are accessible online at the following adresses (<span class="timestamp-wrapper"><span class="timestamp">&lt;2019-05-22 mer.&gt;</span></span>):
The exemples of visualisations are accessible online at the following adresses (checked on the <span class="timestamp-wrapper"><span class="timestamp">&lt;2019-05-22 mer.&gt;</span></span>):
<a id="org4f380ad"></a>
<a id="org294a3b5"></a>
### Hangout chats:
Visualizations on <https://observablehq.com/@maliky/conversation-visualization-v2>
<a id="orgaac2801"></a>
<a id="orgf07fe1a"></a>
### Moodle visualization:
Visualizations on <https://observablehq.com/@maliky/playing-with-moodle-data>
<a id="orgc546d66"></a>
<a id="org958bdec"></a>
### Coursera
Use the file <Code/SNA-Coursera17/> folder to scrape the data from a Coursera course and then wrangle the data to make the visualisation.
The visualisation requires graph<sub>tool.py</sub>
Use the file <Code/SNA-Coursera17/> folder to scrap the data from a Coursera and then wrangle it into visualisation.
- The visualisation requires `graph_tool.py`
Check the <Code/SNA-Coursera17/README.md>
......@@ -5,60 +5,69 @@ Resources and annexes to the paper *"[[file:tex_draft.pdf][Towards Visual Explor
Checkout the [[file:mkone_CSEDU2019_diapo.pdf][presentation]]
** Images
The images in the paper are sometime small. We offer high enough resolution images to see the details.
**** Figure 1
The images in the paper are sometime small. We offer high resolution images to see the more details.
**** 1st figure: Strength the ties
/Illustration of how the strength of actors' ties (or links) varies as a function of time and topic overlap. Thread 1 corresponds to actor-topic dynamic (\ref{eq:1a}) where B's late post after A's 1st publication does not correlate strongly enough to create the link from A to B. But A's 2nd post is timely enough, although not exactly on the same topic as B's message, to create the tie A --> B drawn as a dashed arrow. In thread 2, in addition to the tie B --> A, we have a topic overlap and time proximity between C and A. This makes a the strong tie A \to C./
[[file:images/discussion.png]]
Illustration of how the strength of actors' ties (or links) varies as a function of time and topic overlap. Thread 1 corresponds to actor-topic dynamic (\ref{eq:1a}) where B's late post after A's 1st publication does not correlate strongly enough to create the link from A to B. But A's 2nd post is timely enough, although not exactly on the same topic as B's message, to create the tie A --> B drawn as a dashed arrow. In thread 2, in addition to the tie B --> A, we have a topic overlap and time proximity between C and A. This makes a the strong tie A \to C.
**** 2nd figure: iForum's Dashboard
/*iForum's Dashboard \citep{Fu2017} showing (a) overall changes of post in the forum, (b) a thread representation, (c) discussions in packed forms, (d) the social network and (e) the details of a discussion./
**** Figure 2
[[file:images/fu2.png]]
iForum's Dashboard \citep{Fu2017} showing (a) overall changes of post in the forum, (b) a thread representation, (c) discussions in packed forms, (d) the social network and (e) the details of a discussion.
**** 3rd figure: Convis Dashboard
/Convis Dashboard \citep{Hoque2016} helps explore conversations. On the left, the topics found in the forum using \gls{lda} and organized hierarchically. In the middle, the colored rectangles show a sentiment analysis for each message. Each message is linked to his author place on a semi-circle and thus creating a social network. Finally, on the right, Convis display the detail of the conversation./
**** Figure 3
[[file:images/convis2.png]]
Convis Dashboard \citep{Hoque2016} helps explore conversations. On the left, the topics found in the forum using \gls{lda} and organized hierarchically. In the middle, the colored rectangles show a sentiment analysis for each message. Each message is linked to his author place on a semi-circle and thus creating a social network. Finally, on the right, Convis display the detail of the conversation.
**** Figure 4
**** 4th figure: graphical model of the interaction's strenght
/Graphical proposition for the function I(s,r) of the messages' interaction strength. s is the ``internal'' strength of two messages based on content, time and social network structure. r is ``external'' requirement, it is a parameter set by the observer./
[[file:images/func.png]]
Graphical proposition for the function I(s,r) of the messages' interaction strength. s is the ``internal'' strength of two messages based on content, time and social network structure. r is ``external'' requirement, it is a parameter set by the observer.
**** Figure 5
[[file:images/cycles.png]]
**** 5th figure: interaction's cycles
/Interactions cycles built from a bi-party actor-topic graph Thread 3 and 4 are transformed to an actor-actor graph. Dotted arrows denotes weaker links./
Interactions cycles built from a bi-party actor-topic graph Thread 3 and 4 are transformed to an actor-actor graph. Dotted arrows denotes weaker links.
[[file:images/cycles.png]]
**** Figure 6
**** 6th figure: Data Analysis cycle
[[file:images/pipeline.png]]
Data Analysis cycle.
**** Figure 7
**** 7th figure: visualizations from the FFL dataset
[[file:images/dynco_portrait.png]]
Visualizations from the FFL dataset.
**** Figure 8
**** 8th figure: conversation from the VUCI
/Detail of \gls{vuci} conversation taking place in 2 hours. Each circle is a message, and hovering over them brings up its content. The circle's size is proportional to their content's length. Message are layered vertically by actors. On the left is an indication of the actors total messages count./
[[file:images/uvci_portrait.png]]
There is also [[https://idev.kone.ci/visu/uvci/conv7][this link]] to the onlined and live version.
Detail of \gls{vuci} conversation taking place in 2 hours. Each circle is a message, and hovering over them brings up its content. The circle's size is proportional to their content's length. Message are layered vertically by actors. On the left is an indication of the actors total messages count.
Check [[https://idev.kone.ci/visu/uvci/conv7][this link]] to an on line and live version of the chart. Select your data set and conversation in the top menu.
**** 9th figure: temporal actor-actor network
/At the top (a) is half of compound yearly actor-actor network. The three bottom images (b), (c) and (d) are closeup around actor 642 during the quarters of the year./
**** Figure 9
[[file:images/evolution.png]]
At the top (a) is half of compound yearly actor-actor network. The three bottom images (b), (c) and (d) are closeup around actor 642 during the quarters of the year.
** Code
** Code
The images above have been generated using code from the Code folder [[file:Code/]]
It is mainly code to preprocess the data files that will then be processed in d3.js.
The exemples of visualisations are accessible online at the following adresses (<2019-05-22 mer.>):
The exemples of visualisations are accessible online at the following adresses (checked on the <2019-05-22 mer.>):
*** Hangout chats:
Visualizations on https://observablehq.com/@maliky/conversation-visualization-v2
*** Moodle visualization:
Visualizations on https://observablehq.com/@maliky/playing-with-moodle-data
*** Coursera
Use the file [[file:Code/SNA-Coursera17/]] folder to scrape the data from a Coursera course and then wrangle the data to make the visualisation.
The visualisation requires graph_tool.py
Use the file [[file:Code/SNA-Coursera17/]] folder to scrap the data from a Coursera and then wrangle it into visualisation.
- The visualisation requires `graph_tool.py`
Check the [[file:Code/SNA-Coursera17/README.org]]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment