analysis.py

@@ -69,8 +69,8 @@ def sociogram_data():
             .join(subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest))
         )
         for c in session.exec(statement2):
-            for i, p in enumerate(c.love):
+            for p in c.love:
-                G.add_edge(c.user, p, rank=i, popularity=1 - 0.08 * i)
+                G.add_edge(c.user, p)
                 links.append({"source": c.user, "target": p})
     return G
 
@@ -81,11 +81,10 @@ class Params(BaseModel):
     arrow_size: int | None = Field(default=20, alias="arrowSize")
     edge_width: float | None = Field(default=1, alias="edgeWidth")
     distance: float | None = 0.2
-    weighting: bool | None = True
-    popularity: bool | None = True
 
 
-async def render_sociogram(params: Params):
+def sociogram_image(params: Params):
+    plt.close()
     plt.figure(figsize=(16, 10), facecolor="none")
     ax = plt.gca()
     ax.set_facecolor("none")  # Set the axis face color to none (transparent)
@@ -93,21 +92,15 @@ async def render_sociogram(params: Params):
 
     G = sociogram_data()
     pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
-    nodes = nx.draw_networkx_nodes(
+    nx.draw_networkx_nodes(
         G,
         pos,
-        node_color=[v for k, v in G.in_degree(weight="popularity")]
+        node_color="#99ccff",
-        if params.popularity
-        else "#99ccff",
         edgecolors="#404040",
-        linewidths=0,
+        linewidths=1,
-        # node_shape="8",
         node_size=params.node_size,
-        cmap="coolwarm",
         alpha=0.86,
     )
-    if params.popularity:
-        plt.colorbar(nodes)
     nx.draw_networkx_labels(G, pos, font_size=params.font_size)
     nx.draw_networkx_edges(
         G,
@@ -117,11 +110,6 @@ async def render_sociogram(params: Params):
         arrowsize=params.arrow_size,
         node_size=params.node_size,
         width=params.edge_width,
-        arrowstyle="-|>",
-        # connectionstyle="arc3,rad=0.2",
-        alpha=[1 - 0.08 * G.edges()[*edge]["rank"] for edge in G.edges()]
-        if params.weighting
-        else 1,
     )
 
     buf = io.BytesIO()
@@ -134,7 +122,7 @@ async def render_sociogram(params: Params):
 
 
 analysis_router.add_api_route("/json", endpoint=sociogram_json, methods=["GET"])
-analysis_router.add_api_route("/image", endpoint=render_sociogram, methods=["POST"])
+analysis_router.add_api_route("/image", endpoint=sociogram_image, methods=["POST"])
 
 if __name__ == "__main__":
     with Session(engine) as session:
@@ -142,3 +130,13 @@ if __name__ == "__main__":
         print("players in DB: ", session.exec(statement).first())
     G = sociogram_data()
     pos = nx.spring_layout(G, scale=1, k=2, iterations=50, seed=42)
+    edges = nx.draw_networkx_edges(
+        G,
+        pos,
+        arrows=True,
+        arrowsize=12,
+    )
+    nx.draw_networkx(
+        G, pos, with_labels=True, node_color="#99ccff", font_size=8, node_size=2000
+    )
+    plt.show()

src/Analysis.tsx

@@ -15,8 +15,6 @@ interface Params {
   arrowSize: number;
   fontSize: number;
   distance: number;
-  weighting: boolean;
-  popularity: boolean;
 }
 
 export default function Analysis() {
@@ -27,8 +25,6 @@ export default function Analysis() {
     arrowSize: 20,
     fontSize: 10,
     distance: 2,
-    weighting: true,
-    popularity: true,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -60,26 +56,6 @@ export default function Analysis() {
       </button>
       <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
-        <div className="control">
-          <div className="checkBox">
-            <label>weighting</label>
-            <input
-              type="checkbox"
-              checked={params.weighting}
-              onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
-              onMouseUp={() => loadImage()}
-            /></div>
-
-          <div className="checkBox">
-            <label>popularity</label>
-            <input
-              type="checkbox"
-              checked={params.popularity}
-              onChange={(evt) => { setParams({ ...params, popularity: evt.target.checked }); loadImage() }}
-            />
-          </div>
-        </div>
-
         <div className="control">
           <label>distance between nodes</label>
           <input

src/App.css

@@ -50,7 +50,7 @@ h3 {
 
   button,
   img {
-    padding: 0px 1em 4px 1em;
+    padding: 0 1em;
     margin: 3px auto;
   }
 }
@@ -146,8 +146,7 @@ button {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  border: 1px solid #404040;
-  border: 2px solid #404040;
   padding: 8px;
 }