diff --git a/569visual.png b/569visual.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd6f00a7ee8535548e1cbed13746ffb0f13d7ea1
Binary files /dev/null and b/569visual.png differ
diff --git a/56visual.png b/56visual.png
new file mode 100644
index 0000000000000000000000000000000000000000..568e34cc4940ecf426d3314e6003727bd45ce2ca
Binary files /dev/null and b/56visual.png differ
diff --git a/824visual.png b/824visual.png
new file mode 100644
index 0000000000000000000000000000000000000000..3815ca752a666c466adf17be11990f9832ba03b2
Binary files /dev/null and b/824visual.png differ
diff --git a/abstracting_script.py b/abstracting_script.py
index 69eb76cf165d179769e03d7654e55018a52fa8b3..e7f3bbd48137387b679fc4bbc8cf32982eb36eba 100644
--- a/abstracting_script.py
+++ b/abstracting_script.py
@@ -399,8 +399,6 @@ print(total_session_count, total_session_time)
print("--- %s seconds ---" % (time.time() - start_time))
df2 = pd.read_csv("Exercise_Progresses.csv", low_memory=False)
df1 = pd.read_csv("fixed_User_Interactions.csv_merged_result_unannotated.csv", low_memory=False)
-
-#merged = df1.merge(df2, on="user ID")
merged = pd.merge(df1, df2, on="user ID", how="right")
merged.to_csv("mergedCsv.csv", index=False)
diff --git a/futureworkvis.jpg b/futureworkvis.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cc33622fd2be1fbfc618d9ad1a80476f3ac72e7d
Binary files /dev/null and b/futureworkvis.jpg differ
diff --git a/mergedCsv.csv b/mergedCsv.csv
index 785a9fbeea1d03c05ae5232262b99676a3754703..532dcbaf96a435aea4decb3064bc1479aea56b8c 100644
Binary files a/mergedCsv.csv and b/mergedCsv.csv differ
diff --git a/pyscript.css b/pyscript.css
index 1d5c13177d4a05e781f4e7c40bfd713fd0893045..bcb5f1c2e7ccf117a09f16c8704a1316f81a8a9a 100644
--- a/pyscript.css
+++ b/pyscript.css
@@ -8,13 +8,35 @@ h1 {
-webkit-background-clip: text;
}
-#matplotlib-bar{
+#student56viz{
margin: auto;
width: 50%;
border: 3px solid rgb(83, 8, 8);
padding: 10px;
}
+#student569viz{
+ margin: auto;
+ width: 50%;
+ border: 3px solid rgb(83, 8, 8);
+ padding: 10px;
+}
+
+#student824viz{
+ margin: auto;
+ width: 50%;
+ border: 3px solid rgb(83, 8, 8);
+ padding: 10px;
+}
+
+#futurework{
+ margin: auto;
+ width: 50%;
+ border: 3px solid rgb(83, 8, 8);
+ padding: 10px;
+}
+
+
#matplotlib-lineplot
{
margin: auto;
diff --git a/pyscript.html b/pyscript.html
index d47f547a4243d0a826e4946a5f39b6577673cecd..8cee203842716edc8aadbfaac2783505b51edf1b 100644
--- a/pyscript.html
+++ b/pyscript.html
@@ -12,36 +12,107 @@
<py-env>
- matplotlib
- pandas
- - paths:
- - ./InteractionPrototype.csv_merged_result_unannotated.csv
</py-env>
</head>
<h1 id="header"> OpenDSA Visualizations Dashboard</h1>
<body>
- <div id="matplotlib-lineplot"> </div>
- <py-script output="matplotlib-lineplot">
- # Python Code
- #importing pandas
- import pandas
- df = pandas.read_csv('./InteractionPrototype.csv_merged_result_unannotated.csv')
- # importing the matplotlib library
- import matplotlib.pyplot as plt
- fig, ax = plt.subplots()
- # x axis
- x = ["FF Event", "Document Event", "Other Event", "Window Event"]
- # y axis
- y = [10, 5, 9, 7]
- plt.plot(x, y, marker='o', linestyle='-', color='b')
- # Naming the x-label
- plt.xlabel('Event Names')
- # Naming the y-label
- plt.ylabel('Num Events')
- # Naming the title of the plot
- plt.title('Event Name vs Num Events')
- fig
- </py-script>
+ <div id="student56viz">
+ <img src ="56visual.png" alt="Student 56 visualization">
+ </div>
+ <div id="student569viz">
+ <img src ="569visual.png" alt="Student 569 visualization">
+ </div>
+ <div id="student824viz">
+ <img src ="824visual.png" alt="Student 824 visualization">
+ </div>
+ <div id="futurework">
+ <img src ="futureworkvis.jpg" alt="More to come...">
+ </div>
+
+ <!-- <py-script output="student56viz">
+ import pandas as pd
+ import numpy as np
+ import matplotlib.pyplot as plt
+ import datetime as dt
+ import networkx as nx
+
+ def organise_labels(x):
+ task=[]
+ times=[]
+ for element in x:
+ if ':' in element:
+ task.append(element.split(':')[0])
+ times.append(float(element.split(':')[1].replace('seconds',' ').replace('sec','').strip()))
+ else:
+ task.append('unknown')
+ times.append(float(element.replace('seconds','').replace('secs','').strip()))
+
+ task_list=list(set(task))
+ tasks_dict=dict()
+ for i in range(len(times)):
+ if task[i] in tasks_dict.keys():
+ tasks_dict[task[i]].append(times[i])
+ else:
+ tasks_dict[task[i]]=[times[i]]
+ formatted_str=[]
+
+ for taskname in tasks_dict.keys():
+ formatted_str.append(taskname +':'+ str(round(np.mean(tasks_dict[taskname]),0)) + 'seconds')
+ return ('\n'.join(formatted_str))
+
+ def graph_building(Data_IR,path_name):
+ Data_IR.loc[:,"old_task_id"]=Data_IR.inst_book_section_exercise_id.shift(1)
+ Data_IR.loc[0,'old_task_id']=int(0)
+ Data_IR=Data_IR.loc[(Data_IR.inst_book_section_exercise_id!=Data_IR.old_task_id),\
+ ['inst_book_section_exercise_id','old_task_id','Action Time']]
+
+ MG = nx.MultiDiGraph()
+ G=nx.from_pandas_edgelist(Data_IR, source='old_task_id', target='inst_book_section_exercise_id',create_using=nx.DiGraph())
+ event_list=[]
+ for edge in G.edges:
+ event_list.append(edge[0])
+ event_list.append(edge[1])
+ EV=sorted(list(set(event_list)))
+ n=len(EV)
+
+ MG.add_nodes_from(EV)
+ p=np.ceil(n**0.5)
+ for edge in G.edges:
+ L=[]
+ DF=Data_IR.loc[(Data_IR.old_task_id==edge[0])&(Data_IR.inst_book_section_exercise_id==edge[1]),["Action Time"]]
+ if DF.shape[0]==1:
+ L.append((edge[0],edge[1],dict(act_time=str(DF['Action Time'].values[0]))))
+ else:
+ L.append((edge[0],edge[1],dict(act_time=organise_labels(DF['Action Time'].values))))
+ MG.add_edges_from(L)
+
+ labelPosDict=dict()
+ nodePosDict =dict()
+ for i in range(n):
+ labelPosDict[EV[i]]=[p*(i//p),i%p]
+ nodePosDict[EV[i]]=[p*(i//p),i%p]
+
+ plt.figure(figsize=(22, 10), dpi=600)
+ auto_pos=nx.spring_layout(MG)
+ labels=dict([((u,v),d['act_time']) for u,v,d in MG.edges(data=True)])
+ nx.draw_networkx_edge_labels(MG,pos=labelPosDict, edge_labels=labels)
+ nx.draw(MG,with_labels=True, pos=nodePosDict,node_color="orange",
+ node_size=2500, alpha=0.3, font_weight="bold", font_size=12, arrows=True,
+ connectionstyle='arc3, rad=0.2',edge_color='green', width=4)
+
+ plt.axis('on')
+ plt.title(path_name.split('/')[-1].replace('.csv',''))
+ plt.savefig('activity_chart.png',dpi=300)
+
+ path_name="./student56.csv
+ Data_IR2=pd.read_csv(path_name)
+ Data_clean=Data_IR2[['Action Time','inst_book_section_exercise_id']].dropna(inplace=False)
+ graph_building(Data_clean,path_name)
+
+
+ </py-script> -->
<div id="matplotlib-bar"></div>
<py-script output="matplotlib-bar">