README.md 4.53 KB
Newer Older
Malik Koné's avatar
Malik Koné committed
1

2
3
# Table of Contents

Malik Koné's avatar
Malik Koné committed
4
5
6
7
8
9
1.  [CSEDU-2019](#org68218db)
    1.  [Images](#orge7d0f93)
    2.  [Code](#org1ef1600)
        1.  [Hangout chats:](#org294a3b5)
        2.  [Moodle visualization:](#orgf07fe1a)
        3.  [Coursera](#org958bdec)
10
11


Malik Koné's avatar
Malik Koné committed
12
<a id="org68218db"></a>
13

Malik Koné's avatar
Malik Koné committed
14
15
# CSEDU-2019

Malik Koné's avatar
Malik Koné committed
16
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))
17

Malik Koné's avatar
Malik Koné committed
18
Checkout the [presentation](mkone_CSEDU2019_diapo.pdf) 
19

Malik Koné's avatar
Malik Koné committed
20

Malik Koné's avatar
Malik Koné committed
21
<a id="orge7d0f93"></a>
22

Malik Koné's avatar
Malik Koné committed
23
## Images
24

Malik Koné's avatar
Malik Koné committed
25
The images in the paper are sometime small.  We offer high resolution images to see the more details.
26

Malik Koné's avatar
Malik Koné committed
27
1.  1st figure: Strength the ties
28

Malik Koné's avatar
Malik Koné committed
29
    *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.*
Malik Koné's avatar
Malik Koné committed
30
    
Malik Koné's avatar
Malik Koné committed
31
    ![img](images/discussion.png)
Malik Koné's avatar
Malik Koné committed
32

Malik Koné's avatar
Malik Koné committed
33
2.  2nd figure: iForum's Dashboard
Malik Koné's avatar
Malik Koné committed
34

Malik Koné's avatar
Malik Koné committed
35
    *\*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.*
36
    
Malik Koné's avatar
Malik Koné committed
37
    ![img](images/fu2.png)
Malik Koné's avatar
Malik Koné committed
38

Malik Koné's avatar
Malik Koné committed
39
3.  3rd figure: Convis Dashboard
Malik Koné's avatar
Malik Koné committed
40

Malik Koné's avatar
Malik Koné committed
41
    *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.*
Malik Koné's avatar
Malik Koné committed
42
    
Malik Koné's avatar
Malik Koné committed
43
    ![img](images/convis2.png)
Malik Koné's avatar
Malik Koné committed
44

Malik Koné's avatar
Malik Koné committed
45
4.  4th figure: graphical model of the interaction's strenght
Malik Koné's avatar
Malik Koné committed
46

Malik Koné's avatar
Malik Koné committed
47
48
    *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.*
    
Malik Koné's avatar
Malik Koné committed
49
50
    ![img](images/func.png)

Malik Koné's avatar
Malik Koné committed
51
5.  5th figure: interaction's cycles
Malik Koné's avatar
Malik Koné committed
52

Malik Koné's avatar
Malik Koné committed
53
    *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.*
Malik Koné's avatar
Malik Koné committed
54
    
Malik Koné's avatar
Malik Koné committed
55
    ![img](images/cycles.png)
Malik Koné's avatar
Malik Koné committed
56

Malik Koné's avatar
Malik Koné committed
57
6.  6th figure: Data Analysis cycle
Malik Koné's avatar
Malik Koné committed
58
59
60

    ![img](images/pipeline.png)

Malik Koné's avatar
Malik Koné committed
61
7.  7th figure: visualizations from the FFL dataset
Malik Koné's avatar
Malik Koné committed
62
63
64

    ![img](images/dynco_portrait.png)

Malik Koné's avatar
Malik Koné committed
65
8.  8th figure: conversation from the VUCI
Malik Koné's avatar
Malik Koné committed
66

Malik Koné's avatar
Malik Koné committed
67
68
    *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.*
    
Malik Koné's avatar
Malik Koné committed
69
70
    ![img](images/uvci_portrait.png)  
    
Malik Koné's avatar
Malik Koné committed
71
    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.
Malik Koné's avatar
Malik Koné committed
72

Malik Koné's avatar
Malik Koné committed
73
9.  9th figure: temporal actor-actor network
Malik Koné's avatar
Malik Koné committed
74

Malik Koné's avatar
Malik Koné committed
75
76
    *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.*
    
Malik Koné's avatar
Malik Koné committed
77
    ![img](images/evolution.png)
78

Malik Koné's avatar
Malik Koné committed
79

Malik Koné's avatar
Malik Koné committed
80
<a id="org1ef1600"></a>
Malik Koné's avatar
Malik Koné committed
81
82
83

## Code

Malik Koné's avatar
Malik Koné committed
84
The images above have been generated using code from the [Code folder](./code)
Malik Koné's avatar
Malik Koné committed
85
It is mainly code to preprocess the data files that will then be processed in d3.js.
Malik Koné's avatar
Malik Koné committed
86
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>):
Malik Koné's avatar
Malik Koné committed
87
88


Malik Koné's avatar
Malik Koné committed
89
<a id="org294a3b5"></a>
Malik Koné's avatar
Malik Koné committed
90
91
92
93
94
95

### Hangout chats:

Visualizations on <https://observablehq.com/@maliky/conversation-visualization-v2>


Malik Koné's avatar
Malik Koné committed
96
<a id="orgf07fe1a"></a>
Malik Koné's avatar
Malik Koné committed
97
98
99
100
101
102

### Moodle visualization:

Visualizations on <https://observablehq.com/@maliky/playing-with-moodle-data>


Malik Koné's avatar
Malik Koné committed
103
<a id="org958bdec"></a>
Malik Koné's avatar
Malik Koné committed
104

Malik Koné's avatar
Malik Koné committed
105
### Coursera
Malik Koné's avatar
Malik Koné committed
106

Malik Koné's avatar
Malik Koné committed
107
Use the [folder](./Code/SNA-Coursera17/) to scrap the data from a Coursera and then wrangle it into visualisation.
Malik Koné's avatar
Malik Koné committed
108
109
110

-   The visualisation requires `graph_tool.py`

Malik Koné's avatar
Malik Koné committed
111
Check the [README.md in Code/SNA-Coursera17](./Code/SNA-Coursera17/README.md) 
Malik Koné's avatar
Malik Koné committed
112